Skip to content

Commit

Permalink
Merge branch 'main' into byte-efficiency-savings
Browse files Browse the repository at this point in the history
  • Loading branch information
adamraine authored Jul 5, 2023
2 parents f97bf07 + 9e2f70e commit 2551675
Show file tree
Hide file tree
Showing 36 changed files with 1,961 additions and 357 deletions.
35 changes: 31 additions & 4 deletions cli/test/fixtures/a11y/a11y_tester.html
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,14 @@
aria-checked="true">
</div>
</section>
<p>aria-command-name</p>
<section>
<div id="aria-command-name" role="button"></div>
</section>
<p>aria-dialog-name</p>
<section>
<div role="alertdialog" id="aria-dialog-name" aria-label=""></div>
</section>
<p>aria-hidden-focus</p>
<section>
<div id="aria-hidden-focus" aria-hidden="true">
Expand All @@ -44,10 +52,6 @@
<div id="aria-treeitem-name" role="treeitem"></div>
</div>
</section>
<p>aria-command-name</p>
<section>
<div id="aria-command-name" role="button"></div>
</section>
<p>aria-tooltip-name</p>
<section>
<div id="aria-tooltip-name" role="tooltip"></div>
Expand Down Expand Up @@ -84,6 +88,12 @@
<section>
<div role="foo"></div>
</section>
<p>aria-text</p>
<section>
<span role="text" id="aria-text">
<a href="google.com">Not announced</a>
</span>
</section>
<p>aria-valid-attr</p>
<section>
<div
Expand Down Expand Up @@ -180,6 +190,19 @@ <h3>sub-sub-header</h3>
<table id="layout-table">
</table>
</section>
<p>link-in-text-block</p>
<section>
<p>
paragraph text
<a
style="text-decoration: none; color: blue"
href="#"
id="link-in-text-block">
link text
</a>
paragraph text
</p>
</section>
<p>link-name</p>
<section>
<a id="link-name" href="google.com"></a>
Expand All @@ -198,6 +221,10 @@ <h3>sub-sub-header</h3>
<section>
<object id="object-alt" data="data:text/html,data"></object>
</section>
<p>select-name</p>
<section>
<select id="select-name"></select>
</section>
<p>tabindex</p>
<section>
<div
Expand Down
132 changes: 100 additions & 32 deletions cli/test/smokehouse/test-definitions/a11y.js
Original file line number Diff line number Diff line change
Expand Up @@ -42,6 +42,46 @@ const expectations = {
],
},
},
'aria-command-name': {
score: 0,
details: {
items: [
{
node: {
'type': 'node',
'boundingRect': {
'width': '>0',
'height': 0,
},
'selector': 'body > section > div#aria-command-name',
'snippet': '<div id="aria-command-name" role="button">',
'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-command-name',
},
},
],
},
},
'aria-dialog-name': {
score: 0,
details: {
items: [
{
node: {
'type': 'node',
'boundingRect': {
'width': '>0',
'height': 0,
},
'selector': 'body > section > div#aria-dialog-name',
'snippet': '<div role="alertdialog" id="aria-dialog-name" aria-label="">',
'explanation': 'Fix any of the following:\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-dialog-name',
},
},
],
},
},
'aria-hidden-body': {
score: 1,
details: {
Expand Down Expand Up @@ -150,26 +190,6 @@ const expectations = {
],
},
},
'aria-command-name': {
score: 0,
details: {
items: [
{
node: {
'type': 'node',
'boundingRect': {
'width': '>0',
'height': 0,
},
'selector': 'body > section > div#aria-command-name',
'snippet': '<div id="aria-command-name" role="button">',
'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-command-name',
},
},
],
},
},
'aria-tooltip-name': {
score: 0,
details: {
Expand Down Expand Up @@ -238,6 +258,22 @@ const expectations = {
],
},
},
'aria-text': {
score: 0,
details: {
items: [
{
node: {
'type': 'node',
'selector': 'body > section > span#aria-text',
'snippet': '<span role="text" id="aria-text">',
'explanation': 'Fix any of the following:\n Element has focusable descendants',
'nodeLabel': 'Not announced',
},
},
],
},
},
'aria-toggle-field-name': {
score: 0,
details: {
Expand All @@ -246,7 +282,7 @@ const expectations = {
node: {
'type': 'node',
'selector': 'body > section > div#aria-required-attr',
'path': '2,HTML,1,BODY,19,SECTION,0,DIV',
'path': '2,HTML,1,BODY,21,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 @@ -256,7 +292,7 @@ const expectations = {
node: {
'type': 'node',
'selector': 'body > section > div > div#aria-required-parent',
'path': '2,HTML,1,BODY,23,SECTION,0,DIV,0,DIV',
'path': '2,HTML,1,BODY,25,SECTION,0,DIV,0,DIV',
'snippet': '<div id="aria-required-parent" role="option">',
'nodeLabel': 'body > section > div > div#aria-required-parent',
},
Expand All @@ -265,7 +301,7 @@ const expectations = {
node: {
'type': 'node',
'selector': 'body > section > div#aria-valid-attr',
'path': '2,HTML,1,BODY,27,SECTION,0,DIV',
'path': '2,HTML,1,BODY,31,SECTION,0,DIV',
'snippet': '<div id="aria-valid-attr" role="checkbox" aria-chked="true">',
'nodeLabel': 'body > section > div#aria-valid-attr',
},
Expand All @@ -274,7 +310,7 @@ const expectations = {
node: {
'type': 'node',
'selector': 'body > section > div#aria-valid-attr-value',
'path': '2,HTML,1,BODY,29,SECTION,0,DIV',
'path': '2,HTML,1,BODY,33,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 @@ -408,7 +444,7 @@ const expectations = {
node: {
'type': 'node',
'selector': 'body > section > textarea#duplicate-id-active',
'path': '2,HTML,1,BODY,39,SECTION,0,TEXTAREA',
'path': '2,HTML,1,BODY,43,SECTION,0,TEXTAREA',
'snippet': '<textarea id="duplicate-id-active" aria-label="text1">',
'explanation': 'Fix any of the following:\n Document has active elements with the same id attribute: duplicate-id-active',
'nodeLabel': 'text1',
Expand All @@ -419,7 +455,7 @@ const expectations = {
{
relatedNode: {
'type': 'node',
'path': '2,HTML,1,BODY,39,SECTION,1,TEXTAREA',
'path': '2,HTML,1,BODY,43,SECTION,1,TEXTAREA',
'selector': 'body > section > textarea#duplicate-id-active',
'snippet': '<textarea id="duplicate-id-active" aria-label="text2">',
'nodeLabel': 'text2',
Expand All @@ -439,7 +475,7 @@ const expectations = {
node: {
'type': 'node',
'selector': 'body > section > div#duplicate-id-aria',
'path': '2,HTML,1,BODY,41,SECTION,0,DIV',
'path': '2,HTML,1,BODY,45,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 @@ -450,7 +486,7 @@ const expectations = {
{
relatedNode: {
'type': 'node',
'path': '2,HTML,1,BODY,41,SECTION,0,DIV,0,DIV',
'path': '2,HTML,1,BODY,45,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 All @@ -471,7 +507,7 @@ const expectations = {
node: {
'type': 'node',
'selector': 'body > section > input#form-field-multiple-labels',
'path': '2,HTML,1,BODY,43,SECTION,2,INPUT',
'path': '2,HTML,1,BODY,47,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 @@ -482,7 +518,7 @@ const expectations = {
{
relatedNode: {
'type': 'node',
'path': '2,HTML,1,BODY,43,SECTION,0,LABEL',
'path': '2,HTML,1,BODY,47,SECTION,0,LABEL',
'selector': 'body > section > label#label1',
'snippet': '<label for="form-field-multiple-labels" id="label1">',
'nodeLabel': 'label1',
Expand All @@ -491,7 +527,7 @@ const expectations = {
{
relatedNode: {
'type': 'node',
'path': '2,HTML,1,BODY,43,SECTION,1,LABEL',
'path': '2,HTML,1,BODY,47,SECTION,1,LABEL',
'selector': 'body > section > label',
'snippet': '<label for="form-field-multiple-labels">',
'nodeLabel': 'label2',
Expand Down Expand Up @@ -527,7 +563,7 @@ const expectations = {
node: {
'type': 'node',
'selector': 'body > section > h3',
'path': '2,HTML,1,BODY,47,SECTION,1,H3',
'path': '2,HTML,1,BODY,51,SECTION,1,H3',
'snippet': '<h3>',
'explanation': 'Fix any of the following:\n Heading order invalid',
'nodeLabel': 'sub-sub-header',
Expand Down Expand Up @@ -622,6 +658,22 @@ const expectations = {
// ],
// },
// },
'link-in-text-block': {
score: 0,
details: {
items: [
{
node: {
'type': 'node',
'selector': 'body > section > p > a#link-in-text-block',
'snippet': '<a style="text-decoration: none; color: blue" href="#" id="link-in-text-block">',
'explanation': 'Fix any of the following:\n The link has insufficient color contrast of 2.44:1 with the surrounding text. (Minimum contrast is 3:1, link text: #0000ff, surrounding text: #000000)\n The link has no styling (such as underline) to distinguish it from the surrounding text',
'nodeLabel': 'link text ',
},
},
],
},
},
'link-name': {
score: 0,
details: {
Expand Down Expand Up @@ -702,6 +754,22 @@ const expectations = {
],
},
},
'select-name': {
score: 0,
details: {
items: [
{
node: {
'type': 'node',
'selector': 'body > section > select#select-name',
'snippet': '<select id="select-name">',
'explanation': 'Fix any of the following:\n Form element does not have an implicit (wrapped) <label>\n Form element does not have an explicit <label>\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\n Element\'s default semantics were not overridden with role="none" or role="presentation"',
'nodeLabel': 'body > section > select#select-name',
},
},
],
},
},
'tabindex': {
score: 0,
details: {
Expand Down
4 changes: 2 additions & 2 deletions cli/test/smokehouse/test-definitions/perf-preload.js
Original file line number Diff line number Diff line change
Expand Up @@ -92,8 +92,8 @@ const expectations = {
score: '>=0.90', // primarily just making sure it didn't fail/go crazy, specific value isn't that important
},
'server-response-time': {
// Can be flaky, so test float numericValue instead of binary score
numericValue: '<1000',
// Assert greater than 0 but not more than 1000.
numericValue: '500 +/- 499.99',
},
'network-requests': {
details: {
Expand Down
45 changes: 45 additions & 0 deletions core/audits/accessibility/aria-dialog-name.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,45 @@
/**
* @license Copyright 2023 The Lighthouse Authors. All Rights Reserved.
* Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0
* Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.
*/

/**
* @fileoverview Ensures every ARIA dialog element has a discernable, accessible name.
* 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 evaluates if ARIA dialog elements have an accessible name. This title is descriptive of the successful state and is shown to users when no user action is required. */
title: 'Elements with `role="dialog"` or `role="alertdialog"` have accessible names.',
/** Title of an accessibility audit that evaluates if ARIA dialog elements do not have accessible names. 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 with `role="dialog"` or `role="alertdialog"` do not have accessible ' +
'names.',
/** Description of a Lighthouse audit that tells the user *why* they should have accessible names for ARIA dialog elements. 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: 'ARIA dialog elements without accessible names may prevent screen readers users ' +
'from discerning the purpose of these elements. ' +
'[Learn how to make ARIA dialog elements more accessible](https://dequeuniversity.com/rules/axe/4.7/aria-dialog-name).',
};

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

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

export default AriaDialogName;
export {UIStrings};
Loading

0 comments on commit 2551675

Please sign in to comment.