Wi-Fi List: Set the active row to use aria-live.

Previously when details on the active row changed, users with a
screenreader were not notified.  This change allows the screenreader to
announce changes as they happen. In order to determine which row is
focused, this also adds an an isFocused property to FocusRowBehavior.


Bug: 720274
Change-Id: I3ba1d41200c0fdd1383ec548870ec71e395b2edb
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2489959Reviewed-by: Esmael Elmoslimany <aee@chromium.org>
Reviewed-by: Kyle Horimoto <khorimoto@chromium.org>
Commit-Queue: Jon Mann <jonmann@chromium.org>
Cr-Commit-Position: refs/heads/master@{#820961}

ui/webui/resources/cr_components/chromeos/network/network_list_item.html

@@ -69,6 +69,7 @@
            focus-row-control
            selectable
            aria-label$="[[rowLabel]]"
+           aria-live="[[getLiveStatus_(isFocused)]]"
            role="button"
            focus-type="rowWrapper"
            on-keydown="onKeydown_"

ui/webui/resources/cr_components/chromeos/network/network_list_item.js

@@ -407,4 +407,17 @@ Polymer({
         this.networkState.typeState.cellular.activationState !==
         mojom.ActivationStateType.kActivated;
   },
+
+  /**
+   * When the row is focused, this enables aria-live in "polite" mode to notify
+   * a11y users when details about the network change or when the list gets
+   * re-ordered because of changing signal strengths.
+   * @param {boolean} isFocused
+   * @return {string}
+   * @private
+   */
+  getLiveStatus_(isFocused) {
+    // isFocused is supplied by FocusRowBehavior.
+    return this.isFocused ? 'polite' : 'off';
+  },
 });

ui/webui/resources/js/cr/ui/focus_row_behavior.js

@@ -107,6 +107,12 @@ cr.define('cr.ui', function() {
         reflectToAttribute: true,
       },
 
+      /** For notifying when the row is in focus. */
+      isFocused: {
+        type: Boolean,
+        notify: true,
+      },
+
       /** Should be bound to the index of the item from the iron-list */
       focusRowIndex: {
         type: Number,
@@ -331,6 +337,7 @@ cr.define('cr.ui', function() {
         cr.ui.focusWithoutInk(firstFocusable);
       }
       this.listBlurred = false;
+      this.isFocused = true;
     },
 
     /** @param {!KeyboardEvent} e */
@@ -363,7 +370,9 @@ cr.define('cr.ui', function() {
      * @private
      */
     onBlur_(e) {
-      this.mouseFocused_ = false;  // Reset flag since it's not active anymore.
+      // Reset focused flags since it's not active anymore.
+      this.mouseFocused_ = false;
+      this.isFocused = false;
 
       const node =
           e.relatedTarget ? /** @type {!Node} */ (e.relatedTarget) : null;