diff --git a/.gitignore b/.gitignore index fadf1382d5b3..02f265f28640 100644 --- a/.gitignore +++ b/.gitignore @@ -23,6 +23,7 @@ last-run-results.html *.report.csv *.report.pretty *.artifacts.log +*.ctc.json !lighthouse-core/test/results/artifacts/*.trace.json !lighthouse-core/test/results/artifacts/*.devtoolslog.json diff --git a/lighthouse-core/audits/byte-efficiency/unminified-css.js b/lighthouse-core/audits/byte-efficiency/unminified-css.js index cfccdb861228..4ebde58c6e81 100644 --- a/lighthouse-core/audits/byte-efficiency/unminified-css.js +++ b/lighthouse-core/audits/byte-efficiency/unminified-css.js @@ -15,7 +15,7 @@ const UIStrings = { title: 'Minify CSS', /** Description of a Lighthouse audit that tells the user *why* they should minify (remove whitespace) the page's CSS code. 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: 'Minifying CSS files can reduce network payload sizes. ' + - '[Learn more](https://developers.google.com/web/tools/lighthouse/audits/minify-css).', + '[Learn more](https://developers.google.com/web/tools/lighthouse/audits/minify-css).', }; const str_ = i18n.createMessageInstanceIdFn(__filename, UIStrings); diff --git a/lighthouse-core/audits/dobetterweb/appcache-manifest.js b/lighthouse-core/audits/dobetterweb/appcache-manifest.js index 1f133a89aa14..c525a7ed953a 100644 --- a/lighthouse-core/audits/dobetterweb/appcache-manifest.js +++ b/lighthouse-core/audits/dobetterweb/appcache-manifest.js @@ -21,7 +21,10 @@ const UIStrings = { /** Description of a Lighthouse audit that tells the user why they should not use the Application Cache API. 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: 'Application Cache is deprecated. ' + '[Learn more](https://developers.google.com/web/tools/lighthouse/audits/appcache).', - /** Label for the audit identifying uses of the Application Cache. */ + /** + * @description Label for the audit identifying uses of the Application Cache. + * @example {clock.appcache} AppCacheManifest + */ displayValue: 'Found "{AppCacheManifest}"', }; diff --git a/lighthouse-core/audits/dobetterweb/external-anchors-use-rel-noopener.js b/lighthouse-core/audits/dobetterweb/external-anchors-use-rel-noopener.js index f7ad647bb108..f8ccee8ffee2 100644 --- a/lighthouse-core/audits/dobetterweb/external-anchors-use-rel-noopener.js +++ b/lighthouse-core/audits/dobetterweb/external-anchors-use-rel-noopener.js @@ -18,7 +18,10 @@ const UIStrings = { description: 'Add `rel="noopener"` or `rel="noreferrer"` to any external links to improve ' + 'performance and prevent security vulnerabilities. ' + '[Learn more](https://developers.google.com/web/tools/lighthouse/audits/noopener).', - /** Warning that some links' destinations cannot be determined and therefore the audit cannot evaluate the link's safety. */ + /** + * @description Warning that some links' destinations cannot be determined and therefore the audit cannot evaluate the link's safety. + * @example {} anchorHTML + */ warning: 'Unable to determine the destination for anchor ({anchorHTML}). ' + 'If not used as a hyperlink, consider removing target=_blank.', /** Label for a column in a data table; entries will be the target attribute of a link. Each entry is either an empty string or a string like `_blank`. */ diff --git a/lighthouse-core/audits/dobetterweb/js-libraries.js b/lighthouse-core/audits/dobetterweb/js-libraries.js index 684feb7192bd..7a30e9f8dd10 100644 --- a/lighthouse-core/audits/dobetterweb/js-libraries.js +++ b/lighthouse-core/audits/dobetterweb/js-libraries.js @@ -18,8 +18,6 @@ const UIStrings = { title: 'Detected JavaScript libraries', /** Description of a Lighthouse audit that tells the user what this audit is detecting. This is displayed after a user expands the section to see more. No character length limits. */ description: 'All front-end JavaScript libraries detected on the page.', - /** Label for a column in a data table; entries will be the names of the detected Javascript libraries. */ - columnName: 'Name', /** Label for a column in a data table; entries will be the version numbers of the detected Javascript libraries. */ columnVersion: 'Version', }; @@ -54,7 +52,7 @@ class JsLibrariesAudit extends Audit { /** @type {LH.Audit.Details.Table['headings']} */ const headings = [ - {key: 'name', itemType: 'text', text: str_(UIStrings.columnName)}, + {key: 'name', itemType: 'text', text: str_(i18n.UIStrings.columnName)}, {key: 'version', itemType: 'text', text: str_(UIStrings.columnVersion)}, ]; const details = Audit.makeTableDetails(headings, libDetails, {}); diff --git a/lighthouse-core/audits/font-display.js b/lighthouse-core/audits/font-display.js index 9f273a0a2179..29f3b3c129c1 100644 --- a/lighthouse-core/audits/font-display.js +++ b/lighthouse-core/audits/font-display.js @@ -24,7 +24,10 @@ const UIStrings = { 'Leverage the font-display CSS feature to ensure text is user-visible while ' + 'webfonts are loading. ' + '[Learn more](https://developers.google.com/web/updates/2016/02/font-display).', - /** A warning message that is shown when Lighthouse couldn't automatically check some of the page's fonts and that the user will need to manually check it. */ + /** + * @description A warning message that is shown when Lighthouse couldn't automatically check some of the page's fonts and that the user will need to manually check it. + * @example {https://font.cdn.com/} fontURL + */ undeclaredFontURLWarning: 'Lighthouse was unable to automatically check the font-display value ' + 'for the following URL: {fontURL}.', }; diff --git a/lighthouse-core/audits/image-aspect-ratio.js b/lighthouse-core/audits/image-aspect-ratio.js index 8dd975f975c2..b736977dfc5e 100644 --- a/lighthouse-core/audits/image-aspect-ratio.js +++ b/lighthouse-core/audits/image-aspect-ratio.js @@ -23,7 +23,10 @@ const UIStrings = { /** Description of a Lighthouse audit that tells the user why they should maintain the correct aspect ratios for all images. 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: 'Image display dimensions should match natural aspect ratio. ' + '[Learn more](https://developers.google.com/web/tools/lighthouse/audits/aspect-ratio).', - /** Warning that the size information for an image was nonsensical. `url` will be replaced with the url of that image. */ + /** + * @description Warning that the size information for an image was nonsensical. + * @example {https://image.cdn.com/} url + */ warningCompute: 'Invalid image sizing information {url}', /** Label for a column in a data table; entries in the column will be the numeric aspect ratio of an image as displayed in a web page. */ columnDisplayed: 'Aspect Ratio (Displayed)', diff --git a/lighthouse-core/audits/resource-summary.js b/lighthouse-core/audits/resource-summary.js index 18bbf9d03f09..1c45de7408ba 100644 --- a/lighthouse-core/audits/resource-summary.js +++ b/lighthouse-core/audits/resource-summary.js @@ -17,7 +17,7 @@ const UIStrings = { ' add a budget.json file. [Learn more](https://developers.google.com/web/tools/lighthouse/audits/budgets).', /** [ICU Syntax] Label for an audit identifying the number of requests and kilobytes used to load the page. */ displayValue: `{requestCount, plural, =1 {1 request} other {# requests}}` + - ` • { byteCount, number, bytes } KB`, + ` • {byteCount, number, bytes} KB`, }; const str_ = i18n.createMessageInstanceIdFn(__filename, UIStrings); diff --git a/lighthouse-core/audits/seo/canonical.js b/lighthouse-core/audits/seo/canonical.js index b1bbaba43491..fe3032bf892d 100644 --- a/lighthouse-core/audits/seo/canonical.js +++ b/lighthouse-core/audits/seo/canonical.js @@ -18,15 +18,30 @@ const UIStrings = { /** Description of a Lighthouse audit that tells the user *why* they need to have a valid rel=canonical link. 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: 'Canonical links suggest which URL to show in search results. ' + '[Learn more](https://developers.google.com/web/tools/lighthouse/audits/canonical).', - /** Explanatory message stating that there was a failure in an audit caused by multiple URLs conflicting with each other. "urlList" will be replaced by a list of URLs (e.g. https://example.com, https://example2.com, etc ). */ + /** + * @description Explanatory message stating that there was a failure in an audit caused by multiple URLs conflicting with each other. + * @example {https://example.com, https://example2.com} urlList + * */ explanationConflict: 'Multiple conflicting URLs ({urlList})', - /** Explanatory message stating that there was a failure in an audit caused by a URL being invalid. "url" will be replaced by the invalid URL (e.g. https://example.com). */ + /** + * @description Explanatory message stating that there was a failure in an audit caused by a URL being invalid. + * @example {https://example.com/} url + * */ explanationInvalid: 'Invalid URL ({url})', - /** Explanatory message stating that there was a failure in an audit caused by a URL being relative instead of absolute. "url" will be replaced by the invalid URL (e.g. https://example.com). */ + /** + * @description Explanatory message stating that there was a failure in an audit caused by a URL being relative instead of absolute. + * @example {https://example.com/} url + * */ explanationRelative: 'Relative URL ({url})', - /** Explanatory message stating that there was a failure in an audit caused by a URL pointing to a different hreflang than the current context. "url" will be replaced by the invalid URL (e.g. https://example.com). 'hreflang' is an HTML attribute and should not be translated. */ + /** + * @description Explanatory message stating that there was a failure in an audit caused by a URL pointing to a different hreflang than the current context.'hreflang' is an HTML attribute and should not be translated. + * @example {https://example.com/} url + */ explanationPointsElsewhere: 'Points to another `hreflang` location ({url})', - /** Explanatory message stating that there was a failure in an audit caused by a URL pointing to a different domain. "url" will be replaced by the invalid URL (e.g. https://example.com). */ + /** + * @description Explanatory message stating that there was a failure in an audit caused by a URL pointing to a different domain. + * @example {https://example.com/} url + * */ explanationDifferentDomain: 'Points to a different domain ({url})', /** Explanatory message stating that the page's canonical URL was pointing to the domain's root URL, which is a common mistake. "points" refers to the action of the 'rel=canonical' referencing another link. "root" refers to the starting/home page of the website. "domain" refers to the registered domain name of the website. */ explanationRoot: 'Points to the domain\'s root URL (the homepage), ' + diff --git a/lighthouse-core/audits/seo/robots-txt.js b/lighthouse-core/audits/seo/robots-txt.js index c8a1fc2f4cb9..1367308c367e 100644 --- a/lighthouse-core/audits/seo/robots-txt.js +++ b/lighthouse-core/audits/seo/robots-txt.js @@ -41,7 +41,10 @@ const UIStrings = { /** Description of a Lighthouse audit that tells the user *why* they need to have a valid robots.txt file. Note: "robots.txt" is a canonical filename and should not be translated. This is displayed after a user expands the section to see more. No character length limits. */ description: 'If your robots.txt file is malformed, crawlers may not be able to understand ' + 'how you want your website to be crawled or indexed.', - /** Label for the audit identifying that the robots.txt request has returned a specific HTTP status code. Note: "robots.txt" is a canonical filename and should not be translated. "statusCode" will be replaced with a 3 digit integer which represents the status of the HTTP connectiong for this page. */ + /** + * @description Label for the audit identifying that the robots.txt request has returned a specific HTTP status code. Note: "robots.txt" is a canonical filename and should not be translated. + * @example {500} statusCode + * */ displayValueHttpBadCode: 'request for robots.txt returned HTTP status: {statusCode}', /** [ICU Syntax] Label for the audit identifying the number of errors that occured while validating the robots.txt file. "itemCount" will be replaced by the integer count of errors encountered. */ displayValueValidationError: `{itemCount, plural, diff --git a/lighthouse-core/audits/seo/tap-targets.js b/lighthouse-core/audits/seo/tap-targets.js index 125c2ba91fbf..ebe56de00326 100644 --- a/lighthouse-core/audits/seo/tap-targets.js +++ b/lighthouse-core/audits/seo/tap-targets.js @@ -31,8 +31,6 @@ const UIStrings = { description: 'Interactive elements like buttons and links should be large enough (48x48px), and have enough space around them, to be easy enough to tap without overlapping onto other elements. [Learn more](https://developers.google.com/web/fundamentals/accessibility/accessible-styles#multi-device_responsive_design).', /** Label of a table column that identifies tap targets (like buttons and links) that have failed the audit and aren't easy to tap on. */ tapTargetHeader: 'Tap Target', - /** Label of a table column that specifies the size of tap targets like buttons and links. */ - sizeHeader: 'Size', /** Label of a table column that identifies a tap target (like a link or button) that overlaps with another tap target. */ overlappingTargetHeader: 'Overlapping Target', /** Explanatory message stating that there was a failure in an audit caused by the viewport meta tag not being optimized for mobile screens, which caused tap targets like buttons and links to be too small to tap on. */ @@ -303,7 +301,7 @@ class TapTargets extends Audit { /** @type {LH.Audit.Details.Table['headings']} */ const headings = [ {key: 'tapTarget', itemType: 'node', text: str_(UIStrings.tapTargetHeader)}, - {key: 'size', itemType: 'text', text: str_(UIStrings.sizeHeader)}, + {key: 'size', itemType: 'text', text: str_(i18n.UIStrings.columnSize)}, {key: 'overlappingTarget', itemType: 'node', text: str_(UIStrings.overlappingTargetHeader)}, ]; diff --git a/lighthouse-core/audits/user-timings.js b/lighthouse-core/audits/user-timings.js index 902c346381d2..9967e99e54c2 100644 --- a/lighthouse-core/audits/user-timings.js +++ b/lighthouse-core/audits/user-timings.js @@ -21,8 +21,6 @@ const UIStrings = { =1 {1 user timing} other {# user timings} }`, - /** Label for the Name column in the User Timing event data table. User Timing API entries are added by the developer of the web page. An example user timing event name: 'pageload_logoimage_done' */ - columnName: 'Name', /** Label for the Type column in the User Timing event data table. User Timing API entries are added by the developer of the web page. The only possible types are 'Mark' and Measure'. */ columnType: 'Type', /** Label for the Start Time column in the User Timing event data table. User Timing API entries are added by the developer of the web page. Start Times are the number of milliseconds since the page started loading, e.g. '380.26 ms' */ @@ -96,7 +94,7 @@ class UserTimings extends Audit { /** @type {LH.Audit.Details.Table['headings']} */ const headings = [ - {key: 'name', itemType: 'text', text: str_(UIStrings.columnName)}, + {key: 'name', itemType: 'text', text: str_(i18n.UIStrings.columnName)}, {key: 'timingType', itemType: 'text', text: str_(UIStrings.columnType)}, {key: 'startTime', itemType: 'ms', granularity: 0.01, text: str_(UIStrings.columnStartTime)}, diff --git a/lighthouse-core/audits/uses-rel-preconnect.js b/lighthouse-core/audits/uses-rel-preconnect.js index 7ec30b105b4c..52db3743a922 100644 --- a/lighthouse-core/audits/uses-rel-preconnect.js +++ b/lighthouse-core/audits/uses-rel-preconnect.js @@ -29,7 +29,10 @@ const UIStrings = { description: 'Consider adding preconnect or dns-prefetch resource hints to establish early ' + `connections to important third-party origins. [Learn more](https://developers.google.com/web/fundamentals/performance/resource-prioritization#preconnect).`, - /** A warning message that is shown when the user tried to follow the advice of the audit, but it's not working as expected. Forgetting to set the `crossorigin` HTML attribute, or setting it to an incorrect value, on the link is a common mistake when adding preconnect links. */ + /** + * @description A warning message that is shown when the user tried to follow the advice of the audit, but it's not working as expected. Forgetting to set the `crossorigin` HTML attribute, or setting it to an incorrect value, on the link is a common mistake when adding preconnect links. + * @example {https://example.com} securityOrigin + * */ crossoriginWarning: 'A preconnect was found for "{securityOrigin}" but was not used ' + 'by the browser. Check that you are using the `crossorigin` attribute properly.', }; diff --git a/lighthouse-core/audits/uses-rel-preload.js b/lighthouse-core/audits/uses-rel-preload.js index 1c602b4d6853..767232e9b91f 100644 --- a/lighthouse-core/audits/uses-rel-preload.js +++ b/lighthouse-core/audits/uses-rel-preload.js @@ -18,9 +18,12 @@ const UIStrings = { /** Imperative title of a Lighthouse audit that tells the user to use to initiate important network requests earlier during page load. This is displayed in a list of audit titles that Lighthouse generates. */ title: 'Preload key requests', /** Description of a Lighthouse audit that tells the user *why* they should preload important network requests. The associated network requests are started halfway through pageload (or later) but should be started at the beginning. This is displayed after a user expands the section to see more. No character length limits. '' is the html code the user would include in their page and shouldn't be translated. 'Learn More' becomes link text to additional documentation. */ - description: 'Consider using to prioritize fetching resources that are ' + + description: 'Consider using `` to prioritize fetching resources that are ' + 'currently requested later in page load. [Learn more](https://developers.google.com/web/tools/lighthouse/audits/preload).', - /** A warning message that is shown when the user tried to follow the advice of the audit, but it's not working as expected. Forgetting to set the `crossorigin` HTML attribute, or setting it to an incorrect value, on the link is a common mistake when adding preload links. */ + /** + * @description A warning message that is shown when the user tried to follow the advice of the audit, but it's not working as expected. Forgetting to set the `crossorigin` HTML attribute, or setting it to an incorrect value, on the link is a common mistake when adding preload links. + * @example {https://example.com} preloadURL + * */ crossoriginWarning: 'A preload was found for "{preloadURL}" but was not used ' + 'by the browser. Check that you are using the `crossorigin` attribute properly.', }; diff --git a/lighthouse-core/lib/i18n/README.md b/lighthouse-core/lib/i18n/README.md index c7ed6e91c458..35c61af0a711 100644 --- a/lighthouse-core/lib/i18n/README.md +++ b/lighthouse-core/lib/i18n/README.md @@ -19,8 +19,8 @@ The collection and translation pipeline: +----------------------------| | | lighthouse-core/lib/i18n/locales/*.json |-<+ +---------------------------+ | | || | | | +----------------------------------------------| | - | | +---------------------------------------------+ | - $ yarn i18n +--------------------+ | + $ yarn | | +---------------------------------------------+ | + i18n:collect-strings +--------------------+ | | | v ▐ ▐ +---------------+ | +------------+------+ ▐ Google TC Pipeline ▐ +->| *.ctc.json |---+ @@ -36,7 +36,7 @@ To a typical developer, the pipeline looks like this: ```shell # collect UIStrings and bake the en-US & en-XL locales -$ yarn i18n +$ yarn i18n:collect-strings # Test to see that the new translations are valid and apply to all strings $ node lighthouse-core/scripts/build-report-for-autodeployment.js && open dist/xl-accented/index.html @@ -50,7 +50,7 @@ Note: Why do `en-US` and `en-XL` get baked early? We write all our strings in ` ```shell # collect UIStrings (to make sure everything is up to date) -$ yarn i18n +$ yarn i18n:collect-strings # Extract the CTC format files to translation console $ sh import-source-from-github.sh @@ -69,10 +69,6 @@ See [Appendix A: How runtime string replacement works](#appendix) # Writing UIStrings with LHL -❗TODO(exterkamp): explain all the comments and where they go/what they become. - -❗TODO(exterkamp): explain why we can't use some ICU like number formatting. - We want to keep strings close to the code in which they are used so that developers can easily understand their context. We use `i18n.js` to extract the `UIStrings` strings from individual js files. LHL strings in each module are defined in a `UIStrings` object with the strings as its properties. JSDoc is sometimes used to provide additional information about each string. @@ -107,13 +103,13 @@ ICU replacements must use a JSDoc-like syntax to specify an example for direct I * To specify the description, use `@description …`: * `@description Label string used to…` * To specify an example for an ICU replacement, use `@example {…} …`: - * `@example {variableName} This is an example ICU replacement` + * `@example {This is an example ICU replacement} variableName` ```javascript const UIStrings = { /** * @description Error message explaining ... - * @example {errorCode} NO_SPEEDLINE_FRAMES + * @example {NO_SPEEDLINE_FRAMES} errorCode */ didntCollectScreenshots: `Chrome didn't .... ({errorCode})`, }; @@ -123,7 +119,7 @@ const UIStrings = { `{timeInMs, number, milliseconds}` is called _Complex ICU_ since the replacement is for numbers and other complex replacements that use the custom formatters in Lighthouse. The supported complex ICU formats are: `milliseconds`, `seconds`, `bytes`, `percent`, and `extendedPercent`. -These complex ICU formats are automatically given @example values during `yarn i18n`. Therefore, a normal description string can be used: +These complex ICU formats are automatically given @example values during `yarn i18n:collect-strings`. Therefore, a normal description string can be used: ```javascript const UIStrings = { @@ -143,6 +139,8 @@ displayValue: `{itemCount, plural, }`, ``` +Note: Why are direct ICU and complex ICU placeholdered out, but Ordinals are not? Direct and complex ICU should not contain elements that need to be translated (Direct ICU replaces universal proper nouns, and Complex ICU replaces number formatting), while ordinals do need to be translated. Ordinals and selects are therefore handled specially, and do not need to be placeholdered out. + ### Selects A select ICU message is used when the message should select a sub-message based on the value of a variable `pronoun` in this case. This is often used for gender based selections, but can be used for any enum. Lighthouse does not use selects very often. @@ -280,4 +278,3 @@ CTC is a name that is distinct and identifies this as the Chrome translation for ```javascript message = "Total size was 10 KB" ``` - diff --git a/lighthouse-core/lib/i18n/en-US.json b/lighthouse-core/lib/i18n/en-US.json deleted file mode 100644 index 18aac00f8c27..000000000000 --- a/lighthouse-core/lib/i18n/en-US.json +++ /dev/null @@ -1,1862 +0,0 @@ -{ - "lighthouse-core/audits/accessibility/accesskeys.js | description": { - "message": "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/3.1/accesskeys?application=lighthouse).", - "description": "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." - }, - "lighthouse-core/audits/accessibility/accesskeys.js | failureTitle": { - "message": "`[accesskey]` values are not unique", - "description": "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 title is descriptive of the failing state and is shown to users when there is a failure that needs to be addressed." - }, - "lighthouse-core/audits/accessibility/accesskeys.js | title": { - "message": "`[accesskey]` values are unique", - "description": "Title of an accesibility audit that evaluates if the accesskey HTML attribute values are unique across all elements. This title is descriptive of the successful state and is shown to users when no user action is required." - }, - "lighthouse-core/audits/accessibility/aria-allowed-attr.js | description": { - "message": "Each ARIA `role` supports a specific subset of `aria-*` attributes. Mismatching these invalidates the `aria-*` attributes. [Learn more](https://dequeuniversity.com/rules/axe/3.1/aria-allowed-attr?application=lighthouse).", - "description": "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." - }, - "lighthouse-core/audits/accessibility/aria-allowed-attr.js | failureTitle": { - "message": "`[aria-*]` attributes do not match their roles", - "description": "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 title is descriptive of the failing state and is shown to users when there is a failure that needs to be addressed." - }, - "lighthouse-core/audits/accessibility/aria-allowed-attr.js | title": { - "message": "`[aria-*]` attributes match their roles", - "description": "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 title is descriptive of the successful state and is shown to users when no user action is required." - }, - "lighthouse-core/audits/accessibility/aria-required-attr.js | description": { - "message": "Some ARIA roles have required attributes that describe the state of the element to screen readers. [Learn more](https://dequeuniversity.com/rules/axe/3.1/aria-required-attr?application=lighthouse).", - "description": "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." - }, - "lighthouse-core/audits/accessibility/aria-required-attr.js | failureTitle": { - "message": "`[role]`s do not have all required `[aria-*]` attributes", - "description": "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 title is descriptive of the failing state and is shown to users when there is a failure that needs to be addressed." - }, - "lighthouse-core/audits/accessibility/aria-required-attr.js | title": { - "message": "`[role]`s have all required `[aria-*]` attributes", - "description": "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 title is descriptive of the successful state and is shown to users when no user action is required." - }, - "lighthouse-core/audits/accessibility/aria-required-children.js | description": { - "message": "Some ARIA parent roles must contain specific child roles to perform their intended accessibility functions. [Learn more](https://dequeuniversity.com/rules/axe/3.1/aria-required-children?application=lighthouse).", - "description": "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." - }, - "lighthouse-core/audits/accessibility/aria-required-children.js | failureTitle": { - "message": "Elements with `[role]` that require specific children `[role]`s, are missing.", - "description": "Title of an accesibility audit that evaluates if the elements with an aria-role that require child elements have the required children. This title is descriptive of the failing state and is shown to users when there is a failure that needs to be addressed." - }, - "lighthouse-core/audits/accessibility/aria-required-children.js | title": { - "message": "Elements with `[role]` that require specific children `[role]`s, are present", - "description": "Title of an accesibility audit that evaluates if the elements with an aria-role that require child elements have the required children. This title is descriptive of the successful state and is shown to users when no user action is required." - }, - "lighthouse-core/audits/accessibility/aria-required-parent.js | description": { - "message": "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/3.1/aria-required-parent?application=lighthouse).", - "description": "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." - }, - "lighthouse-core/audits/accessibility/aria-required-parent.js | failureTitle": { - "message": "`[role]`s are not contained by their required parent element", - "description": "Title of an accesibility audit that evaluates valid aria-role usage. Some ARIA roles require that elements must be a child of specific parent element. This audit checks that when those roles are used, the element with the role is in fact a child of the required parent. This title is descriptive of the failing state and is shown to users when there is a failure that needs to be addressed." - }, - "lighthouse-core/audits/accessibility/aria-required-parent.js | title": { - "message": "`[role]`s are contained by their required parent element", - "description": "Title of an accesibility audit that evaluates valid aria-role usage. Some ARIA roles require that elements must be a child of specific parent element. This audit checks that when those roles are used, the element with the role is in fact a child of the required parent. This title is descriptive of the successful state and is shown to users when no user action is required." - }, - "lighthouse-core/audits/accessibility/aria-roles.js | description": { - "message": "ARIA roles must have valid values in order to perform their intended accessibility functions. [Learn more](https://dequeuniversity.com/rules/axe/3.1/aria-roles?application=lighthouse).", - "description": "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." - }, - "lighthouse-core/audits/accessibility/aria-roles.js | failureTitle": { - "message": "`[role]` values are not valid", - "description": "Title of an accesibility audit that evaluates if all elements have valid aria-role HTML attributes. This title is descriptive of the failing state and is shown to users when there is a failure that needs to be addressed." - }, - "lighthouse-core/audits/accessibility/aria-roles.js | title": { - "message": "`[role]` values are valid", - "description": "Title of an accesibility audit that evaluates if all elements have valid aria-role HTML attributes. This title is descriptive of the successful state and is shown to users when no user action is required." - }, - "lighthouse-core/audits/accessibility/aria-valid-attr-value.js | description": { - "message": "Assistive technologies, like screen readers, can't interpret ARIA attributes with invalid values. [Learn more](https://dequeuniversity.com/rules/axe/3.1/aria-valid-attr-value?application=lighthouse).", - "description": "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." - }, - "lighthouse-core/audits/accessibility/aria-valid-attr-value.js | failureTitle": { - "message": "`[aria-*]` attributes do not have valid values", - "description": "Title of an accesibility audit that evaluates if all elements that have an ARIA HTML attribute have a valid value for that attribute. This title is descriptive of the failing state and is shown to users when there is a failure that needs to be addressed." - }, - "lighthouse-core/audits/accessibility/aria-valid-attr-value.js | title": { - "message": "`[aria-*]` attributes have valid values", - "description": "Title of an accesibility audit that evaluates if all elements that have an ARIA HTML attribute have a valid value for that attribute. This title is descriptive of the successful state and is shown to users when no user action is required." - }, - "lighthouse-core/audits/accessibility/aria-valid-attr.js | description": { - "message": "Assistive technologies, like screen readers, can't interpret ARIA attributes with invalid names. [Learn more](https://dequeuniversity.com/rules/axe/3.1/aria-valid-attr?application=lighthouse).", - "description": "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." - }, - "lighthouse-core/audits/accessibility/aria-valid-attr.js | failureTitle": { - "message": "`[aria-*]` attributes are not valid or misspelled", - "description": "Title of an accesibility audit that evaluates if all elements with ARIA HTML attributes have spelled the name of attribute correctly. This title is descriptive of the failing state and is shown to users when there is a failure that needs to be addressed." - }, - "lighthouse-core/audits/accessibility/aria-valid-attr.js | title": { - "message": "`[aria-*]` attributes are valid and not misspelled", - "description": "Title of an accesibility audit that evaluates if all elements with ARIA HTML attributes have spelled the name of attribute correctly. This title is descriptive of the successful state and is shown to users when no user action is required." - }, - "lighthouse-core/audits/accessibility/audio-caption.js | description": { - "message": "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/3.1/audio-caption?application=lighthouse).", - "description": "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." - }, - "lighthouse-core/audits/accessibility/audio-caption.js | failureTitle": { - "message": "`