Skip to content

Commit

Permalink
new_audit: add new checks from axe-core 4.8 (#15963)
Browse files Browse the repository at this point in the history
  • Loading branch information
adamraine authored Apr 18, 2024
1 parent a387680 commit 52bc008
Show file tree
Hide file tree
Showing 16 changed files with 908 additions and 311 deletions.
12 changes: 12 additions & 0 deletions cli/test/fixtures/a11y/a11y_tester.html
Original file line number Diff line number Diff line change
Expand Up @@ -36,10 +36,18 @@
<section>
<div id="aria-command-name" role="button"></div>
</section>
<p>aria-conditional-attr</p>
<section>
<input id="aria-conditional-attr" type="checkbox" aria-checked="true">
</section>
<p>aria-dialog-name</p>
<section>
<div role="alertdialog" id="aria-dialog-name" aria-label=""></div>
</section>
<p>aria-deprecated-role</p>
<section>
<div role="directory" id="aria-deprecated-role"></div>
</section>
<p>aria-hidden-focus</p>
<section>
<div id="aria-hidden-focus" aria-hidden="true">
Expand Down Expand Up @@ -68,6 +76,10 @@
<section>
<div id="aria-progressbar-name" role="progressbar">text-in-a-box</div>
</section>
<p>aria-prohibited-attr</p>
<section>
<div id="aria-prohibited-attr" role="presentation" aria-label="Label"></div>
</section>
<p>aria-required-attr</p>
<section>
<div
Expand Down
58 changes: 48 additions & 10 deletions cli/test/smokehouse/test-definitions/a11y.js
Original file line number Diff line number Diff line change
Expand Up @@ -78,6 +78,22 @@ const expectations = {
],
},
},
'aria-conditional-attr': {
score: 0,
details: {
items: [
{
node: {
'type': 'node',
'selector': 'body > section > input#aria-conditional-attr',
'snippet': '<input id="aria-conditional-attr" type="checkbox" aria-checked="true">',
'nodeLabel': 'body > section > input#aria-conditional-attr',
'explanation': 'Fix all of the following:\n Remove aria-checked, or set it to "false" to match the real checkbox state',
},
},
],
},
},
'aria-dialog-name': {
score: 0,
details: {
Expand All @@ -98,6 +114,22 @@ const expectations = {
],
},
},
'aria-deprecated-role': {
score: 0,
details: {
items: [
{
node: {
'type': 'node',
'selector': 'body > section > div#aria-deprecated-role',
'snippet': '<div role="directory" id="aria-deprecated-role">',
'nodeLabel': 'body > section > div#aria-deprecated-role',
'explanation': 'Fix all of the following:\n The role used is deprecated: directory',
},
},
],
},
},
'aria-hidden-body': {
score: 1,
details: {
Expand Down Expand Up @@ -186,6 +218,22 @@ const expectations = {
],
},
},
'aria-prohibited-attr': {
score: 0,
details: {
items: [
{
node: {
'type': 'node',
'selector': 'body > section > div#aria-prohibited-attr',
'snippet': '<div id="aria-prohibited-attr" role="presentation" aria-label="Label">',
'nodeLabel': 'Label',
'explanation': 'Fix all of the following:\n aria-label attribute cannot be used with role "null".',
},
},
],
},
},
'aria-treeitem-name': {
score: 0,
details: {
Expand Down Expand Up @@ -298,7 +346,6 @@ const expectations = {
node: {
'type': 'node',
'selector': 'body > section > div#aria-required-attr',
'path': '2,HTML,1,BODY,25,SECTION,0,DIV',
'snippet': '<div id="aria-required-attr" role="checkbox">',
'explanation': 'Fix any of the following:\n Element does not have text that is visible to screen readers\n aria-label attribute does not exist or is empty\n aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty\n Element has no title attribute',
'nodeLabel': 'body > section > div#aria-required-attr',
Expand All @@ -308,7 +355,6 @@ const expectations = {
node: {
'type': 'node',
'selector': 'body > section > div > div#aria-required-parent',
'path': '2,HTML,1,BODY,29,SECTION,0,DIV,0,DIV',
'snippet': '<div id="aria-required-parent" role="option">',
'nodeLabel': 'body > section > div > div#aria-required-parent',
},
Expand All @@ -317,7 +363,6 @@ const expectations = {
node: {
'type': 'node',
'selector': 'body > section > div#aria-valid-attr',
'path': '2,HTML,1,BODY,35,SECTION,0,DIV',
'snippet': '<div id="aria-valid-attr" role="checkbox" aria-chked="true">',
'nodeLabel': 'body > section > div#aria-valid-attr',
},
Expand All @@ -326,7 +371,6 @@ const expectations = {
node: {
'type': 'node',
'selector': 'body > section > div#aria-valid-attr-value',
'path': '2,HTML,1,BODY,37,SECTION,0,DIV',
'snippet': '<div id="aria-valid-attr-value" role="checkbox" aria-checked="0">',
'nodeLabel': 'body > section > div#aria-valid-attr-value',
},
Expand Down Expand Up @@ -460,7 +504,6 @@ const expectations = {
node: {
'type': 'node',
'selector': 'body > section > div#duplicate-id-aria',
'path': '2,HTML,1,BODY,47,SECTION,0,DIV',
'snippet': '<div id="duplicate-id-aria" class="duplicate-id-aria">',
'explanation': 'Fix any of the following:\n Document has multiple elements referenced with ARIA with the same id attribute: duplicate-id-aria',
'nodeLabel': 'body > section > div#duplicate-id-aria',
Expand All @@ -471,7 +514,6 @@ const expectations = {
{
relatedNode: {
'type': 'node',
'path': '2,HTML,1,BODY,47,SECTION,0,DIV,0,DIV',
'selector': 'body > section > div#duplicate-id-aria > div#duplicate-id-aria',
'snippet': '<div id="duplicate-id-aria">',
'nodeLabel': 'body > section > div#duplicate-id-aria > div#duplicate-id-aria',
Expand Down Expand Up @@ -508,7 +550,6 @@ const expectations = {
node: {
'type': 'node',
'selector': 'body > section > input#form-field-multiple-labels',
'path': '2,HTML,1,BODY,51,SECTION,2,INPUT',
'snippet': '<input type="checkbox" id="form-field-multiple-labels">',
'explanation': 'Fix all of the following:\n Multiple label elements is not widely supported in assistive technologies. Ensure the first label contains all necessary information.',
'nodeLabel': 'body > section > input#form-field-multiple-labels',
Expand All @@ -519,7 +560,6 @@ const expectations = {
{
relatedNode: {
'type': 'node',
'path': '2,HTML,1,BODY,51,SECTION,0,LABEL',
'selector': 'body > section > label#label1',
'snippet': '<label for="form-field-multiple-labels" id="label1">',
'nodeLabel': 'label1',
Expand All @@ -528,7 +568,6 @@ const expectations = {
{
relatedNode: {
'type': 'node',
'path': '2,HTML,1,BODY,51,SECTION,1,LABEL',
'selector': 'body > section > label',
'snippet': '<label for="form-field-multiple-labels">',
'nodeLabel': 'label2',
Expand Down Expand Up @@ -564,7 +603,6 @@ const expectations = {
node: {
'type': 'node',
'selector': 'body > section > h3',
'path': '2,HTML,1,BODY,55,SECTION,1,H3',
'snippet': '<h3>',
'explanation': 'Fix any of the following:\n Heading order invalid',
'nodeLabel': 'sub-sub-header',
Expand Down
43 changes: 43 additions & 0 deletions core/audits/accessibility/aria-conditional-attr.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,43 @@
/**
* @license
* Copyright 2024 Google LLC
* SPDX-License-Identifier: Apache-2.0
*/

/**
* @fileoverview Ensures that ARIA attributes are used as specified for element roles.
* See base class in axe-audit.js for audit() implementation.
*/

import AxeAudit from './axe-audit.js';
import * as i18n from '../../lib/i18n/i18n.js';

const UIStrings = {
/** Title of an accessibility audit that checks if ARIA attributes are used as specified for element roles. This title is descriptive of the successful state and is shown to users when no user action is required. */
title: 'ARIA attributes are used as specified for the element\'s role',
/** Title of an accessibility audit that checks if ARIA attributes are used as specified for element roles. This title is descriptive of the failing state and is shown to users when there is a failure that needs to be addressed. */
failureTitle: 'ARIA attributes are not used as specified for the element\'s role',
/** Description of a Lighthouse audit that tells the user *why* they should try to pass. This is displayed after a user expands the section to see more. No character length limits. The last sentence starting with 'Learn' becomes link text to additional documentation. */
description: 'Some ARIA attributes are only allowed on an element under certain conditions. ' +
'[Learn more about conditional ARIA attributes](https://dequeuniversity.com/rules/axe/4.9/aria-conditional-attr).',
};

const str_ = i18n.createIcuMessageFn(import.meta.url, UIStrings);

class AriaConditionalAttr extends AxeAudit {
/**
* @return {LH.Audit.Meta}
*/
static get meta() {
return {
id: 'aria-conditional-attr',
title: str_(UIStrings.title),
failureTitle: str_(UIStrings.failureTitle),
description: str_(UIStrings.description),
requiredArtifacts: ['Accessibility'],
};
}
}

export default AriaConditionalAttr;
export {UIStrings};
43 changes: 43 additions & 0 deletions core/audits/accessibility/aria-deprecated-role.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,43 @@
/**
* @license
* Copyright 2024 Google LLC
* SPDX-License-Identifier: Apache-2.0
*/

/**
* @fileoverview Ensures that deprecated ARIA roles are not used.
* See base class in axe-audit.js for audit() implementation.
*/

import AxeAudit from './axe-audit.js';
import * as i18n from '../../lib/i18n/i18n.js';

const UIStrings = {
/** Title of an accessibility audit that checks if deprecated ARIA roles are used. This title is descriptive of the successful state and is shown to users when no user action is required. */
title: 'Deprecated ARIA roles were not used',
/** Title of an accessibility audit that checks if deprecated ARIA roles are used. This title is descriptive of the failing state and is shown to users when there is a failure that needs to be addressed. */
failureTitle: 'Deprecated ARIA roles were used',
/** Description of a Lighthouse audit that tells the user *why* they should try to pass. This is displayed after a user expands the section to see more. No character length limits. The last sentence starting with 'Learn' becomes link text to additional documentation. */
description: 'Deprecated ARIA roles may not be processed correctly by assistive technology. ' +
'[Learn more about deprecated ARIA roles](https://dequeuniversity.com/rules/axe/4.9/aria-deprecated-role).',
};

const str_ = i18n.createIcuMessageFn(import.meta.url, UIStrings);

class AriaDeprecatedRole extends AxeAudit {
/**
* @return {LH.Audit.Meta}
*/
static get meta() {
return {
id: 'aria-deprecated-role',
title: str_(UIStrings.title),
failureTitle: str_(UIStrings.failureTitle),
description: str_(UIStrings.description),
requiredArtifacts: ['Accessibility'],
};
}
}

export default AriaDeprecatedRole;
export {UIStrings};
44 changes: 44 additions & 0 deletions core/audits/accessibility/aria-prohibited-attr.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,44 @@
/**
* @license
* Copyright 2024 Google LLC
* SPDX-License-Identifier: Apache-2.0
*/

/**
* @fileoverview Ensures that deprecated ARIA roles are not used.
* See base class in axe-audit.js for audit() implementation.
*/

import AxeAudit from './axe-audit.js';
import * as i18n from '../../lib/i18n/i18n.js';

const UIStrings = {
/** Title of an accessibility audit that checks if elements use prohibited ARIA attributes. This title is descriptive of the successful state and is shown to users when no user action is required. */
title: 'Elements use only permitted ARIA attributes',
/** Title of an accessibility audit that checks if elements use prohibited ARIA attributes. This title is descriptive of the failing state and is shown to users when there is a failure that needs to be addressed. */
failureTitle: 'Elements use prohibited ARIA attributes',
/** Description of a Lighthouse audit that tells the user *why* they should try to pass. This is displayed after a user expands the section to see more. No character length limits. The last sentence starting with 'Learn' becomes link text to additional documentation. */
description: 'Using ARIA attributes in roles where they are prohibited can mean that important ' +
'information is not communicated to users of assistive technologies. ' +
'[Learn more about prohibited ARIA roles](https://dequeuniversity.com/rules/axe/4.9/aria-prohibited-attr).',
};

const str_ = i18n.createIcuMessageFn(import.meta.url, UIStrings);

class AriaProhibitedAttr extends AxeAudit {
/**
* @return {LH.Audit.Meta}
*/
static get meta() {
return {
id: 'aria-prohibited-attr',
title: str_(UIStrings.title),
failureTitle: str_(UIStrings.failureTitle),
description: str_(UIStrings.description),
requiredArtifacts: ['Accessibility'],
};
}
}

export default AriaProhibitedAttr;
export {UIStrings};
6 changes: 6 additions & 0 deletions core/config/default-config.js
Original file line number Diff line number Diff line change
Expand Up @@ -197,12 +197,15 @@ const defaultConfig = {
'accessibility/aria-allowed-attr',
'accessibility/aria-allowed-role',
'accessibility/aria-command-name',
'accessibility/aria-conditional-attr',
'accessibility/aria-deprecated-role',
'accessibility/aria-dialog-name',
'accessibility/aria-hidden-body',
'accessibility/aria-hidden-focus',
'accessibility/aria-input-field-name',
'accessibility/aria-meter-name',
'accessibility/aria-progressbar-name',
'accessibility/aria-prohibited-attr',
'accessibility/aria-required-attr',
'accessibility/aria-required-children',
'accessibility/aria-required-parent',
Expand Down Expand Up @@ -455,12 +458,15 @@ const defaultConfig = {
{id: 'aria-allowed-attr', weight: 10, group: 'a11y-aria'},
{id: 'aria-allowed-role', weight: 1, group: 'a11y-aria'},
{id: 'aria-command-name', weight: 7, group: 'a11y-aria'},
{id: 'aria-conditional-attr', weight: 7, group: 'a11y-aria'},
{id: 'aria-deprecated-role', weight: 1, group: 'a11y-aria'},
{id: 'aria-dialog-name', weight: 7, group: 'a11y-aria'},
{id: 'aria-hidden-body', weight: 10, group: 'a11y-aria'},
{id: 'aria-hidden-focus', weight: 7, group: 'a11y-aria'},
{id: 'aria-input-field-name', weight: 7, group: 'a11y-aria'},
{id: 'aria-meter-name', weight: 7, group: 'a11y-aria'},
{id: 'aria-progressbar-name', weight: 7, group: 'a11y-aria'},
{id: 'aria-prohibited-attr', weight: 7, group: 'a11y-aria'},
{id: 'aria-required-attr', weight: 10, group: 'a11y-aria'},
{id: 'aria-required-children', weight: 10, group: 'a11y-aria'},
{id: 'aria-required-parent', weight: 10, group: 'a11y-aria'},
Expand Down
6 changes: 3 additions & 3 deletions core/gather/gatherers/accessibility.js
Original file line number Diff line number Diff line change
Expand Up @@ -43,10 +43,10 @@ async function runA11yChecks() {
'area-alt': {enabled: false},
'aria-allowed-role': {enabled: true},
'aria-braille-equivalent': {enabled: false},
'aria-conditional-attr': {enabled: false},
'aria-deprecated-role': {enabled: false},
'aria-conditional-attr': {enabled: true},
'aria-deprecated-role': {enabled: true},
'aria-dialog-name': {enabled: true},
'aria-prohibited-attr': {enabled: false},
'aria-prohibited-attr': {enabled: true},
'aria-roledescription': {enabled: false},
'aria-treeitem-name': {enabled: true},
'aria-text': {enabled: true},
Expand Down
Loading

0 comments on commit 52bc008

Please sign in to comment.