Commit cf18be2e authored by John Lee's avatar John Lee Committed by Commit Bot

Settings WebUI: Move a11y pages to cr-link-row

Change-Id: I6ceea7e847bd9b141426e7f491f447e739c64437
Reviewed-on: https://chromium-review.googlesource.com/c/1389395
Commit-Queue: John Lee <johntlee@chromium.org>
Reviewed-by: default avatarHector Carmona <hcarmona@chromium.org>
Cr-Commit-Position: refs/heads/master@{#619538}
parent 4e4dfe5e
<link rel="import" href="chrome://resources/html/polymer.html"> <link rel="import" href="chrome://resources/html/polymer.html">
<link rel="import" href="chrome://resources/cr_elements/cr_link_row/cr_link_row.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-light.html">
<link rel="import" href="../i18n_setup.html"> <link rel="import" href="../i18n_setup.html">
<link rel="import" href="../settings_shared_css.html"> <link rel="import" href="../settings_shared_css.html">
...@@ -23,19 +24,14 @@ ...@@ -23,19 +24,14 @@
label="$i18n{optionsInMenuLabel}" label="$i18n{optionsInMenuLabel}"
pref="{{prefs.settings.a11y.enable_menu}}"> pref="{{prefs.settings.a11y.enable_menu}}">
</settings-toggle-button> </settings-toggle-button>
<div id="subpage-trigger" class="settings-box two-line" <cr-link-row
on-click="onManageAccessibilityFeaturesTap_" actionable> class="hr"
<div class="start"> icon-class="subpage-arrow"
$i18n{manageAccessibilityFeatures} id="subpage-trigger"
<div class="secondary" id="themesSecondary"> label="$i18n{manageAccessibilityFeatures}"
$i18n{moreFeaturesLinkDescription} on-click="onManageAccessibilityFeaturesTap_"
</div> sub-label="$i18n{moreFeaturesLinkDescription}">
</div> </cr-link-row>
<paper-icon-button-light class="subpage-arrow">
<button aria-label="$i18n{manageAccessibilityFeatures}"
aria-describedby="themesSecondary"></button>
</paper-icon-button-light>
</div>
</div> </div>
<template is="dom-if" route-path="/manageAccessibility"> <template is="dom-if" route-path="/manageAccessibility">
......
...@@ -36,8 +36,7 @@ Polymer({ ...@@ -36,8 +36,7 @@ Polymer({
// <if expr="chromeos"> // <if expr="chromeos">
if (settings.routes.MANAGE_ACCESSIBILITY) { if (settings.routes.MANAGE_ACCESSIBILITY) {
map.set( map.set(
settings.routes.MANAGE_ACCESSIBILITY.path, settings.routes.MANAGE_ACCESSIBILITY.path, '#subpage-trigger');
'#subpage-trigger .subpage-arrow button');
} }
// </if> // </if>
return map; return map;
......
<link rel="import" href="chrome://resources/html/polymer.html"> <link rel="import" href="chrome://resources/html/polymer.html">
<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/icons.html">
<link rel="import" href="chrome://resources/html/web_ui_listener_behavior.html"> <link rel="import" href="chrome://resources/html/web_ui_listener_behavior.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-light.html">
...@@ -24,8 +25,10 @@ ...@@ -24,8 +25,10 @@
h2 ~ .settings-box, h2 ~ .settings-box,
h2 ~ settings-toggle-button, h2 ~ settings-toggle-button,
h2 ~ cr-link-row,
iron-collapse .settings-box, iron-collapse .settings-box,
iron-collapse settings-toggle-button { iron-collapse settings-toggle-button,
iron-collapse cr-link-row {
margin-inline-end: var(--settings-box-row-padding); margin-inline-end: var(--settings-box-row-padding);
margin-inline-start: var(--settings-box-row-indent); margin-inline-start: var(--settings-box-row-indent);
padding-inline-end: 0; padding-inline-end: 0;
...@@ -75,19 +78,15 @@ ...@@ -75,19 +78,15 @@
</paper-icon-button-light> </paper-icon-button-light>
</div> </div>
</iron-collapse> </iron-collapse>
<div class="settings-box two-line" on-click="onManageTtsSettingsTap_"
actionable> <cr-link-row
<div class="start" aria-hidden="true"> class="hr"
$i18n{manageTtsSettings} embedded
<div class="secondary" id="appearanceSettingsSecondary"> icon-class="subpage-arrow"
$i18n{ttsSettingsLinkDescription} label="$i18n{manageTtsSettings}"
</div> on-click="onManageTtsSettingsTap_"
</div> sub-label="$i18n{ttsSettingsLinkDescription}">
<paper-icon-button-light class="subpage-arrow"> </cr-link-row>
<button aria-label="$i18n{manageTtsSettings}"
aria-describedby="appearanceSettingsSecondary"></button>
</paper-icon-button-light>
</div>
<h2>$i18n{displayHeading}</h2> <h2>$i18n{displayHeading}</h2>
<settings-toggle-button class="first" <settings-toggle-button class="first"
...@@ -122,30 +121,22 @@ ...@@ -122,30 +121,22 @@
</settings-dropdown-menu> </settings-dropdown-menu>
</div> </div>
</template> </template>
<div class="settings-box two-line" on-click="onDisplayTap_" actionable> <cr-link-row
<div class="start" aria-hidden="true"> class="hr"
$i18n{displaySettingsTitle} embedded
<div class="secondary" id="displaySettingsSecondary"> icon-class="subpage-arrow"
$i18n{displaySettingsDescription} label="$i18n{displaySettingsTitle}"
</div> on-click="onDisplayTap_"
</div> sub-label="$i18n{displaySettingsDescription}">
<paper-icon-button-light class="subpage-arrow"> </cr-link-row>
<button aria-label="$i18n{displaySettingsTitle}" <cr-link-row
aria-describedby="displaySettingsSecondary"></button> class="hr"
</paper-icon-button-light> embedded
</div> icon-class="subpage-arrow"
<div class="settings-box two-line" on-click="onAppearanceTap_" actionable> label="$i18n{appearanceSettingsTitle}"
<div class="start" aria-hidden="true"> on-click="onAppearanceTap_"
$i18n{appearanceSettingsTitle} sub-label="$i18n{appearanceSettingsDescription}">
<div class="secondary" id="appearanceSettingsSecondary"> </cr-link-row>
$i18n{appearanceSettingsDescription}
</div>
</div>
<paper-icon-button-light class="subpage-arrow">
<button aria-label="$i18n{appearanceSettingsTitle}"
aria-describedby="appearanceSettingsSecondary"></button>
</paper-icon-button-light>
</div>
<h2>$i18n{keyboardAndTextInputHeading}</h2> <h2>$i18n{keyboardAndTextInputHeading}</h2>
<settings-toggle-button class="first" <settings-toggle-button class="first"
...@@ -175,29 +166,22 @@ ...@@ -175,29 +166,22 @@
label="$i18n{switchAccessLabel}"> label="$i18n{switchAccessLabel}">
</settings-toggle-button> </settings-toggle-button>
<iron-collapse opened="[[prefs.settings.a11y.switch_access.value]]"> <iron-collapse opened="[[prefs.settings.a11y.switch_access.value]]">
<div class="settings-box continuation" actionable <cr-link-row
embedded
icon-class="icon-external"
label="$i18n{switchAccessOptionsLabel}"
on-click="onSwitchAccessSettingsTap_"> on-click="onSwitchAccessSettingsTap_">
<div class="start" aria-hidden="true"> </cr-link-row>
$i18n{switchAccessOptionsLabel}
</div>
<paper-icon-button-light class="icon-external">
<button aria-label="$i18n{switchAccessOptionsLabel}"></button>
</paper-icon-button-light>
</div>
</iron-collapse> </iron-collapse>
</template> </template>
<div class="settings-box two-line" on-click="onKeyboardTap_" actionable> <cr-link-row
<div class="start" aria-hidden="true"> class="hr"
$i18n{keyboardSettingsTitle} embedded
<div class="secondary" id="keyboardSettingsSecondary"> icon-class="subpage-arrow"
$i18n{keyboardSettingsDescription} label="$i18n{keyboardSettingsTitle}"
</div> on-click="onKeyboardTap_"
</div> sub-label="$i18n{keyboardSettingsDescription}">
<paper-icon-button-light class="subpage-arrow"> </cr-link-row>
<button aria-label="$i18n{keyboardSettingsTitle}"
aria-describedby="keyboardSettingsSecondary"></button>
</paper-icon-button-light>
</div>
<h2>$i18n{mouseAndTouchpadHeading}</h2> <h2>$i18n{mouseAndTouchpadHeading}</h2>
<settings-toggle-button class="first" <settings-toggle-button class="first"
...@@ -263,18 +247,14 @@ ...@@ -263,18 +247,14 @@
pref="{{prefs.settings.a11y.cursor_highlight}}" pref="{{prefs.settings.a11y.cursor_highlight}}"
label="$i18n{cursorHighlightLabel}"> label="$i18n{cursorHighlightLabel}">
</settings-toggle-button> </settings-toggle-button>
<div class="settings-box two-line" on-click="onMouseTap_" actionable> <cr-link-row
<div class="start" aria-hidden="true"> class="hr"
$i18n{mouseSettingsTitle} embedded
<div class="secondary" id="mouseSettingsSecondary"> icon-class="subpage-arrow"
$i18n{mouseSettingsDescription} label="$i18n{mouseSettingsTitle}"
</div> on-click="onMouseTap_"
</div> sub-label="$i18n{mouseSettingsDescription}">
<paper-icon-button-light class="subpage-arrow"> </cr-link-row>
<button aria-label="$i18n{mouseSettingsTitle}"
aria-describedby="mouseSettingsSecondary"></button>
</paper-icon-button-light>
</div>
<h2>$i18n{audioHeading}</h2> <h2>$i18n{audioHeading}</h2>
<settings-toggle-button class="first" <settings-toggle-button class="first"
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment