[a11y] Reduce tab stops for network summary items.

This CL removes unnecessary navigation tab stops from the
network-summary-item element. The Additional details in the item were
added as an aria description for details button. Network name details
were removed from the aria label since this will be announced as part
of the description.

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

chrome/browser/resources/settings/internet_page/network_summary_item.html

@@ -37,8 +37,10 @@
     <div class="settings-box two-line no-padding">
       <div actionable class="flex layout horizontal center link-wrapper"
           on-click="onShowDetailsTap_">
-        <div id="details" no-flex$="[[showSimInfo_(deviceState)]]">
+        <div id="details" no-flex$="[[showSimInfo_(deviceState)]]"
+             aria-hidden="true">
           <network-icon
+              id="networkIcon"
               show-technology-badge="[[showTechnologyBadge_]]"
               network-state="[[activeNetworkState]]"
               device-state="[[deviceState]]">
@@ -59,16 +61,19 @@
         </template>
 
         <template is="dom-if" if="[[showPolicyIndicator_(activeNetworkState)]]">
-          <cr-policy-indicator indicator-type="[[getIndicatorTypeForSource(
-              activeNetworkState.source)]]" on-click="doNothing_">
+          <cr-policy-indicator
+            icon-aria-label="[[getTitleText_(activeNetworkState)]]"
+            indicator-type="[[getIndicatorTypeForSource(
+                                activeNetworkState.source)]]"
+            on-click="doNothing_">
           </cr-policy-indicator>
         </template>
 
         <template is="dom-if" if="[[showDetailsIsVisible_(activeNetworkState,
             deviceState, networkStateList)]]">
           <cr-icon-button class="subpage-arrow"
-              aria-label$="[[getDetailsA11yString_(activeNetworkState,
-                  deviceState, networkStateList)]]"
+              aria-labelledby="networkTitleText"
+              aria-describedby="networkState networkIcon"
               aria-roledescription="$i18n{subpageArrowRoleDescription}">
           </cr-icon-button>
         </template>

chrome/browser/resources/settings/internet_page/network_summary_item.js

@@ -325,35 +325,6 @@ Polymer({
     event.stopPropagation();
   },
 
-  /**
-   * @param {!OncMojo.NetworkStateProperties} activeNetworkState
-   * @param {!OncMojo.DeviceStateProperties|undefined} deviceState
-   * @param {!Array<!OncMojo.NetworkStateProperties>} networkStateList
-   * @return {string}
-   * @private
-   */
-  getDetailsA11yString_: function(
-      activeNetworkState, deviceState, networkStateList) {
-    let a11yString = this.getNetworkTypeString_(deviceState.type);
-    // If the item opens a network detail page directly then also include the
-    // network display name in the A11y string to give more context.
-    if (!this.shouldShowSubpage_(deviceState, networkStateList)) {
-      let displayName;
-      if (activeNetworkState.guid) {
-        displayName = OncMojo.getNetworkStateDisplayName(activeNetworkState);
-      } else if (networkStateList.length > 0) {
-        displayName = OncMojo.getNetworkStateDisplayName(networkStateList[0]);
-      }
-      // Display name could be same as network type string. Only combine the
-      // two strings if we have a valid display name.
-      if (displayName !== undefined && displayName != a11yString) {
-        a11yString = this.i18n(
-            'internetSummaryButtonA11yLabel', a11yString, displayName);
-      }
-    }
-    return a11yString;
-  },
-
   /**
    * Event triggered when the enable button is toggled.
    * @param {!Event} event