Reorganize accessibility settings.

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

Index: chrome/browser/resources/settings/a11y_page/manage_a11y_page.html
diff --git a/chrome/browser/resources/settings/a11y_page/manage_a11y_page.html b/chrome/browser/resources/settings/a11y_page/manage_a11y_page.html
new file mode 100644
index 0000000000000000000000000000000000000000..f55d53a4ee7ad7044a839c37df3b8e70040ae966
--- /dev/null
+++ b/chrome/browser/resources/settings/a11y_page/manage_a11y_page.html
@@ -0,0 +1,162 @@
+<link rel="import" href="chrome://resources/html/polymer.html">
+<link rel="import" href="/controls/settings_checkbox.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">
+      .indented {
+        -webkit-margin-start: 20px;
+      }
+
+      .no-top-border {
+        border-top: none;
+      }
+
+      h3 {
+        color: var(--settings-nav-grey);
+        font-weight: 500;
+      }
+
+      .settings-box iron-icon {
+        -webkit-margin-end: var(--iron-icon-spacing);
+      }
+
+      .settings-box settings-checkbox {
+        flex-grow: 1;
+      }
+    </style>
+    <div class="settings-box row first">
+      <span>
+        $i18n{a11yExplanation}
+        <a href="$i18nRaw{a11yLearnMoreUrl}" target="_blank">
+          $i18n{learnMore}
+        </a>
+      </span>
+    </div>
+
+    <div class="settings-box block">
+      <h3>$i18n{textToSpeechHeading}</h3>
+      <div class="settings-box first indented">
+        <settings-checkbox pref="{{prefs.settings.accessibility}}"
+            label="$i18n{chromeVoxLabel}">
+        </settings-checkbox>
+        <paper-icon-button icon="cr:settings" on-tap="onChromeVoxSettingsTap_">
+        </paper-icon-button>
+      </div>
+      <template is="dom-if" if="[[showExperimentalFeatures_]]">
+        <div class="settings-box no-top-border indented">
+          <settings-checkbox pref="{{prefs.settings.a11y.select_to_speak}}"
+              label="$i18n{selectToSpeakTitle}"
+              sub-label="$i18n{selectToSpeakDescription}">
+          </settings-checkbox>
+        </div>
+      </template>
+
+      <h3>$i18n{displayHeading}</h3>
+      <div class="settings-box block first indented">
+        <settings-checkbox label="$i18n{highContrastLabel}"
+            pref="{{prefs.settings.a11y.high_contrast_enabled}}">
+        </settings-checkbox>
+        <settings-checkbox label="$i18n{screenMagnifierLabel}"
+            pref="{{prefs.settings.a11y.screen_magnifier}}">
+        </settings-checkbox>
+      </div>
+      <div class="settings-box two-line indented" on-tap="onDisplayTap_"
+          actionable>
+        <iron-icon icon="settings:desktop-windows"></iron-icon>
+        <div class="start">
+          <div>$i18n{displaySettingsTitle}</div>
+          <div class="secondary">$i18n{displaySettingsDescription}</div>
+        </div>
+      </div>
+      <div class="settings-box two-line indented" on-tap="onAppearanceTap_"
+          actionable>
+        <iron-icon icon="settings:text-format"></iron-icon>
+        <div class="start">
+          <div>$i18n{appearanceSettingsTitle}</div>
+          <div class="secondary">$i18n{appearanceSettingsDescription}</div>
+        </div>
+      </div>
+
+      <h3>$i18n{keyboardHeading}</h3>
+      <div class="settings-box block first indented">
+        <settings-checkbox
+            pref="{{prefs.settings.a11y.sticky_keys_enabled}}"
+            label="$i18n{stickyKeysLabel}">
+        </settings-checkbox>
+        <settings-checkbox pref="{{prefs.settings.a11y.virtual_keyboard}}"
+            label="$i18n{onScreenKeyboardLabel}">
+        </settings-checkbox>
+        <settings-checkbox pref="{{prefs.settings.a11y.focus_highlight}}"
+            label="$i18n{focusHighlightLabel}">
+        </settings-checkbox>
+        <settings-checkbox pref="{{prefs.settings.a11y.caret_highlight}}"
+            label="$i18n{caretHighlightLabel}">
+        </settings-checkbox>
+        <template is="dom-if" if="[[showExperimentalFeatures_]]">
+          <settings-checkbox pref="{{prefs.settings.a11y.switch_access}}"
+              label="$i18n{switchAccessLabel}">
+          </settings-checkbox>
+        </template>
+      </div>
+      <div class="settings-box two-line indented" on-tap="onKeyboardTap_"
+          actionable>
+        <iron-icon icon="settings:keyboard"></iron-icon>
+        <div class="start">
+          <div>$i18n{keyboardSettingsTitle}</div>
+          <div class="secondary">$i18n{keyboardSettingsDescription}</div>
+        </div>
+      </div>
+
+      <h3>$i18n{mouseAndTouchpadHeading}</h3>
+      <div class="settings-box block first indented">
+        <settings-checkbox label="$i18n{clickOnStopLabel}"
+            pref="{{prefs.settings.a11y.autoclick}}">
+        </settings-checkbox>
+        <div class="list-item settings-checkbox-spacer">
+          <div>$i18n{delayBeforeClickLabel}</div>
+          <settings-dropdown-menu
+              pref="{{prefs.settings.a11y.autoclick_delay_ms}}"
+              menu-options="[[autoClickDelayOptions_]]" no-label-float>
+          </settings-dropdown-menu>
+        </div>
+        <settings-checkbox label="$i18n{tapDraggingLabel}"
+            pref="{{prefs.settings.touchpad.enable_tap_dragging}}">
+        </settings-checkbox>
+        <settings-checkbox label="$i18n{largeMouseCursorLabel}"
+            pref="{{prefs.settings.a11y.large_cursor_enabled}}">
+        </settings-checkbox>
+        <settings-checkbox pref="{{prefs.settings.a11y.cursor_highlight}}"
+            label="$i18n{cursorHighlightLabel}">
+        </settings-checkbox>
+      </div>
+      <div class="settings-box two-line indented" on-tap="onMouseTap_"
+          actionable>
+        <iron-icon icon="settings:mouse"></iron-icon>
+        <div class="start">
+          <div>$i18n{mouseSettingsTitle}</div>
+          <div class="secondary">$i18n{mouseSettingsDescription}</div>
+        </div>
+      </div>
+
+      <h3>$i18n{audioHeading}</h3>
+      <div class="settings-box block first indented">
+        <settings-checkbox pref="{{prefs.settings.a11y.mono_audio}}"
+            label="$i18n{monoAudioLabel}">
+        </settings-checkbox>
+      </div>
+    </div>
+
+    <div class="settings-box two-line" on-tap="onMoreFeaturesTap_" actionable>
+      <div class="start">
+        <div>$i18n{additionalFeaturesTitle}</div>
+        <div class="secondary">$i18n{additionalFeaturesDescription}</div>
+      </div>
+    </div>
+  </template>
+  <script src="manage_a11y_page.js"></script>
+</dom-module>