Skip to content

Add axe-core support in ng-unit-testing library for accessibility testing utilities#130

Open
david-d-k wants to merge 2 commits intomasterfrom
feature/a11y-unit-testing
Open

Add axe-core support in ng-unit-testing library for accessibility testing utilities#130
david-d-k wants to merge 2 commits intomasterfrom
feature/a11y-unit-testing

Conversation

@david-d-k
Copy link
Copy Markdown

  • Provide axe-core helper functions for unit tests in @ppwcode/ng-unit-testing.
  • Add a11y unit tests on demo components & fix failures.

@david-d-k david-d-k changed the title A11Y unit testing Add axe-core support in ng-unit-testing library for accessibility testing utilities Apr 24, 2026
<div class="ppw-loader">
@if (loading()) {
<mat-progress-bar mode="indeterminate" type="progressbar"></mat-progress-bar>
<mat-progress-bar mode="indeterminate" type="progressbar" aria-label="Loading"></mat-progress-bar>
Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Doesn't this need to be translatable?

})

it('should have no accessibility violations in its default state', async () => {
const fixture = TestBed.createComponent(ExpandableCardDemoComponent)
Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is a recurring pattern. Maybe it's an idea to just have a single function to call? 'verifyA11y(ExpandableCardDemoComponent)' or something alike.

(click)="toggleExpand(record.initialRecord); $event.stopPropagation()"
class="ppw-table-expand-toggle-button"
[class.ppw-table-expand-toggle-button--expanded]="isExpanded(record.initialRecord)"
[aria-label]="isExpanded(record.initialRecord) ? 'Collapse row' : 'Expand row'"
Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Same with this one.

Copy link
Copy Markdown
Contributor

@MarkCuypersPpw MarkCuypersPpw left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I suggest that the 2nd commit is split up in 2 commits:

  • 1 that fixes the A11y issues in our components.
  • 1 that adds the new unit tests to prevent A11y issues.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants