[a11y] Announce network connection status in network list.

When navigating a cr-network-list, announce the connection status
of the highlighted network when available.

Bug: 1011001
Change-Id: Id075e599f56f57f58a3f192e645ef268ec13b72e
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1873216
Commit-Queue: Jon Mann <jonmann@chromium.org>
Reviewed-by: Steven Bennetts <stevenjb@chromium.org>
Cr-Commit-Position: refs/heads/master@{#709713}

chrome/app/chromeos_strings.grdp

@@ -1264,6 +1264,9 @@
   <message name="IDS_NETWORK_LIST_THIRD_PARTY_VPN_NAME_TEMPLATE" desc="Template for constructing the name of a VPN network that is handled by a third-party VPN provider from the provider name and the network name.">
     <ph name="PROVIDER_NAME">$1<ex>OpenVPN</ex></ph>: <ph name="NETWORK_NAME">$2<ex>Work Network</ex></ph>
   </message>
+  <message name="IDS_NETWORK_LIST_ITEM_LABEL_TEMPLATE" desc="Template for constructing the label for a network, to be read outloud by a screenreader or braile console.">
+    <ph name="NETWORK_NAME">$1<ex>GuestNetwork</ex></ph> - <ph name="CONNECTION_STATUS">$2<ex>Connecting</ex></ph>
+  </message>
 
   <!-- Other Network UI strings -->
   <message name="IDS_NETWORK_CONNECTION_ERROR_TITLE" desc="Title for network connection error notification">

chrome/browser/chromeos/login/demo_mode/demo_setup_browsertest.cc

@@ -329,11 +329,10 @@ class DemoSetupTest : public LoginManagerTest {
 
   // Simulates click on the network list item. |element| should specify
   // the aria-label of the desired cr-network-list-item.
-  void ClickNetworkListElement(const std::string& element) {
-    const std::string query =
-        base::StrCat({ScreenToContentQuery(NetworkScreenView::kScreenId),
-                      ".getNetworkListItemWithQueryForTest('[aria-label=\"",
-                      element, "\"]').click()"});
+  void ClickNetworkListElement(const std::string& name) {
+    const std::string query = base::StrCat(
+        {ScreenToContentQuery(NetworkScreenView::kScreenId),
+         ".getNetworkListItemByNameForTest('", name, "').click()"});
     test::ExecuteOobeJSAsync(query);
   }
 

chrome/browser/resources/chromeos/internet_detail_dialog/internet_detail_dialog.js

@@ -117,6 +117,8 @@ Polymer({
           loadTimeData.getString('networkListItemConnectingTo'),
       networkListItemInitializing:
           loadTimeData.getString('networkListItemInitializing'),
+      networkListItemLabelTemplate:
+          loadTimeData.getString('networkListItemLabelTemplate'),
       networkListItemNotAvailable:
           loadTimeData.getString('networkListItemNotAvailable'),
       networkListItemScanning:

chrome/browser/resources/chromeos/login/network_select_login.js

@@ -123,6 +123,8 @@
             loadTimeData.getString('networkListItemConnectingTo'),
         networkListItemInitializing:
             loadTimeData.getString('networkListItemInitializing'),
+        networkListItemLabelTemplate:
+            loadTimeData.getString('networkListItemLabelTemplate'),
         networkListItemNotAvailable:
             loadTimeData.getString('networkListItemNotAvailable'),
         networkListItemScanning:

chrome/browser/resources/chromeos/login/oobe_network.js

@@ -89,6 +89,25 @@ Polymer({
     return networkList.querySelector(query);
   },
 
+  /**
+   * Returns element of the network list with the given name.
+   * Used to simplify testing.
+   * @param {string} name
+   * @return {?CrNetworkList.CrNetworkListItemType}
+   */
+  getNetworkListItemByNameForTest: function(name) {
+    let networkList =
+        this.$.networkSelectLogin.$$('#networkSelect').getNetworkListForTest();
+    assert(networkList);
+    for (const network of networkList.children) {
+      if (network.is === 'cr-network-list-item' &&
+          network.$$('#divText').children[0].innerText === name) {
+        return network;
+      }
+    }
+    return null;
+  },
+
   /**
    * Called after dialog is shown. Refreshes the list of the networks.
    * @private

chrome/browser/resources/chromeos/network_ui/network_ui.js

@@ -38,6 +38,8 @@ const NetworkUI = (function() {
         loadTimeData.getString('networkListItemConnectingTo'),
     networkListItemInitializing:
         loadTimeData.getString('networkListItemInitializing'),
+    networkListItemLabelTemplate:
+        loadTimeData.getString('networkListItemLabelTemplate'),
     networkListItemNotAvailable:
         loadTimeData.getString('networkListItemNotAvailable'),
     networkListItemScanning: loadTimeData.getString('networkListItemScanning'),

chrome/browser/resources/settings/chromeos/os_settings_ui/os_settings_ui.js

@@ -160,6 +160,8 @@ Polymer({
           loadTimeData.getString('networkListItemConnectingTo'),
       networkListItemInitializing:
           loadTimeData.getString('networkListItemInitializing'),
+      networkListItemLabelTemplate:
+          loadTimeData.getString('networkListItemLabelTemplate'),
       networkListItemNotAvailable:
           loadTimeData.getString('networkListItemNotAvailable'),
       networkListItemScanning:

chrome/browser/resources/settings/settings_ui/settings_ui.js

@@ -152,6 +152,8 @@ Polymer({
           loadTimeData.getString('networkListItemConnectingTo'),
       networkListItemInitializing:
           loadTimeData.getString('networkListItemInitializing'),
+      networkListItemLabelTemplate:
+          loadTimeData.getString('networkListItemLabelTemplate'),
       networkListItemNotAvailable:
           loadTimeData.getString('networkListItemNotAvailable'),
       networkListItemScanning:

chrome/browser/ui/webui/chromeos/network_element_localized_strings_provider.cc

@@ -36,6 +36,7 @@ constexpr LocalizedString kElementLocalizedStrings[] = {
     {"networkListItemConnecting", IDS_STATUSBAR_NETWORK_DEVICE_CONNECTING},
     {"networkListItemConnectingTo", IDS_NETWORK_LIST_CONNECTING_TO},
     {"networkListItemInitializing", IDS_NETWORK_LIST_INITIALIZING},
+    {"networkListItemLabelTemplate", IDS_NETWORK_LIST_ITEM_LABEL_TEMPLATE},
     {"networkListItemNotAvailable", IDS_NETWORK_LIST_NOT_AVAILABLE},
     {"networkListItemScanning", IDS_SETTINGS_INTERNET_MOBILE_SEARCH},
     {"networkListItemSimCardLocked", IDS_NETWORK_LIST_SIM_CARD_LOCKED},

chrome/test/data/webui/settings/chromeos/internet_detail_page_tests.js

@@ -50,6 +50,7 @@ suite('InternetDetailPage', function() {
       networkListItemConnected: 'networkListItemConnected',
       networkListItemConnecting: 'networkListItemConnecting',
       networkListItemConnectingTo: 'networkListItemConnectingTo',
+      networkListItemLabelTemplate: '%1 - %2',
       networkListItemNotConnected: 'networkListItemNotConnected',
       networkListItemNoNetwork: 'networkListItemNoNetwork',
       vpnNameTemplate: 'vpnNameTemplate',

chrome/test/data/webui/settings/chromeos/internet_page_tests.js

@@ -35,6 +35,7 @@ suite('InternetPage', function() {
       networkListItemConnected: 'networkListItemConnected',
       networkListItemConnecting: 'networkListItemConnecting',
       networkListItemConnectingTo: 'networkListItemConnectingTo',
+      networkListItemLabelTemplate: '%1 - %2',
       networkListItemNotConnected: 'networkListItemNotConnected',
       networkListItemNoNetwork: 'networkListItemNoNetwork',
       vpnNameTemplate: 'vpnNameTemplate',

chrome/test/data/webui/settings/chromeos/internet_subpage_tests.js

@@ -32,6 +32,7 @@ suite('InternetSubpage', function() {
       networkListItemConnected: 'networkListItemConnected',
       networkListItemConnecting: 'networkListItemConnecting',
       networkListItemConnectingTo: 'networkListItemConnectingTo',
+      networkListItemLabelTemplate: '%1 - %2',
       networkListItemNotConnected: 'networkListItemNotConnected',
       networkListItemNoNetwork: 'networkListItemNoNetwork',
       vpnNameTemplate: 'vpnNameTemplate',

ui/webui/resources/cr_elements/chromeos/network/cr_network_list_item.js

@@ -56,7 +56,7 @@ Polymer({
       type: String,
       notify: true,
       reflectToAttribute: true,
-      computed: 'getItemName_(item)',
+      computed: 'getAriaLabel_(item, networkState)',
     },
 
     /**
@@ -129,6 +129,21 @@ Polymer({
         /** @type {!OncMojo.NetworkStateProperties} */ (this.item));
   },
 
+  /**
+   * Label for the row, used for accessibility announcement.
+   * @return {string}
+   * @private
+   */
+  getAriaLabel_: function() {
+    const status = this.getNetworkStateText_();
+    if (status) {
+      return CrOncStrings.networkListItemLabelTemplate
+          .replace('$1', this.getItemName_())
+          .replace('$2', status);
+    }
+    return this.getItemName_();
+  },
+
   /**
    * @return {boolean}
    * @private

ui/webui/resources/cr_elements/chromeos/network/cr_onc_strings.js

@@ -19,6 +19,7 @@
  *   networkListItemConnecting: string,
  *   networkListItemConnectingTo: string,
  *   networkListItemInitializing: string,
+ *   networkListItemLabelTemplate: string,
  *   networkListItemNotAvailable: string,
  *   networkListItemScanning: string,
  *   networkListItemSimCardLocked: string,