From d7dcc89b43eb5e781da3e8a9515a5d7995421826 Mon Sep 17 00:00:00 2001 From: Patrick Hulce Date: Fri, 12 Oct 2018 10:14:59 -0500 Subject: [PATCH 1/2] i18n: convert accessibility audits --- .../audits/accessibility/accesskeys.js | 23 +- .../audits/accessibility/aria-allowed-attr.js | 23 +- .../accessibility/aria-required-attr.js | 21 +- .../accessibility/aria-required-children.js | 25 +- .../accessibility/aria-required-parent.js | 23 +- .../audits/accessibility/aria-roles.js | 23 +- .../accessibility/aria-valid-attr-value.js | 23 +- .../audits/accessibility/aria-valid-attr.js | 23 +- .../audits/accessibility/audio-caption.js | 27 +- .../audits/accessibility/axe-audit.js | 11 +- .../audits/accessibility/button-name.js | 23 +- .../audits/accessibility/bypass.js | 23 +- .../audits/accessibility/color-contrast.js | 23 +- .../audits/accessibility/definition-list.js | 27 +- .../audits/accessibility/dlitem.js | 23 +- .../audits/accessibility/document-title.js | 23 +- .../audits/accessibility/duplicate-id.js | 23 +- .../audits/accessibility/frame-title.js | 21 +- .../audits/accessibility/html-has-lang.js | 27 +- .../audits/accessibility/html-lang-valid.js | 25 +- .../audits/accessibility/image-alt.js | 23 +- .../audits/accessibility/input-image-alt.js | 23 +- lighthouse-core/audits/accessibility/label.js | 23 +- .../audits/accessibility/layout-table.js | 29 +- .../audits/accessibility/link-name.js | 25 +- lighthouse-core/audits/accessibility/list.js | 27 +- .../audits/accessibility/listitem.js | 25 +- .../audits/accessibility/meta-refresh.js | 25 +- .../audits/accessibility/meta-viewport.js | 27 +- .../audits/accessibility/object-alt.js | 23 +- .../audits/accessibility/tabindex.js | 23 +- .../audits/accessibility/td-headers-attr.js | 29 +- .../audits/accessibility/th-has-data-cells.js | 29 +- .../audits/accessibility/valid-lang.js | 23 +- .../audits/accessibility/video-caption.js | 25 +- .../audits/accessibility/video-description.js | 25 +- lighthouse-core/config/default-config.js | 64 ++- lighthouse-core/lib/i18n/en-US.json | 488 ++++++++++++++++++ lighthouse-core/test/results/sample_v2.json | 265 ++++++++++ 39 files changed, 1465 insertions(+), 216 deletions(-) diff --git a/lighthouse-core/audits/accessibility/accesskeys.js b/lighthouse-core/audits/accessibility/accesskeys.js index dfab2e1d2688..afe9878fd991 100644 --- a/lighthouse-core/audits/accessibility/accesskeys.js +++ b/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; diff --git a/lighthouse-core/audits/accessibility/aria-allowed-attr.js b/lighthouse-core/audits/accessibility/aria-allowed-attr.js index f2069dcea1a7..ef52e43001be 100644 --- a/lighthouse-core/audits/accessibility/aria-allowed-attr.js +++ b/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; diff --git a/lighthouse-core/audits/accessibility/aria-required-attr.js b/lighthouse-core/audits/accessibility/aria-required-attr.js index 56cdba9db611..fdc69a563d84 100644 --- a/lighthouse-core/audits/accessibility/aria-required-attr.js +++ b/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; diff --git a/lighthouse-core/audits/accessibility/aria-required-children.js b/lighthouse-core/audits/accessibility/aria-required-children.js index e16555dfe355..3f1640c5bfac 100644 --- a/lighthouse-core/audits/accessibility/aria-required-children.js +++ b/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; diff --git a/lighthouse-core/audits/accessibility/aria-required-parent.js b/lighthouse-core/audits/accessibility/aria-required-parent.js index 5dfb347c074b..ca0555c25c35 100644 --- a/lighthouse-core/audits/accessibility/aria-required-parent.js +++ b/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; diff --git a/lighthouse-core/audits/accessibility/aria-roles.js b/lighthouse-core/audits/accessibility/aria-roles.js index 1ae2d4b60e6d..fda63e26692d 100644 --- a/lighthouse-core/audits/accessibility/aria-roles.js +++ b/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; diff --git a/lighthouse-core/audits/accessibility/aria-valid-attr-value.js b/lighthouse-core/audits/accessibility/aria-valid-attr-value.js index 1c8b48138470..0187c6d68c51 100644 --- a/lighthouse-core/audits/accessibility/aria-valid-attr-value.js +++ b/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; diff --git a/lighthouse-core/audits/accessibility/aria-valid-attr.js b/lighthouse-core/audits/accessibility/aria-valid-attr.js index a1977dc77515..43b299a9656a 100644 --- a/lighthouse-core/audits/accessibility/aria-valid-attr.js +++ b/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; diff --git a/lighthouse-core/audits/accessibility/audio-caption.js b/lighthouse-core/audits/accessibility/audio-caption.js index d9ee71320540..1475295aa3dd 100644 --- a/lighthouse-core/audits/accessibility/audio-caption.js +++ b/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: '`