Skip to content

Commit

Permalink
feat(axe-core 4.8): Axe core version upgrade for Web (#7274)
Browse files Browse the repository at this point in the history
#### Details
This PR updates axe-core to its latest version,
[4.8.4](https://github.com/dequelabs/axe-core/releases/v4.8.4), from
[4.7.2](https://github.com/dequelabs/axe-core/releases/v4.7.2). It also
bumps the accessibility-insights-report package version. As part of the
axe-core update:

- The deprecate & disable duplicate-id / duplicate-id-active rule has
been deprecated (dequelabs/axe-core#4071).
- moved duplicate-id-aria to needs review.
(dequelabs/axe-core#4075)
<img width="922" alt="image"
src="https://github.com/microsoft/accessibility-insights-web/assets/95463767/152c51ce-16d9-4550-aee2-6ddd8155a722">


- checks: enable help-same-as-label, but remove from rules
(dequelabs/axe-core#4096)

- Various improvements were made to the types. Potentially the most
impactful of which is that the target and ancestry property now return
as UnlabelledFrameSelector instead of as string[],

- Major version upgrade 4.8.0 details
https://github.com/dequelabs/axe-core/releases/tag/v4.8.0

<!-- Usually a sentence or two describing what the PR changes -->

##### Motivation

This change is part of
https://dev.azure.com/mseng/1ES/_workitems/edit/2157659/

##### Context

<!-- Are there any parts that you've intentionally left out-of-scope for
a later PR to handle? -->

<!-- Were there any alternative approaches you considered? What
tradeoffs did you consider? -->

#### Pull request checklist
<!-- If a checklist item is not applicable to this change, write "n/a"
in the checkbox -->
- [ ] Addresses an existing issue: #0000
- [ ] Ran `yarn fastpass`
- [x] Added/updated relevant unit test(s) (and ran `yarn test`)
- [x] Verified code coverage for the changes made. Check coverage report
at: `<rootDir>/test-results/unit/coverage`
- [x] PR title *AND* final merge commit title both start with a semantic
tag (`fix:`, `chore:`, `feat(feature-name):`, `refactor:`). See
`CONTRIBUTING.md`.
- [ ] (UI changes only) Added screenshots/GIFs to description above
- [ ] (UI changes only) Verified usability with NVDA/JAWS

---------

Co-authored-by: Rakesh Shivapooja <v-rakeshsh@microsoft.com>
Co-authored-by: Vikash Yadav <v-viyada@microsoft.com>
  • Loading branch information
3 people authored Apr 25, 2024
1 parent c5ef310 commit df756f3
Show file tree
Hide file tree
Showing 16 changed files with 81 additions and 17 deletions.
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -155,7 +155,7 @@
"@microsoft/applicationinsights-web": "^2.8.15",
"@testing-library/user-event": "^14.5.2",
"ajv": "^8.12.0",
"axe-core": "4.7.2",
"axe-core": "4.8.4",
"classnames": "^2.5.1",
"idb-keyval": "^6.2.1",
"lodash": "^4.17.21",
Expand Down
2 changes: 1 addition & 1 deletion packages/report/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@
},
"dependencies": {
"@fluentui/react": "^8.96.1",
"axe-core": "4.7.2",
"axe-core": "4.8.4",
"classnames": "^2.5.1",
"lodash": "^4.17.21",
"luxon": "^3.4.4",
Expand Down
2 changes: 1 addition & 1 deletion packages/ui/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@
},
"dependencies": {
"@fluentui/react": "^8.96.1",
"axe-core": "4.7.2",
"axe-core": "4.8.4",
"classnames": "^2.5.1",
"lodash": "^4.17.21",
"luxon": "^3.4.4",
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,8 @@ export class LoadAssessmentDataSchemaProvider {
const deprecatedRequirements = [
{ assessmentKey: 'automated-checks', requirementKey: 'aria-roledescription' },
{ assessmentKey: 'automated-checks', requirementKey: 'duplicate-id' },
{ assessmentKey: 'automated-checks', requirementKey: 'duplicate-id-active' },
{ assessmentKey: 'automated-checks', requirementKey: 'duplicate-id-aria' },
];
deprecatedRequirements.forEach(requirement => {
if (this.getAssessments(schema)[requirement.assessmentKey] === undefined) {
Expand Down
10 changes: 10 additions & 0 deletions src/common/components/cards/rich-resolution-content.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -72,6 +72,16 @@ export const RichResolutionContent = NamedFC<RichResolutionContentProps>(
</div>
);
}
case 'web/duplicate-id-aria': {
return (
<div>
Document has multiple elements referenced with ARIA with the same id
attribute. Examine any duplicate ID values and rename them. Duplicate IDs
are common validation errors that may break the accessibility of labels,
e.g., form fields, table header cells.
</div>
);
}
case 'web/th-has-data-cells': {
return (
<div>
Expand Down
3 changes: 3 additions & 0 deletions src/common/configs/a11y-insights-rule-resources.ts
Original file line number Diff line number Diff line change
Expand Up @@ -18,9 +18,12 @@ export const getA11yInsightsWebRuleUrl = (ruleId: string) => {
const webRulesWithResources = [
'aria-alt',
'aria-allowed-attr',
'aria-conditional-attr',
'aria-deprecated-role',
'aria-hidden-body',
'aria-hidden-focus',
'aria-input-field-name',
'aria-prohibited-attr',
'aria-required-attr',
'aria-required-attr',
'aria-required-children',
Expand Down
18 changes: 17 additions & 1 deletion src/scanner/axe-extension.d.ts
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,6 @@ declare module 'axe-core/axe' {
};
dom: {
isVisible: Function;
idrefs: (node: HTMLElement, attr: string) => HTMLElement[];
};
text: {
accessibleText: Function;
Expand All @@ -31,6 +30,23 @@ declare module 'axe-core/axe' {
// this must be surrounded by axe.setup and axe.teardown calls
getSelector: (element: HTMLElement) => string;
}
interface Dom {
isVisible: Function;
idrefs: (node: HTMLElement, attr: string) => HTMLElement[];
}
interface Aria {
label: Function;
implicitRole: Function;
getRolesByType: Function;
lookupTable: any;
}

interface Text {
accessibleText: Function;
isHumanInterpretable: Function;
sanitize: Function;
subtreeText: Function;
}

const _audit: {
rules: IRuleConfiguration[];
Expand Down
5 changes: 5 additions & 0 deletions src/scanner/get-rule-inclusions.ts
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,10 @@ export const explicitRuleOverrides: DictionaryStringTo<RuleIncluded> = {
status: 'included',
reason: 'best practice rule that was investigated with no known false positives, implemented as an automated check.',
},
'aria-braille-equivalent': {
status: 'excluded',
reason: "only reports needs-review results, but we haven't implemented needs-review content for it yet",
},
'audio-caption': {
status: 'included',
reason: 'for parity with video-caption, which axe-core includes by default',
Expand Down Expand Up @@ -53,6 +57,7 @@ export const explicitRuleOverrides: DictionaryStringTo<RuleIncluded> = {
export const needsReviewRules = [
'aria-input-field-name',
'color-contrast',
'duplicate-id-aria',
'th-has-data-cells',
'label-content-name-mismatch',
'p-as-heading',
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -289,7 +289,7 @@ exports[`Popup -> Launch Pad content should match snapshot when quick assess fea
Navigate to axe-core npm page
</div>
</div>
4.7.2
4.8.4
</div>
</div>
</div>
Expand Down Expand Up @@ -587,7 +587,7 @@ exports[`Popup -> Launch Pad content should match snapshot when quick assess fea
Navigate to axe-core npm page
</div>
</div>
4.7.2
4.8.4
</div>
</div>
</div>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -68,6 +68,8 @@ describe(LoadAssessmentDataSchemaProvider, () => {
? {
'aria-roledescription': stepProperties,
'duplicate-id': stepProperties,
'duplicate-id-active': stepProperties,
'duplicate-id-aria': stepProperties,
}
: {},
type: ['object', 'null'],
Expand All @@ -80,6 +82,8 @@ describe(LoadAssessmentDataSchemaProvider, () => {
? {
'aria-roledescription': statusProperties,
'duplicate-id': statusProperties,
'duplicate-id-active': statusProperties,
'duplicate-id-aria': statusProperties,
}
: {},
type: ['object', 'null'],
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -60,6 +60,14 @@ exports[`RichResolutionContent renders static content with id=web/color-contrast
</DocumentFragment>
`;

exports[`RichResolutionContent renders static content with id=web/duplicate-id-aria 1`] = `
<DocumentFragment>
<div>
Document has multiple elements referenced with ARIA with the same id attribute. Examine any duplicate ID values and rename them. Duplicate IDs are common validation errors that may break the accessibility of labels, e.g., form fields, table header cells.
</div>
</DocumentFragment>
`;

exports[`RichResolutionContent renders static content with id=web/label-content-name-mismatch 1`] = `
<DocumentFragment>
<span>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@ describe('RichResolutionContent', () => {
it.each([
'web/aria-input-field-name',
'web/color-contrast',
'web/duplicate-id-aria',
'web/th-has-data-cells',
'web/label-content-name-mismatch',
'web/p-as-heading',
Expand Down
1 change: 1 addition & 0 deletions src/tests/unit/tests/common/self-fast-pass.test.ts
Original file line number Diff line number Diff line change
Expand Up @@ -70,6 +70,7 @@ describe('SelfFastPass', () => {
testsToRun: [
'aria-input-field-name',
'color-contrast',
'duplicate-id-aria',
'th-has-data-cells',
'label-content-name-mismatch',
'p-as-heading',
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -16,9 +16,19 @@ exports[`getRuleInclusions getRuleInclusions matches snapshotted list of product
"reason": "best practice rule that was investigated with no known false positives, implemented as an automated check.",
"status": "included",
},
"aria-braille-equivalent": {
"reason": "only reports needs-review results, but we haven't implemented needs-review content for it yet",
"status": "excluded",
},
"aria-command-name": {
"status": "included",
},
"aria-conditional-attr": {
"status": "included",
},
"aria-deprecated-role": {
"status": "included",
},
"aria-dialog-name": {
"reason": "rule is tagged best-practice",
"status": "excluded",
Expand All @@ -38,6 +48,9 @@ exports[`getRuleInclusions getRuleInclusions matches snapshotted list of product
"aria-progressbar-name": {
"status": "included",
},
"aria-prohibited-attr": {
"status": "included",
},
"aria-required-attr": {
"status": "included",
},
Expand Down Expand Up @@ -118,7 +131,8 @@ exports[`getRuleInclusions getRuleInclusions matches snapshotted list of product
"status": "excluded",
},
"duplicate-id-active": {
"status": "included",
"reason": "disabled in axe config",
"status": "excluded",
},
"duplicate-id-aria": {
"status": "included",
Expand Down
6 changes: 3 additions & 3 deletions src/tests/unit/tests/scanner/accessible-text.test.ts
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ describe('axe.commons.text.accessibleText examples', () => {

const element1 = fixture.querySelector('#el1');

const accessibleText = withAxeSetup(() => Axe.commons.text.accessibleText(element1, false));
const accessibleText = withAxeSetup(() => Axe.commons.text.accessibleText(element1));
expect(accessibleText).toBe('hello');
});

Expand All @@ -32,7 +32,7 @@ describe('axe.commons.text.accessibleText examples', () => {

const element2 = fixture.querySelector('#el2');

const accessibleText = withAxeSetup(() => Axe.commons.text.accessibleText(element2, false));
const accessibleText = withAxeSetup(() => Axe.commons.text.accessibleText(element2));
expect(accessibleText).toBe('hello');
});

Expand All @@ -44,7 +44,7 @@ describe('axe.commons.text.accessibleText examples', () => {

const span = fixture.querySelector('#del_row2');

const accessibleText = withAxeSetup(() => Axe.commons.text.accessibleText(span, false));
const accessibleText = withAxeSetup(() => Axe.commons.text.accessibleText(span));
expect(accessibleText).toBe('Delete HolidayLetter.pdf');
});

Expand Down
14 changes: 7 additions & 7 deletions yarn.lock
Original file line number Diff line number Diff line change
Expand Up @@ -3269,7 +3269,7 @@ __metadata:
resolution: "accessibility-insights-report@workspace:packages/report"
dependencies:
"@fluentui/react": ^8.96.1
axe-core: 4.7.2
axe-core: 4.8.4
classnames: ^2.5.1
lodash: ^4.17.21
luxon: ^3.4.4
Expand All @@ -3285,7 +3285,7 @@ __metadata:
resolution: "accessibility-insights-ui@workspace:packages/ui"
dependencies:
"@fluentui/react": ^8.96.1
axe-core: 4.7.2
axe-core: 4.8.4
classnames: ^2.5.1
lodash: ^4.17.21
luxon: ^3.4.4
Expand Down Expand Up @@ -3326,7 +3326,7 @@ __metadata:
"@typescript-eslint/eslint-plugin": ^5.61.0
"@typescript-eslint/parser": ^6.18.1
ajv: ^8.12.0
axe-core: 4.7.2
axe-core: 4.8.4
case-sensitive-paths-webpack-plugin: ^2.4.0
classnames: ^2.5.1
codecov: ^3.8.3
Expand Down Expand Up @@ -3918,10 +3918,10 @@ __metadata:
languageName: node
linkType: hard

"axe-core@npm:4.7.2":
version: 4.7.2
resolution: "axe-core@npm:4.7.2"
checksum: 5d86fa0f45213b0e54cbb5d713ce885c4a8fe3a72b92dd915a47aa396d6fd149c4a87fec53aa978511f6d941402256cfeb26f2db35129e370f25a453c688655a
"axe-core@npm:4.8.4":
version: 4.8.4
resolution: "axe-core@npm:4.8.4"
checksum: 644da2fec17bcf6f834edaab1baa5a75a9a3ee370c323215c73da6d7e45fac11d01470d92d0a3d5f26695e15c1d9b781733dfbe1fe09d505076c58f09ed74e02
languageName: node
linkType: hard

Expand Down

0 comments on commit df756f3

Please sign in to comment.