[Network Settings] Add aria labels for custom nameserver inputs.

This CL adds aria labels for the 4 custom name server input fields. The
fields will be announced as "Custom name server 1",
"Custom name server 2" etc.

Bug: 1005944
Change-Id: I79eb275d5ad3ca60b1f29ea04c455fd8258d7939
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1913880Reviewed-by: Kyle Horimoto <khorimoto@chromium.org>
Commit-Queue: Azeem Arshad <azeemarshad@chromium.org>
Cr-Commit-Position: refs/heads/master@{#714974}

chrome/app/settings_strings.grdp

@@ -2122,6 +2122,9 @@
     <message name="IDS_SETTINGS_INTERNET_NETWORK_NAMESERVERS_GOOGLE" desc="Settings > Internet > Network details: Label for setting Google name servers.">
       Google name servers
     </message>
+    <message name="IDS_SETTINGS_INTERNET_NETWORK_NAMESERVERS_INPUT_ACCESSIBILITY_LABEL" desc="Settings > Internet > Network details: Accessibility only label for custom nameserver input box.">
+      Custom nameserver <ph name="INPUT_INDEX">$1<ex>1</ex></ph>
+    </message>
     <message name="IDS_SETTINGS_INTERNET_NETWORK_PROXY_WPAD" desc="Settings > Internet > Network details: Web Proxy Auto Discovery (WPAD) label.">
       Web Proxy Auto Discovery URL:
     </message>

chrome/browser/ui/webui/chromeos/network_element_localized_strings_provider.cc

@@ -259,6 +259,8 @@ void AddDetailsLocalizedStrings(content::WebUIDataSource* html_source) {
        IDS_SETTINGS_INTERNET_NETWORK_NAMESERVERS_CUSTOM},
       {"networkNameserversGoogle",
        IDS_SETTINGS_INTERNET_NETWORK_NAMESERVERS_GOOGLE},
+      {"networkNameserversCustomInputA11yLabel",
+       IDS_SETTINGS_INTERNET_NETWORK_NAMESERVERS_INPUT_ACCESSIBILITY_LABEL},
       {"networkProxyWpad", IDS_SETTINGS_INTERNET_NETWORK_PROXY_WPAD},
       {"networkProxyWpadNone", IDS_SETTINGS_INTERNET_NETWORK_PROXY_WPAD_NONE},
       {"remove", IDS_REMOVE},

ui/webui/resources/cr_components/chromeos/network/network_nameservers.html

@@ -103,6 +103,7 @@
           <div class="property-box single-column two-line">
             <template is="dom-repeat" items="[[nameservers_]]">
               <cr-input id="nameserver[[index]]" value="[[item]]"
+                  aria-label="[[getCustomNameServerInputA11yLabel_(index)]]"
                   on-change="onValueChange_"
                   disabled="[[!canEditCustomNameServers_(nameserversType_,
                       managedProperties)]]">

ui/webui/resources/cr_components/chromeos/network/network_nameservers.js

@@ -323,4 +323,13 @@ Polymer({
   doNothing_: function(event) {
     event.stopPropagation();
   },
+
+  /**
+   * @param {number} index
+   * @return {string} Accessibility label for nameserver input with given index.
+   * @private
+   */
+  getCustomNameServerInputA11yLabel_: function(index) {
+    return this.i18n('networkNameserversCustomInputA11yLabel', index + 1);
+  },
 });