| <link rel="import" href="chrome://resources/html/polymer.html"> |
| |
| <link rel="import" href="chrome://resources/cr_elements/cr_icon_button/cr_icon_button.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/shared_vars_css.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"> |
| <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="tts_subpage.html"> |
| |
| <dom-module id="settings-manage-a11y-page"> |
| <template> |
| <style include="settings-shared"> |
| h2 { |
| padding-inline-start: var(--cr-section-padding); |
| } |
| |
| .sub-item { |
| margin-inline-start: var(--cr-section-indent-width); |
| } |
| |
| h2 ~ .settings-box, |
| h2 ~ settings-toggle-button, |
| h2 ~ cr-link-row, |
| iron-collapse .settings-box, |
| iron-collapse settings-toggle-button, |
| iron-collapse cr-link-row { |
| margin-inline-end: var(--cr-section-padding); |
| margin-inline-start: var(--cr-section-indent-padding); |
| padding-inline-end: 0; |
| padding-inline-start: 0; |
| } |
| </style> |
| <div class="settings-box row first"> |
| <span> |
| $i18n{a11yExplanation} |
| <a href="$i18nRaw{a11yLearnMoreUrl}" target="_blank"> |
| $i18n{learnMore} |
| </a> |
| </span> |
| </div> |
| |
| <h2>$i18n{textToSpeechHeading}</h2> |
| <settings-toggle-button class="first" |
| pref="{{prefs.settings.accessibility}}" |
| label="$i18n{chromeVoxLabel}"> |
| </settings-toggle-button> |
| <iron-collapse opened="[[prefs.settings.accessibility.value]]"> |
| <cr-link-row class="settings-box" on-click="onChromeVoxSettingsTap_" |
| label="$i18n{chromeVoxOptionsLabel}" external></cr-link-row> |
| </iron-collapse> |
| <settings-toggle-button |
| pref="{{prefs.settings.a11y.select_to_speak}}" |
| label="$i18n{selectToSpeakTitle}" |
| sub-label="[[getSelectToSpeakDescription_( |
| prefs.settings.a11y.select_to_speak.value, hasKeyboard_, |
| '$i18nPolymer{selectToSpeakDisabledDescription}', |
| '$i18nPolymer{selectToSpeakDescription}', |
| '$i18nPolymer{selectToSpeakDescriptionWithoutKeyboard}')]]"> |
| </settings-toggle-button> |
| <iron-collapse opened="[[prefs.settings.a11y.select_to_speak.value]]"> |
| <cr-link-row class="settings-box" on-click="onSelectToSpeakSettingsTap_" |
| label="$i18n{selectToSpeakOptionsLabel}" external></cr-link-row> |
| </iron-collapse> |
| |
| <cr-link-row class="hr" label="$i18n{manageTtsSettings}" |
| on-click="onManageTtsSettingsTap_" |
| sub-label="$i18n{ttsSettingsLinkDescription}" embedded></cr-link-row> |
| |
| <h2>$i18n{displayHeading}</h2> |
| <settings-toggle-button class="first" |
| pref="{{prefs.settings.a11y.high_contrast_enabled}}" |
| label="$i18n{highContrastLabel}"> |
| </settings-toggle-button> |
| <settings-toggle-button |
| pref="{{prefs.settings.a11y.screen_magnifier}}" |
| label="$i18n{screenMagnifierLabel}" |
| disabled="[[prefs.ash.docked_magnifier.enabled.value]]"> |
| </settings-toggle-button> |
| <div class="settings-box continuation"> |
| <div class="start sub-item">$i18n{screenMagnifierZoomLabel}</div> |
| <settings-dropdown-menu label="$i18n{screenMagnifierZoomLabel}" |
| pref="{{prefs.settings.a11y.screen_magnifier_scale}}" |
| menu-options="[[screenMagnifierZoomOptions_]]" |
| disabled="[[!prefs.settings.a11y.screen_magnifier.value]]"> |
| </settings-dropdown-menu> |
| </div> |
| <settings-toggle-button |
| pref="{{prefs.ash.docked_magnifier.enabled}}" |
| label="$i18n{dockedMagnifierLabel}" |
| disabled="[[prefs.settings.a11y.screen_magnifier.value]]"> |
| </settings-toggle-button> |
| <div class="settings-box continuation"> |
| <div class="start sub-item">$i18n{dockedMagnifierZoomLabel}</div> |
| <settings-dropdown-menu label="$i18n{dockedMagnifierZoomLabel}" |
| pref="{{prefs.ash.docked_magnifier.scale}}" |
| menu-options="[[screenMagnifierZoomOptions_]]" |
| disabled="[[!prefs.ash.docked_magnifier.enabled.value]]"> |
| </settings-dropdown-menu> |
| </div> |
| <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_" |
| sub-label="$i18n{appearanceSettingsDescription}" embedded></cr-link-row> |
| |
| <h2>$i18n{keyboardAndTextInputHeading}</h2> |
| <settings-toggle-button class="first" |
| pref="{{prefs.settings.a11y.sticky_keys_enabled}}" |
| label="$i18n{stickyKeysLabel}"> |
| </settings-toggle-button> |
| <settings-toggle-button |
| pref="{{prefs.settings.a11y.virtual_keyboard}}" |
| label="$i18n{onScreenKeyboardLabel}"> |
| </settings-toggle-button> |
| <settings-toggle-button |
| pref="{{prefs.settings.a11y.dictation}}" |
| label="$i18n{dictationLabel}" |
| sub-label="$i18n{dictationDescription}"> |
| </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="[[showExperimentalSwitchAccess_]]"> |
| <settings-toggle-button |
| pref="{{prefs.settings.a11y.switch_access}}" |
| label="$i18n{switchAccessLabel}"> |
| </settings-toggle-button> |
| <iron-collapse opened="[[prefs.settings.a11y.switch_access.value]]"> |
| <cr-link-row label="$i18n{switchAccessOptionsLabel}" |
| on-click="onSwitchAccessSettingsTap_" embedded external> |
| </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> |
| |
| <h2>$i18n{mouseAndTouchpadHeading}</h2> |
| <settings-toggle-button class="first" |
| pref="{{prefs.settings.a11y.autoclick}}" |
| label="$i18n{clickOnStopLabel}"> |
| </settings-toggle-button> |
| <div class="settings-box continuation" |
| hidden$="[[!prefs.settings.a11y.autoclick.value]]"> |
| <div class="start sub-item">$i18n{delayBeforeClickLabel}</div> |
| <settings-dropdown-menu label="$i18n{delayBeforeClickLabel}" |
| pref="{{prefs.settings.a11y.autoclick_delay_ms}}" |
| menu-options="[[autoClickDelayOptions_]]" |
| disabled="[[!prefs.settings.a11y.autoclick.value]]"> |
| </settings-dropdown-menu> |
| </div> |
| <template is="dom-if" if="[[showExperimentalAutoclick_]]"> |
| <div class="sub-item"> |
| <settings-toggle-button class="continuation sub-item" |
| hidden$="[[!prefs.settings.a11y.autoclick.value]]" |
| pref="{{prefs.settings.a11y.autoclick_revert_to_left_click}}" |
| label="$i18n{autoclickRevertToLeftClick}"> |
| </settings-toggle-button> |
| </div> |
| <div class="settings-box continuation" |
| hidden$="[[!prefs.settings.a11y.autoclick.value]]"> |
| <div class="start sub-item" id="autoclickMovementThresholdLabel"> |
| $i18n{autoclickMovementThresholdLabel} |
| </div> |
| <settings-dropdown-menu |
| aria-labelledby="autoclickMovementThresholdLabel" |
| pref="{{prefs.settings.a11y.autoclick_movement_threshold}}" |
| menu-options="[[autoClickMovementThresholdOptions_]]" |
| disabled="[[!prefs.settings.a11y.autoclick.value]]"> |
| </settings-dropdown-menu> |
| </div> |
| </template> |
| <settings-toggle-button |
| pref="{{prefs.settings.a11y.large_cursor_enabled}}" |
| label="$i18n{largeMouseCursorLabel}"> |
| </settings-toggle-button> |
| <div class="settings-box continuation" |
| hidden$="[[!prefs.settings.a11y.large_cursor_enabled.value]]"> |
| <div class="start sub-item">$i18n{largeMouseCursorSizeLabel}</div> |
| <settings-slider |
| pref="{{prefs.settings.a11y.large_cursor_dip_size}}" |
| min="25" max="64" |
| label-min="$i18n{largeMouseCursorSizeDefaultLabel}" |
| label-max="$i18n{largeMouseCursorSizeLargeLabel}"> |
| </settings-slider> |
| </div> |
| <settings-toggle-button |
| 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> |
| |
| <h2>$i18n{audioHeading}</h2> |
| <settings-toggle-button class="first" |
| pref="{{prefs.settings.a11y.mono_audio}}" |
| label="$i18n{monoAudioLabel}"> |
| </settings-toggle-button> |
| <settings-toggle-button id="startupSoundEnabled" class="first" |
| pref=" " |
| on-change="toggleStartupSoundEnabled_" |
| label="$i18n{startupSoundLabel}"> |
| </settings-toggle-button> |
| |
| <template is="dom-if" if="[[!isGuest_]]"> |
| <a class="settings-box two-line inherit-color no-outline" tabindex="-1" |
| target="_blank" |
| href="https://chrome.google.com/webstore/category/collection/accessibility"> |
| <div class="start"> |
| $i18n{additionalFeaturesTitle} |
| <div class="secondary" id="moreFeaturesSecondary"> |
| $i18n{a11yWebStore} |
| </div> |
| </div> |
| <cr-icon-button actionable class="icon-external" |
| aria-label="$i18n{additionalFeaturesTitle}" |
| aria-describedby="moreFeaturesSecondary"></cr-icon-button> |
| </a> |
| </template> |
| </template> |
| <script src="manage_a11y_page.js"></script> |
| </dom-module> |
