[CrOS PhoneHub] A11y fixes to Multidevice rows.

* Disconnect button is now a single chromevox stop.
* Feature title and labels are no longer chromevox stops. "Learn more"
  link is still a tab stop though, because it's actionable.
* Tooltip icon now announces tooltip content.

Fixed: 1163773
Bug: 1106937
Change-Id: I7e97743d53ccf55128e18f5210ac35350ac3b0bf
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2618521
Commit-Queue: Regan Hsu <hsuregan@chromium.org>
Reviewed-by: Kyle Horimoto <khorimoto@chromium.org>
Cr-Commit-Position: refs/heads/master@{#842886}

chrome/browser/resources/settings/chromeos/multidevice_page/multidevice_feature_item.html

@@ -45,10 +45,11 @@
                feature, pageContentData, subpageRoute)]]"
            on-click="handleItemClick_">
         <slot name="icon">
-          <iron-icon id="feature-icon" icon="[[getIconName(feature)]]">
+          <iron-icon id="feature-icon" icon="[[getIconName(feature)]]"
+              aria-hidden="true">
           </iron-icon>
         </slot>
-        <div id="item-text-container" class="middle">
+        <div id="item-text-container" class="middle" aria-hidden="true">
           <div id="featureName">[[getFeatureName(feature)]]</div>
           <slot name="feature-summary">
             <settings-localized-link
@@ -68,8 +69,11 @@
           </cr-icon-button>
         </template>
         <template is="dom-if" if="[[infoTooltip]]" restamp>
-          <iron-icon id="help-icon" icon="cr:help-outline"></iron-icon>
-          <paper-tooltip for="help-icon" position="top" fit-to-visible-bounds>
+          <iron-icon id="help-icon" tabindex="0" icon="cr:help-outline"
+              aria-labelledby="tooltip">
+          </iron-icon>
+          <paper-tooltip id="tooltip" for="help-icon" position="top"
+              aria-hidden="true" fit-to-visible-bounds>
             [[infoTooltip]]
           </paper-tooltip>
         </template>
@@ -86,12 +90,19 @@
           restamp>
         <cr-policy-indicator indicator-type="userPolicy"></cr-policy-indicator>
       </template>
-      <div class="margin-matches-padding">
+      <div class="margin-matches-padding" aria-labelledby="featureName"
+          aria-describedby="featureSecondary">
+        <!-- The aria-labelledby and aria-describedby are used by custom slotted
+        content, without which ChromeVox will not announce the #featureName
+        or #featureSummary. Note that the default slotted content still needs
+        their own aria-labelledby and aria-describedby attributes. -->
         <slot name="feature-controller">
           <!-- This settings-multidevice-feature-toggle is the default
           controller. If an element with slot="feature-controller" is attached,
           it will replace this one. -->
           <settings-multidevice-feature-toggle
+              aria-labelledby="featureName"
+              aria-describedby="featureSecondary"
               feature="[[feature]]"
               page-content-data="[[pageContentData]]">
           </settings-multidevice-feature-toggle>

chrome/browser/resources/settings/chromeos/multidevice_page/multidevice_subpage.html

@@ -152,17 +152,18 @@
       </div>
     </template>
     <div class="settings-box two-line">
-        <div id="forget-device-label" class="start">
-            $i18n{multideviceForgetDevice}
-            <div class="secondary">
-                $i18n{multideviceForgetDeviceSummary}
-            </div>
+      <div id="forgetDeviceLabel" class="start" aria-hidden="true">
+        $i18n{multideviceForgetDevice}
+        <div id="forgetDeviceSummary" class="secondary" aria-hidden="true">
+            $i18n{multideviceForgetDeviceSummary}
         </div>
-        <cr-button on-click="handleForgetDeviceClick_"
+      </div>
+      <cr-button on-click="handleForgetDeviceClick_"
           aria-labelledby="forgetDeviceLabel"
+          aria-describedby="forgetDeviceSummary"
           deep-link-focus-id$="[[Setting.kForgetPhone]]">
-           $i18n{multideviceForgetDeviceDisconnect}
-        </cr-button>
+        $i18n{multideviceForgetDeviceDisconnect}
+      </cr-button>
     </div>
     <cr-dialog id="forgetDeviceDialog">
       <div slot="title">$i18n{multideviceForgetDevice}</div>

chrome/browser/resources/settings/chromeos/multidevice_page/multidevice_tether_item.html

@@ -21,6 +21,7 @@
         subpage-route-url-search-params=
             "[[getTetherNetworkUrlSearchParams_()]]">
       <network-icon slot="icon"
+          aria-hidden="true"
           show-technology-badge="[[showTechnologyBadge_]]"
           network-state="[[activeNetworkState_]]"
           device-state="[[deviceState_]]">