From 165b933d8d3af714ae2db121bdfe1738366cdebe Mon Sep 17 00:00:00 2001 From: Bill Dengler Date: Tue, 1 Aug 2023 10:36:08 -0700 Subject: [PATCH] feat(axe-core-4.7): Bump axe.core version to 4.7.2, exclude aria-roledescription, and promote scrollable-region-focusable (#6849) This commit updates axe-core to its latest version, 4.7.2, from 4.6.3. It also bumps the accessibility-insights-report package version. As part of the axe-core update: * The `aria-roledescription` rule has been deprecated (dequelabs/axe-core#3649). * `scrollable-region-focusable` axe-core rule failures have been promoted from "needs review" to "serious" (manually removed from explicit "needs review" but included automatically by axe-core), see dequelabs/axe-core#3862 and dequelabs/axe-core#3939. * `falsePositiveRemoval` introduced in ed75fda has been removed as the corresponding dequelabs/axe-core#3850 has been resolved. Part of Feature 2086120 (internal access required to view). --- package.json | 2 +- packages/report/package.json | 4 +-- packages/ui/package.json | 2 +- .../load-assessment-data-schema-provider.ts | 2 +- .../cards/rich-resolution-content.tsx | 8 ----- src/scanner/get-rule-inclusions.ts | 5 --- src/tests/common/false-positive-violations.ts | 35 ------------------- .../common/scan-for-accessibility-issues.ts | 2 -- .../__snapshots__/launchpad.test.ts.snap | 4 +-- ...ad-assessment-data-schema-provider.test.ts | 4 +-- .../rich-resolution-content.test.tsx.snap | 6 ---- .../cards/rich-resolution-content.test.tsx | 1 - .../unit/tests/common/self-fast-pass.test.ts | 1 - .../get-rule-inclusions.test.ts.snap | 6 ++-- yarn.lock | 14 ++++---- 15 files changed, 19 insertions(+), 77 deletions(-) delete mode 100644 src/tests/common/false-positive-violations.ts diff --git a/package.json b/package.json index 0825747a1ef..94f10c6ca7d 100644 --- a/package.json +++ b/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", diff --git a/packages/report/package.json b/packages/report/package.json index ef48dc1cced..004d8233307 100644 --- a/packages/report/package.json +++ b/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", diff --git a/packages/ui/package.json b/packages/ui/package.json index c93703d7bd4..722e61cc4a1 100644 --- a/packages/ui/package.json +++ b/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", diff --git a/src/DetailsView/components/load-assessment-data-schema-provider.ts b/src/DetailsView/components/load-assessment-data-schema-provider.ts index d23ef7a008a..9f0e6f20f96 100644 --- a/src/DetailsView/components/load-assessment-data-schema-provider.ts +++ b/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) { diff --git a/src/common/components/cards/rich-resolution-content.tsx b/src/common/components/cards/rich-resolution-content.tsx index 4ac98fe6e05..aa2fcb4af6b 100644 --- a/src/common/components/cards/rich-resolution-content.tsx +++ b/src/common/components/cards/rich-resolution-content.tsx @@ -80,14 +80,6 @@ export const RichResolutionContent = NamedFC( ); } - case 'web/scrollable-region-focusable': { - return ( - - Examine the element and ensure that, if there is scrollable content, the - elements are accessible by keyboard. - - ); - } case 'web/label-content-name-mismatch': { return ( diff --git a/src/scanner/get-rule-inclusions.ts b/src/scanner/get-rule-inclusions.ts index 2de97d1769e..7eedc7af57d 100644 --- a/src/scanner/get-rule-inclusions.ts +++ b/src/scanner/get-rule-inclusions.ts @@ -47,10 +47,6 @@ export const explicitRuleOverrides: DictionaryStringTo = { 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 @@ -58,7 +54,6 @@ export const needsReviewRules = [ 'aria-input-field-name', 'color-contrast', 'th-has-data-cells', - 'scrollable-region-focusable', 'label-content-name-mismatch', 'p-as-heading', ]; diff --git a/src/tests/common/false-positive-violations.ts b/src/tests/common/false-positive-violations.ts deleted file mode 100644 index 1976b4cb6b8..00000000000 --- a/src/tests/common/false-positive-violations.ts +++ /dev/null @@ -1,35 +0,0 @@ -// Copyright (c) Microsoft Corporation. All rights reserved. -// Licensed under the MIT License. -import { Result } from 'axe-core'; -import { AxeInfo } from '../../common/axe-info'; - -const axeInfo = AxeInfo.Default; - -// this is a method to remove violations tied to rules with known false-positives and was introduced -// Jan 25 2023 to remove aria-required-children failures introduced by axe-core 4.6.1 -// we should keep this in until Deque introduces the fix for the issues tracked here -// https://github.com/dequelabs/axe-core/issues/3850 -// the axe-core bug causes a failure for the FluentUI v8 DetailsList component -// The FluentUI tracking issue can be found here: -// https://github.com/microsoft/fluentui/issues/26330 -export function falsePositiveRemoval(violations: Result[]): Result[] { - // Re-evaluate if the false positive is still present in future axe-core versions - if (axeInfo.version !== '4.6.3') { - throw new Error('Axe Core version has changed. Please check if this is still needed'); - } - let newViolations = violations.map(function (violation) { - if (violation.id === 'aria-required-children') { - const newNodes = violation.nodes.filter( - node => - !( - node.html.includes('ms-DetailsHeader') || - node.html.includes('ms-DetailsRow') - ), - ); - violation.nodes = newNodes; - } - return violation; - }); - newViolations = newViolations.filter(violation => violation.nodes.length > 0); - return newViolations; -} diff --git a/src/tests/end-to-end/common/scan-for-accessibility-issues.ts b/src/tests/end-to-end/common/scan-for-accessibility-issues.ts index 4cd5f8eaa38..e89ef0739e1 100644 --- a/src/tests/end-to-end/common/scan-for-accessibility-issues.ts +++ b/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); } 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 index be4c717b823..dd0f3d41fb9 100644 --- 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 @@ -247,7 +247,7 @@ exports[`Popup -> Launch Pad content should match snapshot when quick assess fea Navigate to axe-core npm page - 4.6.3 + 4.7.2 @@ -545,7 +545,7 @@ exports[`Popup -> Launch Pad content should match snapshot when quick assess fea Navigate to axe-core npm page - 4.6.3 + 4.7.2 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 index 5d9ed219554..5bd2102a66c 100644 --- 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 @@ -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'], 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 index da6da4ee8b4..0b06adafff2 100644 --- 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 @@ -84,12 +84,6 @@ exports[`RichResolutionContent renders static content with id=web/p-as-heading 1 `; -exports[`RichResolutionContent renders static content with id=web/scrollable-region-focusable 1`] = ` - - Examine the element and ensure that, if there is scrollable content, the elements are accessible by keyboard. - -`; - exports[`RichResolutionContent renders static content with id=web/th-has-data-cells 1`] = `
Examine the header cell in the context of the table to verify that it has no data cells. 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 index f2976ef9a70..2569a0bf7e4 100644 --- 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 @@ -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 => { diff --git a/src/tests/unit/tests/common/self-fast-pass.test.ts b/src/tests/unit/tests/common/self-fast-pass.test.ts index f73f8d45054..38270506942 100644 --- a/src/tests/unit/tests/common/self-fast-pass.test.ts +++ b/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', ], 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 index a4a5258bd53..432906d8bfb 100644 --- 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 @@ -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", diff --git a/yarn.lock b/yarn.lock index e1ac5178b1a..cdd59b0efaf 100644 --- a/yarn.lock +++ b/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