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

#### 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 <[email protected]>
Co-authored-by: Vikash Yadav <[email protected]>

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",

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",

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",

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) {

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>

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',

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[];

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',

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>

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'],

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>

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',

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',

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",

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');
     });
 

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