feat(axe-core 4.8): Axe core version upgrade for Web (#7274)

SaanicaG · v-rakeshsh · v-viyada · web-flow · commit df756f36c9ee · 2024-04-25T13:28:11.000-04:00
#### 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  ##### Motivation This change is part of https://dev.azure.com/mseng/1ES/_workitems/edit/2157659/ ##### Context   #### Pull request checklist  - [ ] 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>
diff --git a/package.json b/package.json
@@ -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",
diff --git a/packages/report/package.json b/packages/report/package.json
@@ -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",
diff --git a/packages/ui/package.json b/packages/ui/package.json
@@ -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",
diff --git a/src/DetailsView/components/load-assessment-data-schema-provider.ts b/src/DetailsView/components/load-assessment-data-schema-provider.ts
@@ -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) {
diff --git a/src/common/components/cards/rich-resolution-content.tsx b/src/common/components/cards/rich-resolution-content.tsx
@@ -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>
diff --git a/src/common/configs/a11y-insights-rule-resources.ts b/src/common/configs/a11y-insights-rule-resources.ts
@@ -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',
diff --git a/src/scanner/axe-extension.d.ts b/src/scanner/axe-extension.d.ts
@@ -12,7 +12,6 @@ declare module 'axe-core/axe' {
         };
         dom: {
             isVisible: Function;
-            idrefs: (node: HTMLElement, attr: string) => HTMLElement[];
         };
         text: {
             accessibleText: Function;
@@ -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[];
diff --git a/src/scanner/get-rule-inclusions.ts b/src/scanner/get-rule-inclusions.ts
@@ -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',
@@ -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',
diff --git a/src/tests/end-to-end/tests/popup/__snapshots__/launchpad.test.ts.snap b/src/tests/end-to-end/tests/popup/__snapshots__/launchpad.test.ts.snap
@@ -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>
@@ -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>
diff --git a/src/tests/unit/tests/DetailsView/components/load-assessment-data-schema-provider.test.ts b/src/tests/unit/tests/DetailsView/components/load-assessment-data-schema-provider.test.ts
@@ -68,6 +68,8 @@ describe(LoadAssessmentDataSchemaProvider, () => {
                                     ? {
                                           'aria-roledescription': stepProperties,
                                           'duplicate-id': stepProperties,
+                                          'duplicate-id-active': stepProperties,
+                                          'duplicate-id-aria': stepProperties,
                                       }
                                     : {},
                             type: ['object', 'null'],
@@ -80,6 +82,8 @@ describe(LoadAssessmentDataSchemaProvider, () => {
                                     ? {
                                           'aria-roledescription': statusProperties,
                                           'duplicate-id': statusProperties,
+                                          'duplicate-id-active': statusProperties,
+                                          'duplicate-id-aria': statusProperties,
                                       }
                                     : {},
                             type: ['object', 'null'],
diff --git a/src/tests/unit/tests/common/components/cards/__snapshots__/rich-resolution-content.test.tsx.snap b/src/tests/unit/tests/common/components/cards/__snapshots__/rich-resolution-content.test.tsx.snap
@@ -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>
diff --git a/src/tests/unit/tests/common/components/cards/rich-resolution-content.test.tsx b/src/tests/unit/tests/common/components/cards/rich-resolution-content.test.tsx
@@ -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',
diff --git a/src/tests/unit/tests/common/self-fast-pass.test.ts b/src/tests/unit/tests/common/self-fast-pass.test.ts
@@ -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',
diff --git a/src/tests/unit/tests/scanner/__snapshots__/get-rule-inclusions.test.ts.snap b/src/tests/unit/tests/scanner/__snapshots__/get-rule-inclusions.test.ts.snap
@@ -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",
@@ -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",
   },
@@ -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",
diff --git a/src/tests/unit/tests/scanner/accessible-text.test.ts b/src/tests/unit/tests/scanner/accessible-text.test.ts
@@ -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');
     });
 
@@ -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');
     });
 
@@ -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');
     });
 
diff --git a/yarn.lock b/yarn.lock
@@ -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
@@ -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
@@ -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
@@ -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
 
