[Nearby] Add aria labels, adjust contrast ratio in onboarding flow

In the contact visibility dialog with "Some Contacts" selected, the
toggle list for picking individual contacts was missing aria labels
for the cr-toggle-buttons. Those are now added so that tabbing through
the list correctly announces what the toggles represent.

In the device name dialog, the help text underneath the cr-input had
low contrast. The color of that text is now darkened to google-grey-700
to push the contrast ratio up to ~6.5.

Fixed: 1165926, 1165977
Change-Id: I6a8c985ac9e264c0a4249cd314d28cc5e63c5a81
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2628076Reviewed-by: James Vecore <vecore@google.com>
Reviewed-by: Kyle Horimoto <khorimoto@chromium.org>
Commit-Queue: Curt Clemens <cclem@google.com>
Cr-Commit-Position: refs/heads/master@{#843597}

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

@@ -381,9 +381,18 @@
                       class="padded-icon grey-icon contact-icon">
                   </iron-icon>
                   <div class="contact-row">
-                    <div>
-                      <div class="cr-title-text elide">[[item.name]]</div>
-                      <div class="cr-secondary-text elide">
+                    <div aria-hidden$="[[getContactAriaHidden_(
+                                        selectedVisibility)]]"
+                        aria-labelledby$="contact-name-[[itemsIndex]]"
+                        aria-describedby$="contact-description-[[itemsIndex]]">
+                      <div id="contact-name-[[itemsIndex]]"
+                          class="cr-title-text elide"
+                          aria-hidden="true">
+                        [[item.name]]
+                      </div>
+                      <div id="contact-description-[[itemsIndex]]"
+                          class="cr-secondary-text elide"
+                          aria-hidden="true">
                         [[item.description]]
                       </div>
                     </div>
@@ -391,8 +400,10 @@
                         if="[[showContactCheckBoxes_(selectedVisibility)]]">
                       <cr-toggle class="contact-toggle"
                           checked="{{item.checked}}"
+                          aria-labelledby$="contact-name-[[itemsIndex]]"
+                          aria-describedby$="contact-description-[[itemsIndex]]"
                           disabled="[[!isVisibility_(
-                            selectedVisibility,'some')]]">
+                                    selectedVisibility,'some')]]">
                       </cr-toggle>
                     </template>
                   </div>

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

@@ -289,16 +289,26 @@ Polymer({
 
   /**
    * Used to show/hide parts of the UI based on current visibility selection.
-   * @param {?string} selectedVisibility
    * @return {boolean} returns true when checkboxes should be shown for
    *     contacts.
    * @private
    */
-  showContactCheckBoxes_(selectedVisibility) {
+  showContactCheckBoxes_() {
     return this.selectedVisibility === 'some' ||
         this.selectedVisibility === 'none';
   },
 
+  /**
+   * When the contact check boxes are visible, the contact name and description
+   * can be aria-hidden since they are used as labels for the checkbox.
+   * @return {string} Whether the contact name and description should be
+   *     aria-hidden. Boolean converted to string, "true" or "false".
+   * @private
+   */
+  getContactAriaHidden_() {
+    return this.showContactCheckBoxes_().toString();
+  },
+
   /**
    * Used to show/hide ui elements based on the contacts download state.
    * @param {string} contactsState

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

@@ -44,7 +44,7 @@
 
       #deviceNameHelp {
         bottom: 8px;
-        color: var(--google-grey-600);
+        color: var(--google-grey-700);
         font-size: 10px;
         line-height: 10px;
         margin-inline-start: 8px;