Add links to more options pages for Chrome OS accessibility features

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

+<link rel="import" href="chrome://resources/cr_elements/icons.html">
 <link rel="import" href="chrome://resources/html/polymer.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-icon-button/paper-icon-button-light.html">
+<link rel="import" href="chrome://resources/polymer/v1_0/paper-icon-button/paper-icon-button.html">
 <link rel="import" href="../controls/settings_slider.html">
 <link rel="import" href="../controls/settings_toggle_button.html">
 <link rel="import" href="../i18n_setup.html">
 <link rel="import" href="../route.html">
 <link rel="import" href="../settings_shared_css.html">
 <link rel="import" href="../settings_vars_css.html">
 
 <dom-module id="settings-manage-a11y-page">
   <template>
     <style include="settings-shared">
@@ skipping 19 matching lines @@
           $i18n{learnMore}
         </a>
       </span>
     </div>
 
     <h2>$i18n{textToSpeechHeading}</h2>
     <div class="settings-box first" actionable>
       <settings-toggle-button class="start"
           pref="{{prefs.settings.accessibility}}"
           label="$i18n{chromeVoxLabel}">
-        <button class="more-actions icon-external" is="paper-icon-button-light"
+        <paper-icon-button icon="cr:settings_icon"
+            class="more-actions"
             on-tap="onChromeVoxSettingsTap_"
             hidden="[[!prefs.settings.accessibility.value]]"
-            aria-label="$i18n{chromeVoxLabel}"></button>
+            aria-label="$i18n{chromeVoxOptionsLabel}"></paper-icon-button>

[Dan Beam, 2017/03/29 13:22:44]

does clicking the settings icon also trigger flipping the toggle button?

[dmazzoni, 2017/03/29 15:12:50]

No, because it's hidden when the toggle is off:
hidden="[[!prefs.settings.accessibility.value]]"

       </settings-toggle-button>
     </div>
     <template is="dom-if" if="[[showExperimentalFeatures_]]">
-      <div class="settings-box block">
+      <div class="settings-box block" actionable>
         <settings-toggle-button
             pref="{{prefs.settings.a11y.select_to_speak}}"
             label="$i18n{selectToSpeakTitle}"
             sub-label="$i18n{selectToSpeakDescription}">
+          <paper-icon-button icon="cr:settings_icon"
+              class="more-actions"
+              on-tap="onSelectToSpeakSettingsTap_"
+              hidden="[[!prefs.settings.a11y.select_to_speak.value]]"
+              aria-label="$i18n{selectToSpeakOptionsLabel}">
+          </paper-icon-button>
         </settings-toggle-button>
       </div>
     </template>
 
     <h2>$i18n{displayHeading}</h2>
     <div class="settings-box block first">
       <settings-toggle-button
           pref="{{prefs.settings.a11y.high_contrast_enabled}}"
           label="$i18n{highContrastLabel}">
       </settings-toggle-button>
@@ skipping 36 matching lines @@
           label="$i18n{onScreenKeyboardLabel}">
       </settings-toggle-button>
       <settings-toggle-button
           pref="{{prefs.settings.a11y.focus_highlight}}"
           label="$i18n{focusHighlightLabel}">
       </settings-toggle-button>
       <settings-toggle-button
           pref="{{prefs.settings.a11y.caret_highlight}}"
           label="$i18n{caretHighlightLabel}">
       </settings-toggle-button>
-      <template is="dom-if" if="[[showExperimentalFeatures_]]">
+    </div>
+    <template is="dom-if" if="[[showExperimentalFeatures_]]">
+      <div class="settings-box block" actionable>
         <settings-toggle-button
             pref="{{prefs.settings.a11y.switch_access}}"
             label="$i18n{switchAccessLabel}">
+          <paper-icon-button icon="cr:settings_icon"
+              class="more-actions"
+              on-tap="onSwitchAccessSettingsTap_"
+              hidden="[[!prefs.settings.a11y.switch_access.value]]"
+              aria-label="$i18n{selectToSpeakOptionsLabel}">
+          </paper-icon-button>
         </settings-toggle-button>
-      </template>
-    </div>
+      </div>
+    </template>
     <div class="settings-box two-line" on-tap="onKeyboardTap_" actionable>
       <div class="start">
         $i18n{keyboardSettingsTitle}
         <div class="secondary" id="keyboardSettingsSecondary">
           $i18n{keyboardSettingsDescription}
         </div>
       </div>
       <button class="subpage-arrow" is="paper-icon-button-light"
           aria-label="$i18n{keyboardSettingsTitle}"
           aria-describedby="keyboardSettingsSecondary"></button>
@@ skipping 62 matching lines @@
           $i18n{a11yWebStore}
         </div>
       </div>
       <button class="icon-external" is="paper-icon-button-light"
           aria-label="$i18n{additionalFeaturesTitle}"
           aria-describedby="moreFeaturesSecondary"></button>
     </div>
   </template>
   <script src="manage_a11y_page.js"></script>
 </dom-module>