i18n: use placeholders more for html terms

lighthouse-core/audits/autocomplete.js

@@ -18,24 +18,24 @@ const log = require('lighthouse-logger');
 
 const UIStrings = {
   /** Title of a Lighthouse audit that lets the user know if there are any missing or invalid autocomplete attributes on page inputs. This descriptive title is shown to users when all input attributes have a valid autocomplete attribute. */
-  title: 'Input elements use autocomplete',
+  title: '`<input>` elements correctly use `autocomplete`',
   /** Title of a Lighthouse audit that lets the user know if there are any missing or invalid autocomplete attributes on page inputs. This descriptive title is shown to users when one or more inputs do not have autocomplete set or has an invalid autocomplete set. */
-  failureTitle: 'Input elements do not have correct attributes for autocomplete',
+  failureTitle: '`<input>` elements do not have correct `autocomplete` attributes',
   /** Description of a Lighthouse audit that lets the user know if there are any missing or invalid autocomplete attributes on page inputs. 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: 'Autocomplete helps users submit forms quicker. To reduce user ' +
-   'effort, consider enabling autocomplete by setting the `autocomplete` ' +
+  description: '`autocomplete` helps users submit forms quicker. To reduce user ' +
+   'effort, consider enabling by setting the `autocomplete` ' +
    'attribute to a valid value.' +
   ' [Learn more](https://developers.google.com/web/fundamentals/design-and-ux/input/forms#use_metadata_to_enable_auto-complete)',
   /** Label for a column in a data table; entries will be the autocomplete token suggestions based on heuristics. */
-  columnSuggestions: 'Autocomplete Suggested Token',
+  columnSuggestions: 'Suggested Token',
   /** Label for a column in a data table; entries will be the incorrect optional autocomplete tokens or prompting user to review them. */
-  columnCurrent: 'Autocomplete Current Value',
+  columnCurrent: 'Current Value',
   /**
    * @description Warning that autocomplete token is invalid.
    * @example {invalid-token name} token
    * @example {<autocomplete="invalid-token name">} snippet
    */
-  warningInvalid: 'Autocomplete token(s): "{token}" is invalid in {snippet}',
+  warningInvalid: '`autocomplete` token(s): "{token}" is invalid in {snippet}',
   /**
    * @description Warning that autocomplete token order is invalid.
    * @example {mobile section-red cc-name} tokens

lighthouse-core/audits/dobetterweb/charset.js

@@ -22,7 +22,7 @@ const UIStrings = {
   /** Title of a Lighthouse audit that provides detail on if the charset is set properly for a page. This title is shown when the charset meta tag is missing or defined too late in the page. */
   failureTitle: 'Charset declaration is missing or occurs too late in the HTML',
   /** Description of a Lighthouse audit that tells the user why the charset needs to be defined early on. */
-  description: 'A character encoding declaration is required. It can be done with a <meta> tag ' +
+  description: 'A character encoding declaration is required. It can be done with a `<meta>` tag ' +
     'in the first 1024 bytes of the HTML or in the Content-Type HTTP response header. ' +
     '[Learn more](https://web.dev/charset/).',
 };

lighthouse-core/audits/uses-rel-preconnect.js

@@ -36,17 +36,17 @@ const UIStrings = {
    * @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.
    * @example {https://example.com} securityOrigin
    * */
-  unusedWarning: 'A preconnect `<link>` was found for "{securityOrigin}" but was not used ' +
-    'by the browser. Only preconnect to important origins that the page will certainly request.',
+  unusedWarning: 'A `<link rel=preconnect>` was found for "{securityOrigin}" but was not used ' +
+    'by the browser. Only use `preconnect` for important origins that the page will certainly request.',
   /**
    * @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 `<link>` was found for "{securityOrigin}" but was not used ' +
+  crossoriginWarning: 'A `<link rel=preconnect>` was found for "{securityOrigin}" but was not used ' +
     'by the browser. Check that you are using the `crossorigin` attribute properly.',
   /** A warning message that is shown when found more than 2 preconnected links */
-  tooManyPreconnectLinksWarning: 'More than 2 preconnect links were found. ' +
-   'Preconnect links should be used sparingly and only to the most important origins.',
+  tooManyPreconnectLinksWarning: 'More than 2 `<link rel=preconnect>` directives were found. ' +
+   'These should be used sparingly and only to the most important origins.',
 };
 
 const str_ = i18n.createMessageInstanceIdFn(__filename, UIStrings);

lighthouse-core/test/results/sample_v2.json

@@ -3461,7 +3461,7 @@
     "charset": {
       "id": "charset",
       "title": "Charset declaration is missing or occurs too late in the HTML",
-      "description": "A character encoding declaration is required. It can be done with a <meta> tag in the first 1024 bytes of the HTML or in the Content-Type HTTP response header. [Learn more](https://web.dev/charset/).",
+      "description": "A character encoding declaration is required. It can be done with a `<meta>` tag in the first 1024 bytes of the HTML or in the Content-Type HTTP response header. [Learn more](https://web.dev/charset/).",
       "score": 0,
       "scoreDisplayMode": "binary"
     },