i18n: use placeholders more for html terms

lighthouse-cli/test/smokehouse/test-definitions/forms/form-expectations.js

@@ -414,12 +414,12 @@ const expectations = [
         autocomplete: {
           score: 0,
           warnings: [
-            'Autocomplete token(s): "sectio-red shipping cc-namez" is invalid in <textarea type="text" id="name_cc1" name="name_cc1" autocomplete="sectio-red shipping cc-namez" placeholder="John Doe">',
-            'Autocomplete token(s): "shippin street-address" is invalid in <input type="text" id="address_shipping" autocomplete="shippin street-address" placeholder="Your address">',
-            'Autocomplete token(s): "mobile section-red shipping address-level2" is invalid in <input type="text" id="city_shipping" placeholder="city you live" autocomplete="mobile section-red shipping address-level2">',
+            '`autocomplete` token(s): "sectio-red shipping cc-namez" is invalid in <textarea type="text" id="name_cc1" name="name_cc1" autocomplete="sectio-red shipping cc-namez" placeholder="John Doe">',
+            '`autocomplete` token(s): "shippin street-address" is invalid in <input type="text" id="address_shipping" autocomplete="shippin street-address" placeholder="Your address">',
+            '`autocomplete` token(s): "mobile section-red shipping address-level2" is invalid in <input type="text" id="city_shipping" placeholder="city you live" autocomplete="mobile section-red shipping address-level2">',
             'Review order of tokens: "mobile section-red shipping address-level2" in <input type="text" id="city_shipping" placeholder="city you live" autocomplete="mobile section-red shipping address-level2">',
-            'Autocomplete token(s): "sectio-red billing name" is invalid in <input type="text" id="name_billing" name="name_billing" placeholder="your name" autocomplete="sectio-red billing name">',
-            'Autocomplete token(s): "section-red shipping " is invalid in <input type="text" id="city_billing" name="city_billing" placeholder="city you live in" autocomplete="section-red shipping ">',
+            '`autocomplete` token(s): "sectio-red billing name" is invalid in <input type="text" id="name_billing" name="name_billing" placeholder="your name" autocomplete="sectio-red billing name">',
+            '`autocomplete` token(s): "section-red shipping " is invalid in <input type="text" id="city_billing" name="city_billing" placeholder="city you live in" autocomplete="section-red shipping ">',
           ],
           details: {
             items: [

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

@@ -31,22 +31,24 @@ const UIStrings = {
   /** Description of a Lighthouse audit that tells the user how to connect early to third-party domains that will be used to load page resources. 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:
     'Consider adding `preconnect` or `dns-prefetch` resource hints to establish early ' +
-    `connections to important third-party origins. [Learn more](https://web.dev/uses-rel-preconnect/).`,
+    'connections to important third-party origins. ' +
+    '[Learn more](https://web.dev/uses-rel-preconnect/).',
   /**
    * @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 ' +
-    'by the browser. Check that you are using the `crossorigin` attribute properly.',
+  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>` connections were found. ' +
+   'These should be used sparingly and only to the most important origins.',
 };
 
 const str_ = i18n.createMessageInstanceIdFn(__filename, UIStrings);