new_audit(axe): input-button-name, role-img-alt, select-name

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

@@ -273,6 +273,9 @@ Object {
     Object {
       "path": "accessibility/image-alt",
     },
+    Object {
+      "path": "accessibility/input-button-name",
+    },
     Object {
       "path": "accessibility/input-image-alt",
     },
@@ -297,6 +300,12 @@ Object {
     Object {
       "path": "accessibility/object-alt",
     },
+    Object {
+      "path": "accessibility/role-img-alt",
+    },
+    Object {
+      "path": "accessibility/select-name",
+    },
     Object {
       "path": "accessibility/tabindex",
     },
@@ -629,6 +638,11 @@ Object {
           "id": "input-image-alt",
           "weight": 10,
         },
+        Object {
+          "group": "a11y-names-labels",
+          "id": "input-button-name",
+          "weight": 10,
+        },
         Object {
           "group": "a11y-names-labels",
           "id": "label",
@@ -664,6 +678,16 @@ Object {
           "id": "object-alt",
           "weight": 3,
         },
+        Object {
+          "group": "a11y-names-labels",
+          "id": "role-img-alt",
+          "weight": 3,
+        },
+        Object {
+          "group": "a11y-names-labels",
+          "id": "select-name",
+          "weight": 10,
+        },
         Object {
           "group": "a11y-navigation",
           "id": "tabindex",

lighthouse-core/audits/accessibility/input-button-name.js

@@ -0,0 +1,49 @@
+/**
+ * @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 input buttons have discernible text.
+ * See base class in axe-audit.js for audit() implementation.
+ *
+ * See PR where input-button-name was split out from button-name:
+ * @url https://github.com/dequelabs/axe-core/pull/1615
+ */
+
+const AxeAudit = require('./axe-audit.js');
+const i18n = require('../../lib/i18n/i18n.js');
+
+const UIStrings = {
+  /** Title of an accesibility audit that evaluates if all input button elements have names accessible to screen readers. This title is descriptive of the successful state and is shown to users when no user action is required. */
+  title: 'Input buttons have an accessible name',
+  /** Title of an accesibility audit that evaluates if all input button elements have names accessible to screen readers. This title is descriptive of the failing state and is shown to users when there is a failure that needs to be addressed. */
+  failureTitle: 'Input buttons do not have an accessible name',
+  /** 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: 'When an input button doesn\'t have an accessible name, screen readers announce ' +
+      'it as "button", making it unusable for users who rely on screen readers. ' +
+      '[Learn more](https://dequeuniversity.com/rules/axe/4.1/input-button-name?application=lighthouse).',
+};
+
+
+const str_ = i18n.createMessageInstanceIdFn(__filename, UIStrings);
+
+class InputButtonName extends AxeAudit {
+  /**
+   * @return {LH.Audit.Meta}
+   */
+  static get meta() {
+    return {
+      id: 'input-button-name',
+      title: str_(UIStrings.title),
+      failureTitle: str_(UIStrings.failureTitle),
+      description: str_(UIStrings.description),
+      requiredArtifacts: ['Accessibility'],
+    };
+  }
+}
+
+module.exports = InputButtonName;
+module.exports.UIStrings = UIStrings;

lighthouse-core/audits/accessibility/role-img-alt.js

@@ -0,0 +1,47 @@
+/**
+ * @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 elements with [role="img"] have discernible text.
+ * See base class in axe-audit.js for audit() implementation.
+ *
+ * See PR where role-img-alt-name was split out from image-alt:
+ * @url https://github.com/dequelabs/axe-core/pull/1586
+ */
+
+
+const AxeAudit = require('./axe-audit.js');
+const i18n = require('../../lib/i18n/i18n.js');
+
+const UIStrings = {
+  /** Title of an accesibility audit that evaluates if all role=img elements are given names. This title is descriptive of the successful state and is shown to users when no user action is required. */
+  title: 'Elements with `[role=img]` have an accessible name',
+  /** Title of an accesibility audit that evaluates if all role=img elements are given 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=img]` do not have an accessible name',
+  /** Description of a Lighthouse audit that tells the user *why* they should have accessible names for meter elements. 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: 'When an element doesn\'t have an accessible name, screen readers announce it with a generic name, making it unusable for users who rely on screen readers. [Learn more](https://dequeuniversity.com/rules/axe/4.1/role-img-alt?application=lighthouse).',
+};
+
+const str_ = i18n.createMessageInstanceIdFn(__filename, UIStrings);
+
+class RoleImgAlt extends AxeAudit {
+  /**
+   * @return {LH.Audit.Meta}
+   */
+  static get meta() {
+    return {
+      id: 'role-img-alt',
+      title: str_(UIStrings.title),
+      failureTitle: str_(UIStrings.failureTitle),
+      description: str_(UIStrings.description),
+      requiredArtifacts: ['Accessibility'],
+    };
+  }
+}
+
+module.exports = RoleImgAlt;
+module.exports.UIStrings = UIStrings;

lighthouse-core/audits/accessibility/select-name.js

@@ -0,0 +1,48 @@
+/**
+ * @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 every select element has a label.
+  * See base class in axe-audit.js for audit() implementation.
+  *
+  * See PR where select-name was split out from label:
+  * @url https://github.com/dequelabs/axe-core/pull/2448
+  */
+
+const AxeAudit = require('./axe-audit.js');
+const i18n = require('../../lib/i18n/i18n.js');
+
+const UIStrings = {
+  /** Title of an accesibility audit that evaluates if all select elements have corresponding label elements. This title is descriptive of the successful state and is shown to users when no user action is required. */
+  title: 'Select elements have associated labels',
+  /** Title of an accesibility audit that evaluates if all select elements have corresponding label elements. This title is descriptive of the failing state and is shown to users when there is a failure that needs to be addressed. */
+  failureTitle: 'Select elements do not have associated labels',
+  /** 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: 'Labels ensure that dropdowns are announced properly by assistive ' +
+       'technologies, like screen readers. [Learn ' +
+       'more](https://dequeuniversity.com/rules/axe/4.1/select-name?application=lighthouse).',
+};
+
+const str_ = i18n.createMessageInstanceIdFn(__filename, UIStrings);
+
+class SelectName extends AxeAudit {
+  /**
+    * @return {LH.Audit.Meta}
+    */
+  static get meta() {
+    return {
+      id: 'select-name',
+      title: str_(UIStrings.title),
+      failureTitle: str_(UIStrings.failureTitle),
+      description: str_(UIStrings.description),
+      requiredArtifacts: ['Accessibility'],
+    };
+  }
+}
+
+module.exports = SelectName;
+module.exports.UIStrings = UIStrings;

lighthouse-core/config/default-config.js

@@ -272,6 +272,7 @@ const defaultConfig = {
     'accessibility/html-has-lang',
     'accessibility/html-lang-valid',
     'accessibility/image-alt',
+    'accessibility/input-button-name',
     'accessibility/input-image-alt',
     'accessibility/label',
     'accessibility/link-name',
@@ -280,6 +281,8 @@ const defaultConfig = {
     'accessibility/meta-refresh',
     'accessibility/meta-viewport',
     'accessibility/object-alt',
+    'accessibility/role-img-alt',
+    'accessibility/select-name',
     'accessibility/tabindex',
     'accessibility/td-headers-attr',
     'accessibility/th-has-data-cells',
@@ -524,13 +527,16 @@ const defaultConfig = {
         {id: 'html-lang-valid', weight: 3, group: 'a11y-language'},
         {id: 'image-alt', weight: 10, group: 'a11y-names-labels'},
         {id: 'input-image-alt', weight: 10, group: 'a11y-names-labels'},
+        {id: 'input-button-name', weight: 10, group: 'a11y-names-labels'},
         {id: 'label', weight: 10, group: 'a11y-names-labels'},
         {id: 'link-name', weight: 3, group: 'a11y-names-labels'},
         {id: 'list', weight: 3, group: 'a11y-tables-lists'},
         {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'},
         {id: 'object-alt', weight: 3, group: 'a11y-names-labels'},
+        {id: 'role-img-alt', weight: 3, group: 'a11y-names-labels'},
+        {id: 'select-name', weight: 10, group: 'a11y-names-labels'},
         {id: 'tabindex', weight: 3, group: 'a11y-navigation'},
         {id: 'td-headers-attr', weight: 3, group: 'a11y-tables-lists'},
         {id: 'th-has-data-cells', weight: 3, group: 'a11y-tables-lists'},

lighthouse-core/gather/gatherers/accessibility.js

@@ -64,10 +64,6 @@ async function runA11yChecks(isTestMode = false) {
       'color-contrast': {enabled: !isTestMode}, // See gatherer's test for explanation
       'aria-roledescription': {enabled: false},
       'scrollable-region-focusable': {enabled: false},
-      // TODO(paulirish): create audits and enable these 3.
-      'input-button-name': {enabled: false},
-      'role-img-alt': {enabled: false},
-      'select-name': {enabled: false},
     },
   });
 

lighthouse-core/scripts/i18n/collect-strings.js

@@ -640,7 +640,7 @@ if (require.main === module) {
 
   if (collisions > 0) {
     console.log(`MEANING COLLISION: ${collisions} string(s) have the same content.`);
-    assert.equal(collisions, 30, `The number of duplicate strings have changed, update this assertion if that is expected, or reword strings. Collisions: ${collisionStrings.join('\n')}`);
+    assert.equal(collisions, 32, `The number of duplicate strings have changed, update this assertion if that is expected, or reword strings. Collisions: ${collisionStrings.join('\n')}`);
   }
 
   writeStringsToCtcFiles('en-US', strings);

lighthouse-core/test/config/default-config-test.js

@@ -56,4 +56,22 @@ describe('Default Config', () => {
       }
     }
   });
+
+  it('audit ids are all in groups', () => {
+    const audits = defaultConfig.audits;
+
+    const auditsInCategories = new Set();
+    for (const category of Object.values(defaultConfig.categories)) {
+      category.auditRefs.forEach(ref => auditsInCategories.add(ref.id));
+    }
+    const categoryAuditsArr = Array.from(auditsInCategories).sort();
+
+    // Remove path to get audit IDs
+    const auditsArr = audits.map(auditPath => auditPath.split('/').slice(-1)[0]).sort()
+        // As covered in config.js, full-page-screenshot is a special no-category audit
+        .filter(id => id !== 'full-page-screenshot');
+
+    expect(categoryAuditsArr).toMatchObject(auditsArr);
+    expect(auditsArr).toMatchObject(categoryAuditsArr);
+  });
 });

lighthouse-core/test/fraggle-rock/api-test-pptr.js

@@ -95,7 +95,7 @@ describe('Fraggle Rock API', () => {
 
       const {auditResults, erroredAudits, failedAudits} = getAuditsBreakdown(lhr);
       // TODO(FR-COMPAT): This assertion can be removed when full compatibility is reached.
-      expect(auditResults.length).toMatchInlineSnapshot(`78`);
+      expect(auditResults.length).toMatchInlineSnapshot(`81`);
 
       expect(erroredAudits).toHaveLength(0);
       expect(failedAudits.map(audit => audit.id)).toContain('label');
@@ -159,7 +159,7 @@ describe('Fraggle Rock API', () => {
       const {lhr} = result;
       const {auditResults, failedAudits, erroredAudits} = getAuditsBreakdown(lhr);
       // TODO(FR-COMPAT): This assertion can be removed when full compatibility is reached.
-      expect(auditResults.length).toMatchInlineSnapshot(`151`);
+      expect(auditResults.length).toMatchInlineSnapshot(`154`);
       expect(erroredAudits).toHaveLength(0);
 
       const failedAuditIds = failedAudits.map(audit => audit.id);