[Nearby] Improve a11y on send confirmation page, discovery page

- Give error divs role=alert so that errors get announced.
- Make progress wheel accessible by setting role=progressbar and
  and providing progress via aria-valuenow. Set tabindex=0 during
  progress so that it can be focused and the percentage read.
- Add a label for the device name.
- Make the confirmation token an aria-live region so it gets read when
  it shows up.
- Hide the add contact section when the error section is visible to
  prevent overflow. (Add contact isn't implemented yet -- the elements
  are on the page, but they're never visible.)

Bug: 1148475
Change-Id: I49cbcb8c7930a3eddad042ce1ea5389306a6d067
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2569897Reviewed-by: Kyle Horimoto <khorimoto@chromium.org>
Reviewed-by: James Vecore <vecore@google.com>
Commit-Queue: Curt Clemens <cclem@google.com>
Cr-Commit-Position: refs/heads/master@{#833745}

chrome/browser/resources/nearby_share/nearby_confirmation_page.html

 <style>
   #addContacts {
-    margin-top: 32px;
+    padding: 8px;
   }
 
   #addContactsLabel {
@@ -93,7 +93,7 @@
         <nearby-preview send-preview="[[sendPreview]]"
             disabled="[[errorTitle_]]">
         </nearby-preview>
-        <div id="confirmationToken">
+        <div id="confirmationToken" aria-live="polite">
           <template is="dom-if" if="[[confirmationToken_]]">
             [[i18n('nearbyShareSecureConnectionId', confirmationToken_)]]
           </template>
@@ -104,12 +104,13 @@
       </div>
     </div>
 
-    <template is="dom-if" if="[[contactName_(shareTarget)]]">
-      <cr-checkbox id="addContacts">
-        <div id="addContactsLabel">
+    <template is="dom-if" if="[[contactName_(shareTarget, errorTitle_)]]">
+      <cr-checkbox id="addContacts" aria-labelledby="addContactsLabel"
+          aria-describedby="addContactsLabelSecondary">
+        <div id="addContactsLabel" aria-hidden="true">
           [[contactName_(shareTarget)]]
         </div>
-        <div id="addContactsLabelSecondary">
+        <div id="addContactsLabelSecondary" aria-hidden="true">
           [[i18n('nearbyShareConfirmationPageAddContactSubtitle')]]
         </div>
       </cr-checkbox>
@@ -119,9 +120,12 @@
     <template is="dom-if" if="[[errorTitle_]]">
       <div id="errorSection">
         <iron-icon id="errorIcon" icon="nearby20:info"></iron-icon>
-        <div id="error">
-          <div id="errorTitle">[[errorTitle_]]</div>
-          <div id="errorDescription">[[errorDescription_]]</div>
+        <div id="error" role="alert" aria-labelledby="errorTitle"
+            aria-describedby="errorDescription">
+          <div id="errorTitle" aria-hidden="true">[[errorTitle_]]</div>
+          <div id="errorDescription" aria-hidden="true">
+            [[errorDescription_]]
+          </div>
         </div>
       </div>
     </template>

chrome/browser/resources/nearby_share/nearby_confirmation_page.js

@@ -213,7 +213,7 @@ Polymer({
   contactName_() {
     // TODO(crbug.com/1123943): Get contact name from ShareTarget.
     const contactName = null;
-    if (!contactName) {
+    if (!contactName || this.errorTitle_) {
       return '';
     }
     return this.i18n('nearbyShareConfirmationPageAddContactTitle', contactName);

chrome/browser/resources/nearby_share/nearby_discovery_page.html

@@ -160,9 +160,12 @@
     <template is="dom-if" if="[[errorTitle_]]">
       <div id="errorSection">
         <iron-icon id="errorIcon" icon="nearby20:info"></iron-icon>
-        <div id="error">
-          <div id="errorTitle">[[errorTitle_]]</div>
-          <div id="errorDescription">[[errorDescription_]]</div>
+        <div id="error" role="alert" aria-labelledby="errorTitle"
+            aria-describedby="errorDescription">
+          <div id="errorTitle" aria-hidden="true">[[errorTitle_]]</div>
+          <div id="errorDescription" aria-hidden="true">
+            [[errorDescription_]]
+          </div>
         </div>
       </div>
     </template>

chrome/browser/resources/nearby_share/nearby_progress.html

@@ -89,7 +89,9 @@
   }
 </style>
 
-<div id="progress-container"
+<div id="progress-container" role="progressbar" aria-valuemin="0"
+    aria-valuemax="100" aria-valuenow$="[[progress]]"
+    tabindex$="[[getProgressBarTabIndex_(progress)]]"
     class$="[[getProgressWheelClass_(progress, hasError)]]">
   <!-- This svg is inlined so that it can be styled with css; otherwise,
        it would be better to put it in an iron-icon. -->
@@ -101,4 +103,6 @@
   <nearby-device-icon id="icon" share-target="[[shareTarget]]">
   </nearby-device-icon>
 </div>
-<div id="device-name">[[shareTarget.name]]</div>
+<div id="device-name" aria-label="$i18n{nearbyShareOnboardingPageDeviceName}">
+  [[shareTarget.name]]
+</div>

chrome/browser/resources/nearby_share/nearby_progress.js

@@ -78,4 +78,15 @@ Polymer({
       this.updateStyles({'--progress-percentage': value});
     }
   },
+
+  /**
+   * Allow focusing on the progress bar. Ignored by Chromevox otherwise.
+   * @return {number} The tabindex to be applied to the progress wheel.
+   */
+  getProgressBarTabIndex_() {
+    if (this.progress && !this.hasError) {
+      return 0;
+    }
+    return -1;
+  },
 });

chrome/test/data/webui/nearby_share/nearby_confirmation_page_test.js

@@ -95,7 +95,7 @@ suite('ConfirmatonPageTest', function() {
     };
     const renderedName = confirmationPageElement.$$('nearby-progress')
                              .$$('#device-name')
-                             .textContent;
+                             .innerText;
     assertEquals(name, renderedName);
   });
 

chrome/test/data/webui/nearby_share/nearby_progress_test.js

@@ -38,7 +38,7 @@ suite('ProgressTest', function() {
     });
     progressElement.shareTarget = shareTarget;
 
-    const renderedName = progressElement.$$('#device-name').textContent;
+    const renderedName = progressElement.$$('#device-name').innerText;
     assertEquals(name, renderedName);
   });
 });