[CrOS Settings] Fix default focus in cellular setup.

Sets the default focus on each page in cellular setup.

Fixes: 1010316
Change-Id: I743dd6eb3fad9d4cf311e699088f82b59e960b1e
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2634041Reviewed-by: Azeem Arshad <azeemarshad@chromium.org>
Commit-Queue: Gordon Seto <gordonseto@google.com>
Cr-Commit-Position: refs/heads/master@{#844353}

chrome/test/data/webui/cr_components/chromeos/cellular_setup/button_bar_test.js

@@ -8,7 +8,7 @@
 
 // #import {flush, Polymer} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
 // #import {ButtonState, Button, ButtonBarState, CellularSetupPageName} from 'chrome://resources/cr_components/chromeos/cellular_setup/cellular_types.m.js';
-// #import {assertFalse, assertTrue} from '../../../chai_assert.js';
+// #import {assertEquals, assertFalse, assertTrue} from '../../../chai_assert.js';
 // clang-format on
 
 suite('CellularSetupButtonBarTest', function() {
@@ -84,4 +84,38 @@ suite('CellularSetupButtonBarTest', function() {
     assertTrue(isButtonHidden(buttonBar.$$('#tryAgain')));
     assertTrue(isButtonHidden(buttonBar.$$('#forward')));
   });
+
+  test('default focus is on last button if all are enabled', function() {
+    setStateForAllButtons(cellularSetup.ButtonState.ENABLED);
+
+    Polymer.dom.flush();
+
+    assertEquals(buttonBar.shadowRoot.activeElement, buttonBar.$$('#forward'));
+  });
+
+  test('default focus is on first button if rest are hidden', function() {
+    buttonBar.buttonState = {
+      backward: cellularSetup.ButtonState.ENABLED,
+    };
+
+    Polymer.dom.flush();
+
+    assertEquals(buttonBar.shadowRoot.activeElement, buttonBar.$$('#backward'));
+  });
+
+  test(
+      'default focus is on first button if rest are visible but disabled',
+      function() {
+        buttonBar.buttonState = {
+          backward: cellularSetup.ButtonState.ENABLED,
+          cancel: cellularSetup.ButtonState.DISABLED,
+          forward: cellularSetup.ButtonState.DISABLED,
+          tryAgain: cellularSetup.ButtonState.DISABLED,
+        };
+
+        Polymer.dom.flush();
+
+        assertEquals(
+            buttonBar.shadowRoot.activeElement, buttonBar.$$('#backward'));
+      });
 });

ui/webui/resources/cr_components/chromeos/cellular_setup/BUILD.gn

@@ -37,6 +37,7 @@ js_library("button_bar") {
   deps = [
     ":cellular_types",
     "//ui/webui/resources/js:i18n_behavior",
+    "//ui/webui/resources/js/cr/ui:focus_without_ink",
   ]
 }
 
@@ -332,6 +333,7 @@ js_library("button_bar.m") {
     ":cellular_types.m",
     "//third_party/polymer/v3_0/components-chromium/polymer:polymer_bundled",
     "//ui/webui/resources/js:i18n_behavior.m",
+    "//ui/webui/resources/js/cr/ui:focus_without_ink.m",
   ]
   extra_deps = [ ":button_bar_module" ]
 }

ui/webui/resources/cr_components/chromeos/cellular_setup/button_bar.html

@@ -6,6 +6,7 @@
 <link rel="import" href="../../../cr_elements/shared_style_css.html">
 <link rel="import" href="../../../cr_elements/shared_vars_css.html">
 <link rel="import" href="chrome://resources/html/assert.html">
+<link rel="import" href="chrome://resources/html/cr/ui/focus_without_ink.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/iron-flex-layout/iron-flex-layout.html">
 
 <dom-module id="button-bar">

ui/webui/resources/cr_components/chromeos/cellular_setup/button_bar.js

@@ -15,7 +15,11 @@ Polymer({
      * Sets the states of all buttons
      * @type {!cellularSetup.ButtonBarState}
      */
-    buttonState: {type: Object, value: {}},
+    buttonState: {
+      type: Object,
+      value: {},
+      observer: 'focusDefaultButton_',
+    },
 
     /**
      * @type {!cellularSetup.Button}
@@ -70,6 +74,19 @@ Polymer({
     this.fire('forward-nav-requested');
   },
 
+  /** @private */
+  focusDefaultButton_() {
+    const buttons = this.shadowRoot.querySelectorAll('cr-button');
+    // Focus the first non-disabled, non-hidden button from the end.
+    for (let i = buttons.length - 1; i >= 0; i--) {
+      const button = buttons.item(i);
+      if (!button.disabled && !button.hidden) {
+        cr.ui.focusWithoutInk(button);
+        return;
+      }
+    }
+  },
+
   /**
    * @param {!cellularSetup.Button} button
    * @returns {!cellularSetup.ButtonState|undefined}