OS Settings: Restore DOM focus after routing from manage a11y subpage

This is the implementation of the out-and-back routing DOM focus
design for OS Settings [1]. Compare the tip of tree [2] behavior with
the post-fix [3] behavior.

[1] https://docs.google.com/document/d/1iNewLPex50WuF2ByJa3w250q_WdBbwCfVIo8C5RM6-w/edit?usp=sharing
[2] https://drive.google.com/open?id=1aVRaRrwsMGxYiQ3_FXWSyekeMWOVkCo8
[3] https://drive.google.com/open?id=1A5iVSDgTa7ciqy2rK52B0qqEulw-mR18


Bug: 1003992
Change-Id: I1510a6c231270b3509ebd0c45750979781ee4a0b
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1900152Reviewed-by: Kyle Horimoto <khorimoto@chromium.org>
Commit-Queue: Jordy Greenblatt <jordynass@chromium.org>
Cr-Commit-Position: refs/heads/master@{#715012}

chrome/browser/resources/settings/a11y_page/BUILD.gn

@@ -43,6 +43,7 @@ js_library("a11y_page") {
 js_library("manage_a11y_page") {
   deps = [
     "..:route",
+    "//ui/webui/resources/js:cr",
     "//ui/webui/resources/js:load_time_data",
     "//ui/webui/resources/js:web_ui_listener_behavior",
   ]

chrome/browser/resources/settings/a11y_page/manage_a11y_page.html

@@ -4,6 +4,7 @@
 <link rel="import" href="chrome://resources/cr_elements/cr_link_row/cr_link_row.html">
 <link rel="import" href="chrome://resources/cr_elements/icons.html">
 <link rel="import" href="chrome://resources/cr_elements/shared_vars_css.html">
+<link rel="import" href="chrome://resources/html/cr.html">
 <link rel="import" href="chrome://resources/html/web_ui_listener_behavior.html">
 <link rel="import" href="../controls/settings_slider.html">
 <link rel="import" href="../controls/settings_toggle_button.html">
@@ -66,8 +67,8 @@
           label="$i18n{selectToSpeakOptionsLabel}" external></cr-link-row>
     </iron-collapse>
 
-    <cr-link-row class="hr" label="$i18n{manageTtsSettings}"
-        on-click="onManageTtsSettingsTap_"
+    <cr-link-row id="ttsSubpageButton" class="hr"
+        label="$i18n{manageTtsSettings}" on-click="onManageTtsSettingsTap_"
         sub-label="$i18n{ttsSettingsLinkDescription}" embedded></cr-link-row>
 
     <h2>$i18n{displayHeading}</h2>
@@ -109,11 +110,11 @@
         </settings-dropdown-menu>
       </div>
     </template>
-    <cr-link-row class="hr" label="$i18n{displaySettingsTitle}"
-        on-click="onDisplayTap_" sub-label="$i18n{displaySettingsDescription}"
-        embedded></cr-link-row>
-    <cr-link-row class="hr" label="$i18n{appearanceSettingsTitle}"
-        on-click="onAppearanceTap_"
+    <cr-link-row id="displaySubpageButton" class="hr"
+        label="$i18n{displaySettingsTitle}" on-click="onDisplayTap_"
+        sub-label="$i18n{displaySettingsDescription}" embedded></cr-link-row>
+    <cr-link-row id="appearanceSubpageButton" class="hr"
+        label="$i18n{appearanceSettingsTitle}" on-click="onAppearanceTap_"
         sub-label="$i18n{appearanceSettingsDescription}"
         external="[[isOSSettings_]]" embedded></cr-link-row>
 
@@ -146,14 +147,15 @@
       </settings-toggle-button>
       <iron-collapse
           opened="[[prefs.settings.a11y.switch_access.enabled.value]]">
-        <cr-link-row label="$i18n{switchAccessOptionsLabel}"
+        <cr-link-row id="switchAccessSubpageButton"
+            label="$i18n{switchAccessOptionsLabel}"
             on-click="onSwitchAccessSettingsTap_" embedded>
         </cr-link-row>
       </iron-collapse>
     </template>
-    <cr-link-row class="hr" label="$i18n{keyboardSettingsTitle}"
-        on-click="onKeyboardTap_" sub-label="$i18n{keyboardSettingsDescription}"
-        embedded></cr-link-row>
+    <cr-link-row id="keyboardSubpageButton" class="hr"
+        label="$i18n{keyboardSettingsTitle}" on-click="onKeyboardTap_"
+        sub-label="$i18n{keyboardSettingsDescription}" embedded></cr-link-row>
 
     <h2>$i18n{mouseAndTouchpadHeading}</h2>
     <settings-toggle-button class="first"
@@ -218,13 +220,13 @@
         pref="{{prefs.settings.a11y.cursor_highlight}}"
         label="$i18n{cursorHighlightLabel}">
     </settings-toggle-button>
-    <cr-link-row class="hr" label="$i18n{mouseSettingsTitle}"
-        on-click="onMouseTap_" sub-label="$i18n{mouseSettingsDescription}"
-        embedded></cr-link-row>
+    <cr-link-row id="pointerSubpageButton" class="hr"
+        label="$i18n{mouseSettingsTitle}" on-click="onMouseTap_"
+        sub-label="$i18n{mouseSettingsDescription}" embedded></cr-link-row>
 
     <h2>$i18n{audioAndCaptionsHeading}</h2>
-    <cr-link-row class="first" label="$i18n{captionsTitle}"
-        on-click="onCaptionsClick_"></cr-link-row>
+    <cr-link-row id="captionsSubpageButton" class="first"
+        label="$i18n{captionsTitle}" on-click="onCaptionsClick_"></cr-link-row>
     <settings-toggle-button
         pref="{{prefs.settings.a11y.mono_audio}}"
         label="$i18n{monoAudioLabel}">

chrome/browser/resources/settings/a11y_page/manage_a11y_page.js

@@ -10,7 +10,7 @@
 Polymer({
   is: 'settings-manage-a11y-page',
 
-  behaviors: [WebUIListenerBehavior],
+  behaviors: [WebUIListenerBehavior, settings.RouteObserverBehavior],
 
   properties: {
     /**
@@ -21,6 +21,41 @@ Polymer({
       notify: true,
     },
 
+    /** @private {!Map<string, string>} */
+    focusConfig_: {
+      type: Object,
+      value: function() {
+        const map = new Map();
+        if (settings.routes.MANAGE_TTS_SETTINGS) {
+          map.set(
+              settings.routes.MANAGE_TTS_SETTINGS.path, '#ttsSubpageButton');
+        }
+        if (settings.routes.MANAGE_CAPTION_SETTINGS) {
+          map.set(
+              settings.routes.MANAGE_CAPTION_SETTINGS.path,
+              '#captionsSubpageButton');
+        }
+        if (settings.routes.MANAGE_SWITCH_ACCESS_SETTINGS) {
+          map.set(
+              settings.routes.MANAGE_SWITCH_ACCESS_SETTINGS.path,
+              '#switchAccessSubpageButton');
+        }
+        if (settings.routes.DISPLAY) {
+          map.set(settings.routes.DISPLAY.path, '#displaySubpageButton');
+        }
+        if (settings.routes.APPEARANCE) {
+          map.set(settings.routes.APPEARANCE.path, '#appearanceSubpageButton');
+        }
+        if (settings.routes.KEYBOARD) {
+          map.set(settings.routes.KEYBOARD.path, '#keyboardSubpageButton');
+        }
+        if (settings.routes.POINTERS) {
+          map.set(settings.routes.POINTERS.path, '#pointerSubpageButton');
+        }
+        return map;
+      },
+    },
+
     screenMagnifierZoomOptions_: {
       readOnly: true,
       type: Array,
@@ -134,6 +169,12 @@ Polymer({
     hasKeyboard_: Boolean,
   },
 
+  /**
+   * The route corresponding to this page.
+   * @private {!settings.Route|undefined}
+   */
+  route_: settings.routes.MANAGE_ACCESSIBILITY,
+
   /** @override */
   attached: function() {
     this.addWebUIListener(
@@ -149,6 +190,28 @@ Polymer({
     chrome.send('getStartupSoundEnabled');
   },
 
+  /**
+   * settings.RouteObserverBehavior
+   * @param {!settings.Route} newRoute
+   * @param {!settings.Route} oldRoute
+   * @protected
+   */
+  currentRouteChanged: function(newRoute, oldRoute) {
+    // Don't attempt to focus any anchor element, unless last navigation was a
+    // 'pop' (backwards) navigation.
+    if (!settings.lastRouteChangeWasPopstate()) {
+      return;
+    }
+
+    const focusSelector = this.focusConfig_.get(oldRoute.path);
+
+    if (this.route_ != newRoute || !focusSelector) {
+      return;
+    }
+
+    cr.ui.focusWithoutInk(assert(this.$$(focusSelector)));
+  },
+
   /**
    * Updates the Select-to-Speak description text based on:
    *    1. Whether Select-to-Speak is enabled.