feat(axe-core-4.7): Bump axe.core version to 4.7.2, exclude aria-roledescription, and promote scrollable-region-focusable

package.json

@@ -154,7 +154,7 @@
         "@fluentui/react": "^8.96.1",
         "@microsoft/applicationinsights-web": "^2.8.11",
         "ajv": "^8.12.0",
-        "axe-core": "4.6.3",
+        "axe-core": "4.7.2",
         "classnames": "^2.3.2",
         "idb-keyval": "^6.2.1",
         "lodash": "^4.17.21",

packages/report/package.json

@@ -1,6 +1,6 @@
 {
     "name": "accessibility-insights-report",
-    "version": "4.6.7",
+    "version": "4.7.2",
     "description": "Accessibility Insights Report",
     "license": "MIT",
     "files": [
@@ -19,7 +19,7 @@
     },
     "dependencies": {
         "@fluentui/react": "^8.96.1",
-        "axe-core": "4.6.3",
+        "axe-core": "4.7.2",
         "classnames": "^2.3.2",
         "lodash": "^4.17.21",
         "luxon": "^3.3.0",

packages/ui/package.json

@@ -18,7 +18,7 @@
     },
     "dependencies": {
         "@fluentui/react": "^8.96.1",
-        "axe-core": "4.6.3",
+        "axe-core": "4.7.2",
         "classnames": "^2.3.2",
         "lodash": "^4.17.21",
         "luxon": "^3.3.0",

src/DetailsView/components/load-assessment-data-schema-provider.ts

@@ -22,8 +22,8 @@ export class LoadAssessmentDataSchemaProvider {
 
     private setDeprecatedRequirementProperties(schema: any) {
         const deprecatedRequirements = [
+            { assessmentKey: 'automated-checks', requirementKey: 'aria-roledescription' },
             { assessmentKey: 'automated-checks', requirementKey: 'duplicate-id' },
-            { assessmentKey: 'automated-checks', requirementKey: 'scrollable-region-focusable' },
         ];
         deprecatedRequirements.forEach(requirement => {
             if (this.getAssessments(schema)[requirement.assessmentKey] === undefined) {

src/common/components/cards/rich-resolution-content.tsx

@@ -80,14 +80,6 @@ export const RichResolutionContent = NamedFC<RichResolutionContentProps>(
                     </div>
                 );
             }
-            case 'web/scrollable-region-focusable': {
-                return (
-                    <span>
-                        Examine the element and ensure that, if there is scrollable content, the
-                        elements are accessible by keyboard.
-                    </span>
-                );
-            }
             case 'web/label-content-name-mismatch': {
                 return (
                     <span>

src/scanner/get-rule-inclusions.ts

@@ -47,18 +47,13 @@ export const explicitRuleOverrides: DictionaryStringTo<RuleIncluded> = {
         status: 'included',
         reason: 'best practice rule that was investigated with no known false positives, implemented as an automated check.',
     },
-    'scrollable-region-focusable': {
-        status: 'excluded',
-        reason: 'only reports to needs-review results due to potential false-positives',
-    },
 };
 
 // all the rules we enable in needs review
 export const needsReviewRules = [
     'aria-input-field-name',
     'color-contrast',
     'th-has-data-cells',
-    'scrollable-region-focusable',
     'label-content-name-mismatch',
     'p-as-heading',
 ];

src/tests/end-to-end/common/scan-for-accessibility-issues.ts

@@ -4,7 +4,6 @@ import * as path from 'path';
 import { AxeResults, ElementContext } from 'axe-core';
 import { getNeedsReviewRulesConfig } from 'scanner/get-rule-inclusions';
 
-import { falsePositiveRemoval } from '../../common/false-positive-violations';
 import { Page } from './page-controllers/page';
 import { prettyPrintAxeViolations, PrintableAxeResult } from './pretty-print-axe-violations';
 
@@ -25,7 +24,6 @@ export async function scanForAccessibilityIssues(
         },
         { selector, rules: getNeedsReviewRulesConfig() },
     )) as AxeResults;
-    axeResults.violations = falsePositiveRemoval(axeResults.violations);
     return prettyPrintAxeViolations(axeResults);
 }
 

src/tests/end-to-end/tests/popup/__snapshots__/launchpad.test.ts.snap

@@ -247,7 +247,7 @@ exports[`Popup -> Launch Pad content should match snapshot when quick assess fea
                 Navigate to axe-core npm page
               </div>
             </div>
-             4.6.3
+             4.7.2
           </div>
         </div>
       </div>
@@ -545,7 +545,7 @@ exports[`Popup -> Launch Pad content should match snapshot when quick assess fea
                 Navigate to axe-core npm page
               </div>
             </div>
-             4.6.3
+             4.7.2
           </div>
         </div>
       </div>

src/tests/unit/tests/DetailsView/components/load-assessment-data-schema-provider.test.ts

@@ -66,8 +66,8 @@ describe(LoadAssessmentDataSchemaProvider, () => {
                             properties:
                                 assessment.key === 'automated-checks'
                                     ? {
+                                          'aria-roledescription': stepProperties,
                                           'duplicate-id': stepProperties,
-                                          'scrollable-region-focusable': stepProperties,
                                       }
                                     : {},
                             type: ['object', 'null'],
@@ -78,8 +78,8 @@ describe(LoadAssessmentDataSchemaProvider, () => {
                             properties:
                                 assessment.key === 'automated-checks'
                                     ? {
+                                          'aria-roledescription': statusProperties,
                                           'duplicate-id': statusProperties,
-                                          'scrollable-region-focusable': statusProperties,
                                       }
                                     : {},
                             type: ['object', 'null'],

src/tests/unit/tests/common/components/cards/__snapshots__/rich-resolution-content.test.tsx.snap

@@ -84,12 +84,6 @@ exports[`RichResolutionContent renders static content with id=web/p-as-heading 1
 </span>
 `;
 
-exports[`RichResolutionContent renders static content with id=web/scrollable-region-focusable 1`] = `
-<span>
-  Examine the element and ensure that, if there is scrollable content, the elements are accessible by keyboard.
-</span>
-`;
-
 exports[`RichResolutionContent renders static content with id=web/th-has-data-cells 1`] = `
 <div>
   Examine the header cell in the context of the table to verify that it has no data cells.

src/tests/unit/tests/common/components/cards/rich-resolution-content.test.tsx

@@ -19,7 +19,6 @@ describe('RichResolutionContent', () => {
         'web/aria-input-field-name',
         'web/color-contrast',
         'web/th-has-data-cells',
-        'web/scrollable-region-focusable',
         'web/label-content-name-mismatch',
         'web/p-as-heading',
     ])('renders static content with id=%s', testId => {

src/tests/unit/tests/common/self-fast-pass.test.ts

@@ -71,7 +71,6 @@ describe('SelfFastPass', () => {
                             'aria-input-field-name',
                             'color-contrast',
                             'th-has-data-cells',
-                            'scrollable-region-focusable',
                             'label-content-name-mismatch',
                             'p-as-heading',
                         ],

src/tests/unit/tests/scanner/__snapshots__/get-rule-inclusions.test.ts.snap

@@ -48,7 +48,8 @@ exports[`getRuleInclusions getRuleInclusions matches snapshotted list of product
     "status": "included",
   },
   "aria-roledescription": {
-    "status": "included",
+    "reason": "disabled in axe config",
+    "status": "excluded",
   },
   "aria-roles": {
     "status": "included",
@@ -296,8 +297,7 @@ exports[`getRuleInclusions getRuleInclusions matches snapshotted list of product
     "status": "excluded",
   },
   "scrollable-region-focusable": {
-    "reason": "only reports to needs-review results due to potential false-positives",
-    "status": "excluded",
+    "status": "included",
   },
   "select-name": {
     "status": "included",

yarn.lock

@@ -2750,7 +2750,7 @@ __metadata:
   resolution: "accessibility-insights-report@workspace:packages/report"
   dependencies:
     "@fluentui/react": ^8.96.1
-    axe-core: 4.6.3
+    axe-core: 4.7.2
     classnames: ^2.3.2
     lodash: ^4.17.21
     luxon: ^3.3.0
@@ -2766,7 +2766,7 @@ __metadata:
   resolution: "accessibility-insights-ui@workspace:packages/ui"
   dependencies:
     "@fluentui/react": ^8.96.1
-    axe-core: 4.6.3
+    axe-core: 4.7.2
     classnames: ^2.3.2
     lodash: ^4.17.21
     luxon: ^3.3.0
@@ -2806,7 +2806,7 @@ __metadata:
     "@typescript-eslint/eslint-plugin": ^5.61.0
     "@typescript-eslint/parser": ^6.2.1
     ajv: ^8.12.0
-    axe-core: 4.6.3
+    axe-core: 4.7.2
     case-sensitive-paths-webpack-plugin: ^2.4.0
     classnames: ^2.3.2
     codecov: ^3.8.3
@@ -3304,10 +3304,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"axe-core@npm:4.6.3":
-  version: 4.6.3
-  resolution: "axe-core@npm:4.6.3"
-  checksum: d0c46be92b9707c48b88a53cd5f471b155a2bfc8bf6beffb514ecd14e30b4863e340b5fc4f496d82a3c562048088c1f3ff5b93b9b3b026cb9c3bfacfd535da10
+"axe-core@npm:4.7.2":
+  version: 4.7.2
+  resolution: "axe-core@npm:4.7.2"
+  checksum: 5d86fa0f45213b0e54cbb5d713ce885c4a8fe3a72b92dd915a47aa396d6fd149c4a87fec53aa978511f6d941402256cfeb26f2db35129e370f25a453c688655a
   languageName: node
   linkType: hard