WIP: core(axe): new audits empty-table-header, frame-focusable-content

lighthouse-cli/test/cli/__snapshots__/index-test.js.snap

@@ -222,6 +222,9 @@ Object {
     Object {
       "path": "accessibility/aria-roles",
     },
+    Object {
+      "path": "accessibility/aria-text",
+    },
     Object {
       "path": "accessibility/aria-toggle-field-name",
     },
@@ -261,9 +264,15 @@ Object {
     Object {
       "path": "accessibility/duplicate-id-aria",
     },
+    Object {
+      "path": "accessibility/empty-table-header",
+    },
     Object {
       "path": "accessibility/form-field-multiple-labels",
     },
+    Object {
+      "path": "accessibility/frame-focusable-content",
+    },
     Object {
       "path": "accessibility/frame-title",
     },
@@ -300,6 +309,9 @@ Object {
     Object {
       "path": "accessibility/meta-viewport",
     },
+    Object {
+      "path": "accessibility/nested-interactive",
+    },
     Object {
       "path": "accessibility/object-alt",
     },
@@ -535,6 +547,11 @@ Object {
           "id": "aria-roles",
           "weight": 10,
         },
+        Object {
+          "group": "a11y-navigation",
+          "id": "aria-text",
+          "weight": 0,
+        },
         Object {
           "group": "a11y-aria",
           "id": "aria-toggle-field-name",
@@ -600,11 +617,21 @@ Object {
           "id": "duplicate-id-aria",
           "weight": 10,
         },
+        Object {
+          "group": "a11y-tables-lists",
+          "id": "empty-table-header",
+          "weight": 0,
+        },
         Object {
           "group": "a11y-names-labels",
           "id": "form-field-multiple-labels",
           "weight": 2,
         },
+        Object {
+          "group": "a11y-best-practices",
+          "id": "frame-focusable-content",
+          "weight": 0,
+        },
         Object {
           "group": "a11y-names-labels",
           "id": "frame-title",
@@ -665,6 +692,11 @@ Object {
           "id": "meta-viewport",
           "weight": 10,
         },
+        Object {
+          "group": "a11y-navigation",
+          "id": "nested-interactive",
+          "weight": 0,
+        },
         Object {
           "group": "a11y-names-labels",
           "id": "object-alt",

lighthouse-cli/test/fixtures/dobetterweb/dbw_tester.html

@@ -225,6 +225,21 @@ <h2>Do better web tester page</h2>
 <button class="small-button">Do something</button>
 <button class="small-button">Do something else</button>
 
+<!-- FAIL - frame-focusable-content -->
+<iframe tabindex="-1" src="focusable-iframe.html"></iframe>
+<!-- FAIL - nested-interactive -->
+<button><span tabindex="0">fail</span></button>
+<!-- FAIL - empty-table-header -->
+<table>
+  <tr>
+    <th></th>
+  </tr>
+</table>
+<!-- FAIL - aria-text -->
+<div role="text">
+  Still an <a href="#">interactive link</a> because of the author error.
+</div>
+
 <!-- Some websites overwrite the original Error object. The captureJSCallUsage function
   relies on the native Error object and prepareStackTrace from V8. When overwriting the stack
   property the e.stack inside the gatherer won't be in the correct format

lighthouse-cli/test/fixtures/dobetterweb/focusable-iframe.html

@@ -0,0 +1 @@
+<a href='/'>Home</a>

lighthouse-core/audits/accessibility/aria-text.js

@@ -0,0 +1,44 @@
+/**
+ * @license Copyright 2021 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.
+ */
+'use strict';
+
+/**
+ * @fileoverview Ensures `role=text` is used on elements with no focusable descendants.
+ * See base class in axe-audit.js for audit() implementation.
+ */
+
+const AxeAudit = require('./axe-audit.js');
+const i18n = require('../../lib/i18n/i18n.js');
+
+const UIStrings = {
+  /** Title of an accesibility audit that checks if there are any elements with `role=text` that have focusable descendants. This title is descriptive of the successful state and is shown to users when no user action is required. */
+  title: 'Ensures `role=text` is only used on elements with no focusable descendants',
+  /** Title of an accesibility audit that checks if there are any elements with `role=text` that have focusable descendants. This title is descriptive of the failing state and is shown to users when there is a failure that needs to be addressed. */
+  failureTitle: '`role=text` elements should not have focusable descendants',
+  // TODO: need web.dev article.
+  /** 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. 'Learn More' becomes link text to additional documentation. */
+  description: 'Browsers may ignore `role=text` if it contains focusable descendants.',
+};
+
+const str_ = i18n.createMessageInstanceIdFn(__filename, UIStrings);
+
+class AriaText extends AxeAudit {
+  /**
+   * @return {LH.Audit.Meta}
+   */
+  static get meta() {
+    return {
+      id: 'aria-text',
+      title: str_(UIStrings.title),
+      failureTitle: str_(UIStrings.failureTitle),
+      description: str_(UIStrings.description),
+      requiredArtifacts: ['Accessibility'],
+    };
+  }
+}
+
+module.exports = AriaText;
+module.exports.UIStrings = UIStrings;

lighthouse-core/audits/accessibility/empty-table-header.js

@@ -0,0 +1,44 @@
+/**
+ * @license Copyright 2021 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.
+ */
+'use strict';
+
+/**
+ * @fileoverview Ensures table headers have discernible text.
+ * See base class in axe-audit.js for audit() implementation.
+ */
+
+const AxeAudit = require('./axe-audit.js');
+const i18n = require('../../lib/i18n/i18n.js');
+
+const UIStrings = {
+  /** Title of an accesibility audit that checks if there are any duplicate ARIA IDs on the page. This title is descriptive of the successful state and is shown to users when no user action is required. */
+  title: 'Ensures table headers have discernible text',
+  /** Title of an accesibility audit that checks if there are any duplicate ARIA IDs on the page. This title is descriptive of the failing state and is shown to users when there is a failure that needs to be addressed. */
+  failureTitle: 'Table header text must not be empty',
+  // TODO: need web.dev article.
+  /** 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. 'Learn More' becomes link text to additional documentation. */
+  description: 'Table headers should have discernible text.',
+};
+
+const str_ = i18n.createMessageInstanceIdFn(__filename, UIStrings);
+
+class EmptyTableHeader extends AxeAudit {
+  /**
+   * @return {LH.Audit.Meta}
+   */
+  static get meta() {
+    return {
+      id: 'empty-table-header',
+      title: str_(UIStrings.title),
+      failureTitle: str_(UIStrings.failureTitle),
+      description: str_(UIStrings.description),
+      requiredArtifacts: ['Accessibility'],
+    };
+  }
+}
+
+module.exports = EmptyTableHeader;
+module.exports.UIStrings = UIStrings;

lighthouse-core/audits/accessibility/frame-focusable-content.js

@@ -0,0 +1,44 @@
+/**
+ * @license Copyright 2021 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.
+ */
+'use strict';
+
+/**
+ * @fileoverview No `<iframe tabindex=-1>` has focusable content.
+ * See base class in axe-audit.js for audit() implementation.
+ */
+
+const AxeAudit = require('./axe-audit.js');
+const i18n = require('../../lib/i18n/i18n.js');
+
+const UIStrings = {
+  /** Title of an accesibility audit that checks if there are any iframes with focusable content that mistakently set tabindex=1. This title is descriptive of the successful state and is shown to users when no user action is required. */
+  title: 'No `<iframe tabindex=-1>` has focusable content',
+  /** Title of an accesibility audit that checks if there are any iframes with focusable content that mistakently set tabindex=1. This title is descriptive of the failing state and is shown to users when there is a failure that needs to be addressed. */
+  failureTitle: '`<iframe tabindex=-1>` has focusable content',
+  // TODO: need web.dev article.
+  /** 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. 'Learn More' becomes link text to additional documentation. */
+  description: '`<iframe>` should only have `tabindex=1` if there it contains no focusable elements.',
+};
+
+const str_ = i18n.createMessageInstanceIdFn(__filename, UIStrings);
+
+class FrameFocusableContent extends AxeAudit {
+  /**
+   * @return {LH.Audit.Meta}
+   */
+  static get meta() {
+    return {
+      id: 'frame-focusable-content',
+      title: str_(UIStrings.title),
+      failureTitle: str_(UIStrings.failureTitle),
+      description: str_(UIStrings.description),
+      requiredArtifacts: ['Accessibility'],
+    };
+  }
+}
+
+module.exports = FrameFocusableContent;
+module.exports.UIStrings = UIStrings;

lighthouse-core/audits/accessibility/nested-interactive.js

@@ -0,0 +1,44 @@
+/**
+ * @license Copyright 2021 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.
+ */
+'use strict';
+
+/**
+ * @fileoverview Ensure interactive controls are not nested.
+ * See base class in axe-audit.js for audit() implementation.
+ */
+
+const AxeAudit = require('./axe-audit.js');
+const i18n = require('../../lib/i18n/i18n.js');
+
+const UIStrings = {
+  /** Title of an accesibility audit that checks if there are any duplicate ARIA IDs on the page. This title is descriptive of the successful state and is shown to users when no user action is required. */
+  title: 'Ensure interactive controls are not nested',
+  /** Title of an accesibility audit that checks if there are any duplicate ARIA IDs on the page. This title is descriptive of the failing state and is shown to users when there is a failure that needs to be addressed. */
+  failureTitle: 'Interactive controls should not be nested',
+  // TODO: need web.dev article.
+  /** 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. 'Learn More' becomes link text to additional documentation. */
+  description: 'Nested interactive controls should not be nested, because that would result in confusing screen reader experiences.',
+};
+
+const str_ = i18n.createMessageInstanceIdFn(__filename, UIStrings);
+
+class NestedInteractive extends AxeAudit {
+  /**
+   * @return {LH.Audit.Meta}
+   */
+  static get meta() {
+    return {
+      id: 'nested-interactive',
+      title: str_(UIStrings.title),
+      failureTitle: str_(UIStrings.failureTitle),
+      description: str_(UIStrings.description),
+      requiredArtifacts: ['Accessibility'],
+    };
+  }
+}
+
+module.exports = NestedInteractive;
+module.exports.UIStrings = UIStrings;

lighthouse-core/config/default-config.js

@@ -255,6 +255,7 @@ const defaultConfig = {
     'accessibility/aria-required-children',
     'accessibility/aria-required-parent',
     'accessibility/aria-roles',
+    'accessibility/aria-text',
     'accessibility/aria-toggle-field-name',
     'accessibility/aria-tooltip-name',
     'accessibility/aria-treeitem-name',
@@ -268,7 +269,9 @@ const defaultConfig = {
     'accessibility/document-title',
     'accessibility/duplicate-id-active',
     'accessibility/duplicate-id-aria',
+    'accessibility/empty-table-header',
     'accessibility/form-field-multiple-labels',
+    'accessibility/frame-focusable-content',
     'accessibility/frame-title',
     'accessibility/heading-order',
     'accessibility/html-has-lang',
@@ -281,6 +284,7 @@ const defaultConfig = {
     'accessibility/listitem',
     'accessibility/meta-refresh',
     'accessibility/meta-viewport',
+    'accessibility/nested-interactive',
     'accessibility/object-alt',
     'accessibility/tabindex',
     'accessibility/td-headers-attr',
@@ -508,6 +512,8 @@ const defaultConfig = {
         {id: 'aria-required-children', weight: 10, group: 'a11y-aria'},
         {id: 'aria-required-parent', weight: 10, group: 'a11y-aria'},
         {id: 'aria-roles', weight: 10, group: 'a11y-aria'},
+        /** TODO: add weight for v8 */
+        {id: 'aria-text', weight: 0, group: 'a11y-navigation'},
         {id: 'aria-toggle-field-name', weight: 3, group: 'a11y-aria'},
         {id: 'aria-tooltip-name', weight: 3, group: 'a11y-aria'},
         {id: 'aria-treeitem-name', weight: 3, group: 'a11y-aria'},
@@ -521,7 +527,11 @@ const defaultConfig = {
         {id: 'document-title', weight: 3, group: 'a11y-names-labels'},
         {id: 'duplicate-id-active', weight: 3, group: 'a11y-navigation'},
         {id: 'duplicate-id-aria', weight: 10, group: 'a11y-aria'},
+        /** TODO: add weight for v8 */
+        {id: 'empty-table-header', weight: 0, group: 'a11y-tables-lists'},
         {id: 'form-field-multiple-labels', weight: 2, group: 'a11y-names-labels'},
+        /** TODO: add weight for v8 */
+        {id: 'frame-focusable-content', weight: 0, group: 'a11y-best-practices'},
         {id: 'frame-title', weight: 3, group: 'a11y-names-labels'},
         {id: 'heading-order', weight: 2, group: 'a11y-navigation'},
         {id: 'html-has-lang', weight: 3, group: 'a11y-language'},
@@ -534,6 +544,8 @@ const defaultConfig = {
         {id: 'listitem', weight: 3, group: 'a11y-tables-lists'},
         {id: 'meta-refresh', weight: 10, group: 'a11y-best-practices'},
         {id: 'meta-viewport', weight: 10, group: 'a11y-best-practices'},
+        /** TODO: add weight for v8 */
+        {id: 'nested-interactive', weight: 0, group: 'a11y-navigation'},
         {id: 'object-alt', weight: 3, group: 'a11y-names-labels'},
         {id: 'tabindex', weight: 3, group: 'a11y-navigation'},
         {id: 'td-headers-attr', weight: 3, group: 'a11y-tables-lists'},

lighthouse-core/gather/gatherers/accessibility.js

@@ -57,6 +57,8 @@ async function runA11yChecks() {
       'svg-img-alt': {enabled: false},
       'audio-caption': {enabled: false},
       'aria-treeitem-name': {enabled: true},
+      'empty-table-header': {enabled: true},
+      'aria-text': {enabled: true},
     },
   });