[Nearby] Update subpage visibility text and fix dialog a11y.

Update device visibility button text in Nearby settings subpage.
Fix 'try again' link a11y in Nearby settings subpage dialog so
that the entire message is read out by ChromeVox when the link
is focused, rather than just the text of the link.

Fixed: 1154718, 1156777
Change-Id: I6594bcef97263e1f529112d1d9d5779fa66436a4
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2575885Reviewed-by: Kyle Horimoto <khorimoto@chromium.org>
Reviewed-by: James Vecore <vecore@google.com>
Commit-Queue: Gordon Seto <gordonseto@google.com>
Cr-Commit-Position: refs/heads/master@{#834958}

chrome/app/nearby_share_strings.grdp

@@ -14,7 +14,7 @@
 
   <!-- Contact visibility component -->
   <message name="IDS_NEARBY_CONTACT_VISIBILITY_DOWNLOAD_FAILED" desc="Message shown when downloading contacts failed when trying to load contacts to show the user a list of who they will be able to share with.">
-      Unable to download contact list. Please check your network connection, or &lt;a href="#" id="tryAgainLink"&gt;try again&lt;/a&gt;.
+      Unable to download contact list. Please check your network connection, or <ph name="LINK_BEGIN">&lt;a&gt;</ph>try again<ph name="LINK_END">&lt;/a&gt;</ph>.
   </message>
   <message name="IDS_NEARBY_CONTACT_VISIBILITY_DOWNLOADING" desc="Message shown when contacts are being downloaded to show the user a list of who they will be able to share with.">
     Downloading contact list...

chrome/app/nearby_share_strings_grdp/IDS_NEARBY_CONTACT_VISIBILITY_DOWNLOAD_FAILED.png.sha1

-9904c5861c938fed7929997a10b3b3ebf74e3f75
+7311385562a11d2b530a450317e76be46a121443
\ No newline at end of file

chrome/app/shared_settings_strings.grdp

@@ -154,7 +154,7 @@
     Device visibility
   </message>
   <message name="IDS_SETTINGS_NEARBY_SHARE_EDIT_VISIBILITY" desc="Label for the button that opens the dialog which allows a user to set their preference for the visibility of their device with their contacts for the Nearby Share feature.">
-    View device visibility
+    Change visibility
   </message>
   <message name="IDS_SETTINGS_NEARBY_SHARE_VISIBILITY_DIALOG_TITLE" desc="Title for the dialog which allows a user to set their preference for the visibility of their device with their contacts for the Nearby Share feature.">
     Device visibility

chrome/app/shared_settings_strings_grdp/IDS_SETTINGS_NEARBY_SHARE_EDIT_VISIBILITY.png.sha1

-1ab039c9f2960ce64f40f57e7c096124d91e1b07
+ecb4065349ab3a22321096d5d579c667c31680f8
\ No newline at end of file

chrome/browser/resources/nearby_share/nearby_discovery_page.js

@@ -351,6 +351,7 @@ Polymer({
    * and setting the href of the link to |linkUrl|. This function is largely
    * copied from getAriaLabelledContent_ in <settings-localized-link>, which
    * can't be used directly because this isn't part of settings.
+   * TODO(crbug.com/1154718): Extract this logic into a general method.
    * @param {string} linkUrl
    * @return {string}
    * @private

chrome/browser/resources/nearby_share/shared/nearby_contact_visibility.html

@@ -309,9 +309,7 @@
           <iron-icon id="contactsFailedImage"
               icon="nearby-images:contacts-download-failed">
           </iron-icon>
-          <div>
-            $i18nRaw{nearbyShareContactVisibilityDownloadFailed}
-          </div>
+          <div id="contactsFailedMessage"></div>
         </div>
       </template>
 

chrome/browser/resources/nearby_share/shared/nearby_contact_visibility.js

@@ -423,19 +423,66 @@ Polymer({
   },
 
   /**
-   * Because the "failed" state contains an i18n string with a link in it, we
-   * need to add an event listener. We do that here because the link doesn't
-   * exist when the dialog loads, only once the template is added to the DOM.
+   * Builds the html for the download retry message, applying the appropriate
+   * aria labels, and adding an event listener to the link. This function is
+   * largely copied from getAriaLabelledHelpText_ in <nearby-discovery-page>,
+   * and should be generalized in the future. We do this here because the div
+   * doesn't exist when the dialog loads, only once the template is added to the
+   * DOM.
+   * TODO(crbug.com/1154718): Extract this logic into a general method.
    *
    * @private
    */
   domChangeDownloadFailed_() {
-    const tryAgainLink = this.$$('#tryAgainLink');
-    if (!tryAgainLink) {
+    const contactsFailedMessage = this.$$('#contactsFailedMessage');
+    if (!contactsFailedMessage) {
       return;
     }
+    const localizedString =
+        this.i18nAdvanced('nearbyShareContactVisibilityDownloadFailed');
+    contactsFailedMessage.innerHTML = localizedString;
+
+    const ariaLabelledByIds = [];
+    contactsFailedMessage.childNodes.forEach((node, index) => {
+      // Text nodes should be aria-hidden and associated with an element id
+      // that the anchor element can be aria-labelledby.
+      if (node.nodeType == Node.TEXT_NODE) {
+        const spanNode = document.createElement('span');
+        spanNode.textContent = node.textContent;
+        spanNode.id = `contactsFailedMessage${index}`;
+        ariaLabelledByIds.push(spanNode.id);
+        spanNode.setAttribute('aria-hidden', true);
+        node.replaceWith(spanNode);
+        return;
+      }
+      // The single element node with anchor tags should also be aria-labelledby
+      // itself in-order with respect to the entire string.
+      if (node.nodeType == Node.ELEMENT_NODE && node.nodeName == 'A') {
+        node.id = `tryAgainLink`;
+        ariaLabelledByIds.push(node.id);
+        return;
+      }
+
+      // Only text and <a> nodes are allowed.
+      assertNotReached(
+          'nearbyShareContactVisibilityDownloadFailed has invalid node types');
+    });
+
+    const anchorTags = contactsFailedMessage.getElementsByTagName('a');
+    // In the event the localizedString contains only text nodes, populate the
+    // contents with the localizedString.
+    if (anchorTags.length == 0) {
+      contactsFailedMessage.innerHTML = localizedString;
+      return;
+    }
+
+    assert(
+        anchorTags.length == 1, 'string should contain exactly one anchor tag');
+    const anchorTag = anchorTags[0];
+    anchorTag.setAttribute('aria-labelledby', ariaLabelledByIds.join(' '));
+    anchorTag.href = '#';
 
-    tryAgainLink.addEventListener('click', event => {
+    anchorTag.addEventListener('click', event => {
       event.preventDefault();
       this.downloadContacts_();
     });

chrome/test/data/webui/nearby_share/shared/nearby_contact_visibility_test.js

@@ -3,6 +3,7 @@
 // found in the LICENSE file.
 
 // clang-format off
+// #import 'chrome://nearby/strings.m.js';
 // #import 'chrome://nearby/shared/nearby_contact_visibility.m.js';
 // #import {setContactManagerForTesting} from 'chrome://nearby/shared/nearby_contact_manager.m.js';
 // #import {setNearbyShareSettingsForTesting} from 'chrome://nearby/shared/nearby_share_settings.m.js';