i18n: convert accessibility audits

lighthouse-core/audits/accessibility/accesskeys.js

@@ -11,6 +11,20 @@
  */
 
 const AxeAudit = require('./axe-audit');
+const i18n = require('../../lib/i18n/i18n.js');
+
+const UIStrings = {
+  /** Title of an accesibility audit that evaluates if the accesskey HTML attribute values are unique across all elements. This descriptive title is shown to users when no user action is required. */
+  title: '`[accesskey]` values are unique',
+  /** Title of an accesibility audit that evaluates if the accesskey HTML attribute values are unique across all elements. This imperative title is shown to users when there is a failure that needs to be addressed. */
+  failureTitle: '`[accesskey]` values are not unique',
+  /** 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: 'Access keys let users quickly focus a part of the page. For proper ' +
+      'navigation, each access key must be unique. ' +
+      '[Learn more](https://dequeuniversity.com/rules/axe/2.2/accesskeys?application=lighthouse).',
+};
+
+const str_ = i18n.createMessageInstanceIdFn(__filename, UIStrings);
 
 class Accesskeys extends AxeAudit {
   /**
@@ -19,14 +33,13 @@ class Accesskeys extends AxeAudit {
   static get meta() {
     return {
       id: 'accesskeys',
-      title: '`[accesskey]` values are unique',
-      failureTitle: '`[accesskey]` values are not unique',
-      description: 'Access keys let users quickly focus a part of the page. For proper ' +
-          'navigation, each access key must be unique. ' +
-          '[Learn more](https://dequeuniversity.com/rules/axe/2.2/accesskeys?application=lighthouse).',
+      title: str_(UIStrings.title),
+      failureTitle: str_(UIStrings.failureTitle),
+      description: str_(UIStrings.description),
       requiredArtifacts: ['Accessibility'],
     };
   }
 }
 
 module.exports = Accesskeys;
+module.exports.UIStrings = UIStrings;

lighthouse-core/audits/accessibility/aria-allowed-attr.js

@@ -11,6 +11,20 @@
  */
 
 const AxeAudit = require('./axe-audit');
+const i18n = require('../../lib/i18n/i18n.js');
+
+const UIStrings = {
+  /** Title of an accesibility audit that evaluates if the aria HTML attributes are misaligned with the aria-role HTML attribute specificed on the element, such mismatches are invalid. This descriptive title is shown to users when no user action is required. */
+  title: '`[aria-*]` attributes match their roles',
+  /** Title of an accesibility audit that evaluates if the aria HTML attributes are misaligned with the aria-role HTML attribute specificed on the element, such mismatches are invalid. This imperative title is shown to users when there is a failure that needs to be addressed. */
+  failureTitle: '`[aria-*]` attributes do not match their roles',
+  /** 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: 'Each ARIA `role` supports a specific subset of `aria-*` attributes. ' +
+      'Mismatching these invalidates the `aria-*` attributes. [Learn ' +
+      'more](https://dequeuniversity.com/rules/axe/2.2/aria-allowed-attr?application=lighthouse).',
+};
+
+const str_ = i18n.createMessageInstanceIdFn(__filename, UIStrings);
 
 class ARIAAllowedAttr extends AxeAudit {
   /**
@@ -19,14 +33,13 @@ class ARIAAllowedAttr extends AxeAudit {
   static get meta() {
     return {
       id: 'aria-allowed-attr',
-      title: '`[aria-*]` attributes match their roles',
-      failureTitle: '`[aria-*]` attributes do not match their roles',
-      description: 'Each ARIA `role` supports a specific subset of `aria-*` attributes. ' +
-          'Mismatching these invalidates the `aria-*` attributes. [Learn ' +
-          'more](https://dequeuniversity.com/rules/axe/2.2/aria-allowed-attr?application=lighthouse).',
+      title: str_(UIStrings.title),
+      failureTitle: str_(UIStrings.failureTitle),
+      description: str_(UIStrings.description),
       requiredArtifacts: ['Accessibility'],
     };
   }
 }
 
 module.exports = ARIAAllowedAttr;
+module.exports.UIStrings = UIStrings;

lighthouse-core/audits/accessibility/aria-required-attr.js

@@ -11,6 +11,19 @@
  */
 
 const AxeAudit = require('./axe-audit');
+const i18n = require('../../lib/i18n/i18n.js');
+
+const UIStrings = {
+  /** Title of an accesibility audit that evaluates if all elements with the aria-role attribute have the other corresponding aria attributes set as well. This descriptive title is shown to users when no user action is required. */
+  title: '`[role]`s have all required `[aria-*]` attributes',
+  /** Title of an accesibility audit that evaluates if all elements with the aria-role attribute have the other corresponding aria attributes set as well. This imperative title is shown to users when there is a failure that needs to be addressed. */
+  failureTitle: '`[role]`s do not have all required `[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. 'Learn More' becomes link text to additional documentation. */
+  description: 'Some ARIA roles have required attributes that describe the state ' +
+      'of the element to screen readers. [Learn more](https://dequeuniversity.com/rules/axe/2.2/aria-required-attr?application=lighthouse).',
+};
+
+const str_ = i18n.createMessageInstanceIdFn(__filename, UIStrings);
 
 class ARIARequiredAttr extends AxeAudit {
   /**
@@ -19,13 +32,13 @@ class ARIARequiredAttr extends AxeAudit {
   static get meta() {
     return {
       id: 'aria-required-attr',
-      title: '`[role]`s have all required `[aria-*]` attributes',
-      failureTitle: '`[role]`s do not have all required `[aria-*]` attributes',
-      description: 'Some ARIA roles have required attributes that describe the state ' +
-          'of the element to screen readers. [Learn more](https://dequeuniversity.com/rules/axe/2.2/aria-required-attr?application=lighthouse).',
+      title: str_(UIStrings.title),
+      failureTitle: str_(UIStrings.failureTitle),
+      description: str_(UIStrings.description),
       requiredArtifacts: ['Accessibility'],
     };
   }
 }
 
 module.exports = ARIARequiredAttr;
+module.exports.UIStrings = UIStrings;

lighthouse-core/audits/accessibility/aria-required-children.js

@@ -12,6 +12,21 @@
  */
 
 const AxeAudit = require('./axe-audit');
+const i18n = require('../../lib/i18n/i18n.js');
+
+const UIStrings = {
+  /** Title of an accesibility audit that evaluates if the elements with an aria-role that require child elements have the required children. This descriptive title is shown to users when no user action is required. */
+  title: 'Elements with `[role]` that require specific children `[role]`s, are present',
+  /** Title of an accesibility audit that evaluates if the elements with an aria-role that require child elements have the required children. This imperative title is shown to users when there is a failure that needs to be addressed. */
+  failureTitle: 'Elements with `[role]` that require specific children `[role]`s, ' +
+      'are missing.',
+  /** 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: 'Some ARIA parent roles must contain specific child roles to perform ' +
+      'their intended accessibility functions. ' +
+      '[Learn more](https://dequeuniversity.com/rules/axe/2.2/aria-required-children?application=lighthouse).',
+};
+
+const str_ = i18n.createMessageInstanceIdFn(__filename, UIStrings);
 
 class AriaRequiredChildren extends AxeAudit {
   /**
@@ -20,15 +35,13 @@ class AriaRequiredChildren extends AxeAudit {
   static get meta() {
     return {
       id: 'aria-required-children',
-      title: 'Elements with `[role]` that require specific children `[role]`s, are present',
-      failureTitle: 'Elements with `[role]` that require specific children `[role]`s, ' +
-          'are missing.',
-      description: 'Some ARIA parent roles must contain specific child roles to perform ' +
-          'their intended accessibility functions. ' +
-          '[Learn more](https://dequeuniversity.com/rules/axe/2.2/aria-required-children?application=lighthouse).',
+      title: str_(UIStrings.title),
+      failureTitle: str_(UIStrings.failureTitle),
+      description: str_(UIStrings.description),
       requiredArtifacts: ['Accessibility'],
     };
   }
 }
 
 module.exports = AriaRequiredChildren;
+module.exports.UIStrings = UIStrings;

lighthouse-core/audits/accessibility/aria-required-parent.js

@@ -12,6 +12,20 @@
  */
 
 const AxeAudit = require('./axe-audit');
+const i18n = require('../../lib/i18n/i18n.js');
+
+const UIStrings = {
+  /** Title of an accesibility audit that evaluates if the elements with an aria role that must be a child of specific aria-role element have that required parent. This descriptive title is shown to users when no user action is required. */
+  title: '`[role]`s are contained by their required parent element',
+  /** Title of an accesibility audit that evaluates if the elements with an aria role that must be a child of specific aria-role element have that required parent. This imperative title is shown to users when there is a failure that needs to be addressed. */
+  failureTitle: '`[role]`s are not contained by their required parent element',
+  /** 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: 'Some ARIA child roles must be contained by specific parent roles to ' +
+      'properly perform their intended accessibility functions. ' +
+      '[Learn more](https://dequeuniversity.com/rules/axe/2.2/aria-required-parent?application=lighthouse).',
+};
+
+const str_ = i18n.createMessageInstanceIdFn(__filename, UIStrings);
 
 class AriaRequiredParent extends AxeAudit {
   /**
@@ -20,14 +34,13 @@ class AriaRequiredParent extends AxeAudit {
   static get meta() {
     return {
       id: 'aria-required-parent',
-      title: '`[role]`s are contained by their required parent element',
-      failureTitle: '`[role]`s are not contained by their required parent element',
-      description: 'Some ARIA child roles must be contained by specific parent roles to ' +
-          'properly perform their intended accessibility functions. ' +
-          '[Learn more](https://dequeuniversity.com/rules/axe/2.2/aria-required-parent?application=lighthouse).',
+      title: str_(UIStrings.title),
+      failureTitle: str_(UIStrings.failureTitle),
+      description: str_(UIStrings.description),
       requiredArtifacts: ['Accessibility'],
     };
   }
 }
 
 module.exports = AriaRequiredParent;
+module.exports.UIStrings = UIStrings;

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

@@ -11,6 +11,20 @@
  */
 
 const AxeAudit = require('./axe-audit');
+const i18n = require('../../lib/i18n/i18n.js');
+
+const UIStrings = {
+  /** Title of an accesibility audit that evaluates if all elements have valid aria-role HTML attributes. This descriptive title is shown to users when no user action is required. */
+  title: '`[role]` values are valid',
+  /** Title of an accesibility audit that evaluates if all elements have valid aria-role HTML attributes. This imperative title is shown to users when there is a failure that needs to be addressed. */
+  failureTitle: '`[role]` values are not valid',
+  /** 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: 'ARIA roles must have valid values in order to perform their ' +
+      'intended accessibility functions. ' +
+      '[Learn more](https://dequeuniversity.com/rules/axe/2.2/aria-roles?application=lighthouse).',
+};
+
+const str_ = i18n.createMessageInstanceIdFn(__filename, UIStrings);
 
 class AriaRoles extends AxeAudit {
   /**
@@ -19,14 +33,13 @@ class AriaRoles extends AxeAudit {
   static get meta() {
     return {
       id: 'aria-roles',
-      title: '`[role]` values are valid',
-      failureTitle: '`[role]` values are not valid',
-      description: 'ARIA roles must have valid values in order to perform their ' +
-          'intended accessibility functions. ' +
-          '[Learn more](https://dequeuniversity.com/rules/axe/2.2/aria-roles?application=lighthouse).',
+      title: str_(UIStrings.title),
+      failureTitle: str_(UIStrings.failureTitle),
+      description: str_(UIStrings.description),
       requiredArtifacts: ['Accessibility'],
     };
   }
 }
 
 module.exports = AriaRoles;
+module.exports.UIStrings = UIStrings;

lighthouse-core/audits/accessibility/aria-valid-attr-value.js

@@ -11,6 +11,20 @@
  */
 
 const AxeAudit = require('./axe-audit');
+const i18n = require('../../lib/i18n/i18n.js');
+
+const UIStrings = {
+  /** Title of an accesibility audit that evaluates if all elements that have any aria HTML attribute have valid values for those attributes. This descriptive title is shown to users when no user action is required. */
+  title: '`[aria-*]` attributes have valid values',
+  /** Title of an accesibility audit that evaluates if all elements that have any aria HTML attribute have valid values for those attributes. This imperative title is shown to users when there is a failure that needs to be addressed. */
+  failureTitle: '`[aria-*]` attributes do not have valid values',
+  /** 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: 'Assistive technologies, like screen readers, can\'t interpret ARIA ' +
+      'attributes with invalid values. [Learn ' +
+      'more](https://dequeuniversity.com/rules/axe/2.2/aria-valid-attr-value?application=lighthouse).',
+};
+
+const str_ = i18n.createMessageInstanceIdFn(__filename, UIStrings);
 
 class ARIAValidAttr extends AxeAudit {
   /**
@@ -19,14 +33,13 @@ class ARIAValidAttr extends AxeAudit {
   static get meta() {
     return {
       id: 'aria-valid-attr-value',
-      title: '`[aria-*]` attributes have valid values',
-      failureTitle: '`[aria-*]` attributes do not have valid values',
-      description: 'Assistive technologies, like screen readers, can\'t interpret ARIA ' +
-          'attributes with invalid values. [Learn ' +
-          'more](https://dequeuniversity.com/rules/axe/2.2/aria-valid-attr-value?application=lighthouse).',
+      title: str_(UIStrings.title),
+      failureTitle: str_(UIStrings.failureTitle),
+      description: str_(UIStrings.description),
       requiredArtifacts: ['Accessibility'],
     };
   }
 }
 
 module.exports = ARIAValidAttr;
+module.exports.UIStrings = UIStrings;

lighthouse-core/audits/accessibility/aria-valid-attr.js

@@ -11,6 +11,20 @@
  */
 
 const AxeAudit = require('./axe-audit');
+const i18n = require('../../lib/i18n/i18n.js');
+
+const UIStrings = {
+  /** Title of an accesibility audit that evaluates if all elements with aria HTML attributes have spelled the name of attribute correctly. This descriptive title is shown to users when no user action is required. */
+  title: '`[aria-*]` attributes are valid and not misspelled',
+  /** Title of an accesibility audit that evaluates if all elements with aria HTML attributes have spelled the name of attribute correctly. This imperative title is shown to users when there is a failure that needs to be addressed. */
+  failureTitle: '`[aria-*]` attributes are not valid or misspelled',
+  /** 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: 'Assistive technologies, like screen readers, can\'t interpret ARIA ' +
+      'attributes with invalid names. [Learn ' +
+      'more](https://dequeuniversity.com/rules/axe/2.2/aria-valid-attr?application=lighthouse).',
+};
+
+const str_ = i18n.createMessageInstanceIdFn(__filename, UIStrings);
 
 class ARIAValidAttr extends AxeAudit {
   /**
@@ -19,14 +33,13 @@ class ARIAValidAttr extends AxeAudit {
   static get meta() {
     return {
       id: 'aria-valid-attr',
-      title: '`[aria-*]` attributes are valid and not misspelled',
-      failureTitle: '`[aria-*]` attributes are not valid or misspelled',
-      description: 'Assistive technologies, like screen readers, can\'t interpret ARIA ' +
-          'attributes with invalid names. [Learn ' +
-          'more](https://dequeuniversity.com/rules/axe/2.2/aria-valid-attr?application=lighthouse).',
+      title: str_(UIStrings.title),
+      failureTitle: str_(UIStrings.failureTitle),
+      description: str_(UIStrings.description),
       requiredArtifacts: ['Accessibility'],
     };
   }
 }
 
 module.exports = ARIAValidAttr;
+module.exports.UIStrings = UIStrings;

lighthouse-core/audits/accessibility/audio-caption.js

@@ -11,6 +11,22 @@
  */
 
 const AxeAudit = require('./axe-audit');
+const i18n = require('../../lib/i18n/i18n.js');
+
+const UIStrings = {
+  /** Title of an accesibility audit that evaluates if all audio elements have a track element that has captions for screen readers. This descriptive title is shown to users when no user action is required. */
+  title: '`<audio>` elements contain a `<track>` element with `[kind="captions"]`',
+  /** Title of an accesibility audit that evaluates if all audio elements have a track element that has captions for screen readers. This imperative title is shown to users when there is a failure that needs to be addressed. */
+  failureTitle: '`<audio>` elements are missing a `<track>` element with ' +
+      '`[kind="captions"]`.',
+  /** 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: 'Captions make audio elements usable for deaf or hearing-impaired users, ' +
+      'providing critical information such as who is talking, what they\'re saying, ' +
+      'and other non-speech information. ' +
+      '[Learn more](https://dequeuniversity.com/rules/axe/2.2/audio-caption?application=lighthouse).',
+};
+
+const str_ = i18n.createMessageInstanceIdFn(__filename, UIStrings);
 
 class AudioCaption extends AxeAudit {
   /**
@@ -19,16 +35,13 @@ class AudioCaption extends AxeAudit {
   static get meta() {
     return {
       id: 'audio-caption',
-      title: '`<audio>` elements contain a `<track>` element with `[kind="captions"]`',
-      failureTitle: '`<audio>` elements are missing a `<track>` element with ' +
-          '`[kind="captions"]`.',
-      description: 'Captions make audio elements usable for deaf or hearing-impaired users, ' +
-          'providing critical information such as who is talking, what they\'re saying, ' +
-          'and other non-speech information. ' +
-          '[Learn more](https://dequeuniversity.com/rules/axe/2.2/audio-caption?application=lighthouse).',
+      title: str_(UIStrings.title),
+      failureTitle: str_(UIStrings.failureTitle),
+      description: str_(UIStrings.description),
       requiredArtifacts: ['Accessibility'],
     };
   }
 }
 
 module.exports = AudioCaption;
+module.exports.UIStrings = UIStrings;

lighthouse-core/audits/accessibility/axe-audit.js

@@ -11,6 +11,14 @@
  */
 
 const Audit = require('../audit');
+const i18n = require('../../lib/i18n/i18n.js');
+
+const UIStrings = {
+  /** Label of a table column that identifies the elements by a small code snippet that have failed the audit. */
+  failingElementsHeader: 'Failing Elements',
+};
+
+const str_ = i18n.createMessageInstanceIdFn(__filename, UIStrings);
 
 class AxeAudit extends Audit {
   /**
@@ -51,7 +59,7 @@ class AxeAudit extends Audit {
     }
 
     const headings = [
-      {key: 'node', itemType: 'node', text: 'Failing Elements'},
+      {key: 'node', itemType: 'node', text: str_(UIStrings.failingElementsHeader)},
     ];
 
     return {
@@ -65,3 +73,4 @@ class AxeAudit extends Audit {
 }
 
 module.exports = AxeAudit;
+module.exports.UIStrings = UIStrings;