Refactor the A11Y page to fix a regression that hid the "more features" link

when the SplitSettings flag is enabled.

Bug: 980783
Change-Id: I6d5ad8223f539e89a7e9b5002fa7574506671c3a
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1704745
Commit-Queue: Evan Liu <evliu@google.com>
Reviewed-by: Demetrios Papadopoulos <dpapad@chromium.org>
Cr-Commit-Position: refs/heads/master@{#678345}

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

@@ -19,101 +19,96 @@
 <dom-module id="settings-a11y-page">
   <template>
     <style include="settings-shared"></style>
+    <template is="dom-if" if="[[showCaptionSettings_]]">
+      <cr-link-row class="hr" id="captions" label="$i18n{captionsTitle}"
+          on-click="onCaptionsClick_">
+      </cr-link-row>
+    </template>
     <settings-animated-pages id="pages" current-route="{{currentRoute}}"
         section="a11y" focus-config="[[focusConfig_]]">
-      <if expr="not chromeos">
+<if expr="not chromeos">
+      <div route-path="default">
+      <settings-toggle-button
+          id="a11yImageLabels"
+          hidden$="[[!showAccessibilityLabelsSetting_]]"
+          pref="{{prefs.settings.a11y.enable_accessibility_image_labels}}"
+          on-change="onToggleAccessibilityImageLabels_"
+          label="$i18n{accessibleImageLabelsTitle}"
+          sub-label="$i18n{accessibleImageLabelsSubtitle}">
+      </settings-toggle-button>
+      <cr-link-row class="hr" label="$i18n{moreFeaturesLink}"
+          on-click="onMoreFeaturesLinkClick_" sub-label="$i18n{a11yWebStore}"
+          external>
+      </cr-link-row>
+      </div>
+</if>
+<if expr="chromeos or is_linux or is_win">
+      <template is="dom-if" if="[[showCaptionSettings_]]">
+        <template is="dom-if" route-path="/captions">
+          <settings-subpage
+              associated-control="[[$$('#captions')]]"
+              page-title="$i18n{captionsTitle}">
+            <settings-captions prefs="{{prefs}}"></settings-captions>
+          </settings-subpage>
+        </template>
+      </template>
+</if>
+<if expr="chromeos">
+      <template is="dom-if" if="[[pageVisibility.webstoreLink]]">
         <div route-path="default">
-          <template is="dom-if" if="[[showCaptionSettings_]]">
-            <cr-link-row class="hr" id="captions" label="$i18n{captionsTitle}"
-                on-click="onTapCaptions_">
-            </cr-link-row>
-          </template>
-          <if expr="not chromeos">
-            <settings-toggle-button id="a11yImageLabels"
-                hidden$="[[!showAccessibilityLabelsSetting_]]"
-                pref="{{prefs.settings.a11y.enable_accessibility_image_labels}}"
-                on-change="onToggleAccessibilityImageLabels_" 
-                label="$i18n{accessibleImageLabelsTitle}"
-                sub-label="$i18n{accessibleImageLabelsSubtitle}">
-            </settings-toggle-button>
-            <cr-link-row class="hr" label="$i18n{moreFeaturesLink}"
-                on-click="onMoreFeaturesLinkClick_"
-                sub-label="$i18n{a11yWebStore}" external></cr-link-row>
-          </if>
+          <settings-toggle-button
+              id="a11yImageLabels"
+              hidden$="[[!showAccessibilityLabelsSetting_]]"
+              pref="{{prefs.settings.a11y.enable_accessibility_image_labels}}"
+              on-change="onToggleAccessibilityImageLabels_"
+              label="$i18n{accessibleImageLabelsTitle}"
+              sub-label="$i18n{accessibleImageLabelsSubtitle}">
+          </settings-toggle-button>
+          <settings-toggle-button id="optionsInMenuToggle"
+              label="$i18n{optionsInMenuLabel}"
+              pref="{{prefs.settings.a11y.enable_menu}}">
+          </settings-toggle-button>
+          <cr-link-row class="hr" id="subpage-trigger"
+              label="$i18n{manageAccessibilityFeatures}"
+              on-click="onManageAccessibilityFeaturesTap_"
+              sub-label="$i18n{moreFeaturesLinkDescription}">
+          </cr-link-row>
         </div>
-      </if>
-      <if expr="chromeos">
-        <template is="dom-if" if="[[pageVisibility.webstoreLink]]">
-          <div route-path="default">
-            <template is="dom-if" if="[[showCaptionSettings_]]">
-              <cr-link-row class="hr" id="captions"
-                  label="$i18n{captionsTitle}"
-                  on-click="onTapCaptions_">
-              </cr-link-row>
-            </template>
-            <settings-toggle-button id="a11yImageLabels"
-                hidden$="[[!showAccessibilityLabelsSetting_]]"
-                pref="{{prefs.settings.a11y.enable_accessibility_image_labels}}"
-                on-change="onToggleAccessibilityImageLabels_"
-                label="$i18n{accessibleImageLabelsTitle}"
-                sub-label="$i18n{accessibleImageLabelsSubtitle}">
-            </settings-toggle-button>
-            <settings-toggle-button id="optionsInMenuToggle"
-                label="$i18n{optionsInMenuLabel}"
-                pref="{{prefs.settings.a11y.enable_menu}}">
-            </settings-toggle-button>
-            <cr-link-row class="hr" id="subpage-trigger"
-                label="$i18n{manageAccessibilityFeatures}"
-                on-click="onManageAccessibilityFeaturesTap_"
-                sub-label="$i18n{moreFeaturesLinkDescription}">
-            </cr-link-row>
-          </div>
-          <template is="dom-if" route-path="/manageAccessibility">
-            <settings-subpage associated-control="[[$$('#subpage-trigger')]]"
-                page-title="$i18n{manageAccessibilityFeatures}">
-              <settings-manage-a11y-page prefs="{{prefs}}">
-              </settings-manage-a11y-page>
-            </settings-subpage>
-          </template>
-          <template is="dom-if" route-path="/manageAccessibility/tts">
-            <settings-subpage
-                associated-control="[[$$('#subpage-trigger')]]"
-                page-title="$i18n{manageTtsSettings}">
-              <settings-tts-subpage prefs="{{prefs}}">
-              </settings-tts-subpage>
-            </settings-subpage>
-          </template>
-          <template is="dom-if" if="[[showExperimentalSwitchAccess_]]">
-            <template is="dom-if"
-                route-path="/manageAccessibility/switchAccess">
-              <settings-subpage associated-control="[[$$('#subpage-trigger')]]"
-                  page-title="$i18n{manageSwitchAccessSettings}">
-                <settings-switch-access-subpage prefs="{{prefs.settings.a11y}}">
-                </settings-switch-access-subpage>
-              </settings-subpage>
-            </template>
-          </template>
+        <template is="dom-if" route-path="/manageAccessibility">
+          <settings-subpage
+              associated-control="[[$$('#subpage-trigger')]]"
+              page-title="$i18n{manageAccessibilityFeatures}">
+            <settings-manage-a11y-page prefs="{{prefs}}">
+            </settings-manage-a11y-page>
+          </settings-subpage>
         </template>
-        <cr-link-row class="hr"
-            label="$i18n{moreFeaturesLink}"
-            on-click="onMoreFeaturesLinkClick_"
-            sub-label="$i18n{a11yWebStore}"
-            hidden="[[pageVisibility.webstoreLink]]" external></cr-link-row>
-      </if>
-
-      <if expr="chromeos or is_linux or is_win">
-        <template is="dom-if" if="[[showCaptionSettings_]]">
-          <template is="dom-if" route-path="/captions">
-            <settings-subpage
-                associated-control="[[$$('#captions')]]"
-                page-title="$i18n{captionsTitle}">
-              <settings-captions prefs="{{prefs}}"></settings-captions>
+        <template is="dom-if" route-path="/manageAccessibility/tts">
+          <settings-subpage
+              associated-control="[[$$('#subpage-trigger')]]"
+              page-title="$i18n{manageTtsSettings}">
+            <settings-tts-subpage prefs="{{prefs}}">
+            </settings-tts-subpage>
+          </settings-subpage>
+        </template>
+        <template is="dom-if" if="[[showExperimentalSwitchAccess_]]">
+          <template is="dom-if"
+              route-path="/manageAccessibility/switchAccess">
+            <settings-subpage associated-control="[[$$('#subpage-trigger')]]"
+                page-title="$i18n{manageSwitchAccessSettings}">
+              <settings-switch-access-subpage prefs="{{prefs.settings.a11y}}">
+              </settings-switch-access-subpage>
             </settings-subpage>
           </template>
         </template>
-      </if>
+      </template>
+</if>
     </settings-animated-pages>
-
+<if expr="chromeos">
+    <cr-link-row class="hr" label="$i18n{moreFeaturesLink}"
+        on-click="onMoreFeaturesLinkClick_" sub-label="$i18n{a11yWebStore}"
+        hidden="[[pageVisibility.webstoreLink]]" external>
+    </cr-link-row>
+</if>
   </template>
   <script src="a11y_page.js"></script>
 </dom-module>

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

@@ -137,7 +137,7 @@ Polymer({
   },
 
   /** @private */
-  onTapCaptions_: function() {
+  onCaptionsClick_: function() {
     // Open the system captions dialog for Mac.
     // <if expr="is_macosx">
     settings.CaptionsBrowserProxyImpl.getInstance().openSystemCaptionsDialog();