| <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="chrome://resources/html/i18n_behavior.html"> |
| <link rel="import" href="chrome://resources/html/load_time_data.html"> |
| <link rel="import" href="../../controls/settings_slider.html"> |
| <link rel="import" href="../../controls/settings_toggle_button.html"> |
| <link rel="import" href="../deep_linking_behavior.html"> |
| <link rel="import" href="../os_route.html"> |
| <link rel="import" href="../../router.html"> |
| <link rel="import" href="../../settings_shared_css.html"> |
| <link rel="import" href="../device_page/device_page_browser_proxy.html"> |
| <link rel="import" href="../localized_link/localized_link.html"> |
| <link rel="import" href="../route_origin_behavior.html"> |
| <link rel="import" href="manage_a11y_page_browser_proxy.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; |
| } |
| |
| .settings-box.indented, |
| settings-toggle-button.indented { |
| margin-inline-start: calc(var(--cr-section-indent-padding) + |
| var(--cr-section-indent-width)); |
| } |
| |
| #screenMagnifierZoomHintLabel { |
| white-space: pre-line; |
| } |
| </style> |
| <template is="dom-if" if="[[!isKioskModeActive_]]"> |
| <div class="settings-box row first"> |
| <settings-localized-link |
| localized-string="$i18n{a11yExplanation}" |
| link-url="$i18nRaw{a11yLearnMoreUrl}"> |
| </settings-localized-link> |
| </div> |
| </template> |
| <h2>$i18n{textToSpeechHeading}</h2> |
| <settings-toggle-button |
| pref="{{prefs.settings.accessibility}}" |
| label="$i18n{chromeVoxLabel}" |
| deep-link-focus-id$="[[Setting.kChromeVox]]"> |
| </settings-toggle-button> |
| <iron-collapse opened="[[prefs.settings.accessibility.value]]"> |
| <div class="sub-item"> |
| <cr-link-row id="chromeVoxSubpageButton" |
| class="settings-box" on-click="onChromeVoxSettingsTap_" |
| label="$i18n{chromeVoxOptionsLabel}" external> |
| </cr-link-row> |
| </div> |
| <div class="sub-item"> |
| <cr-link-row id="chromeVoxTutorialButton" |
| class="settings-box" on-click="onChromeVoxTutorialTap_" |
| label="$i18n{chromeVoxTutorialLabel}" external> |
| </cr-link-row> |
| </div> |
| </iron-collapse> |
| <settings-toggle-button |
| pref="{{prefs.settings.a11y.select_to_speak}}" |
| class="hr" |
| label="$i18n{selectToSpeakTitle}" |
| sub-label="[[getSelectToSpeakDescription_( |
| prefs.settings.a11y.select_to_speak.value, hasKeyboard_, |
| '$i18nPolymer{selectToSpeakDisabledDescription}', |
| '$i18nPolymer{selectToSpeakDescription}', |
| '$i18nPolymer{selectToSpeakDescriptionWithoutKeyboard}')]]" |
| deep-link-focus-id$="[[Setting.kSelectToSpeak]]"> |
| </settings-toggle-button> |
| <iron-collapse opened="[[prefs.settings.a11y.select_to_speak.value]]"> |
| <div class="sub-item"> |
| <cr-link-row id="selectToSpeakSubpageButton" |
| class="settings-box" on-click="onSelectToSpeakSettingsTap_" |
| label="$i18n{selectToSpeakOptionsLabel}" external> |
| </cr-link-row> |
| </div> |
| </iron-collapse> |
| |
| <cr-link-row id="ttsSubpageButton" class="hr" |
| label="$i18n{manageTtsSettings}" on-click="onManageTtsSettingsTap_" |
| sub-label="$i18n{ttsSettingsLinkDescription}" |
| role-description="$i18n{subpageArrowRoleDescription}" embedded> |
| </cr-link-row> |
| |
| <h2>$i18n{displayHeading}</h2> |
| <settings-toggle-button |
| pref="{{prefs.settings.a11y.high_contrast_enabled}}" |
| label="$i18n{highContrastLabel}" |
| deep-link-focus-id$="[[Setting.kHighContrastMode]]"> |
| </settings-toggle-button> |
| <settings-toggle-button |
| class="hr" |
| pref="{{prefs.settings.a11y.screen_magnifier}}" |
| label="$i18n{screenMagnifierLabel}" |
| sub-label="[[screenMagnifierHintLabel_]]" |
| disabled="[[prefs.ash.docked_magnifier.enabled.value]]" |
| deep-link-focus-id$="[[Setting.kFullscreenMagnifier]]"> |
| </settings-toggle-button> |
| <template is="dom-if" if="[[prefs.settings.a11y.screen_magnifier.value]]"> |
| <template is="dom-if" if="[[isMagnifierPanningImprovementsEnabled_]]"> |
| <div class="settings-box continuation"> |
| <settings-radio-group id="screenMagnifierMouseFollowingModeRadioGroup" |
| pref="{{prefs.settings.a11y.screen_magnifier_mouse_following_mode}}" |
| class="sub-item"> |
| <template |
| is="dom-if" |
| if="[[isMagnifierContinuousMouseFollowingModeSettingEnabled_]]"> |
| <controlled-radio-button |
| id="screenMagnifierMouseFollowingModeContinuous" |
| name="[[screenMagnifierMouseFollowingModePrefValues_.CONTINUOUS]]" |
| pref="[[prefs.settings.a11y.screen_magnifier_mouse_following_mode]]" |
| label="$i18n{screenMagnifierMouseFollowingModeContinuous}"> |
| </controlled-radio-button> |
| </template> |
| <controlled-radio-button |
| id="screenMagnifierMouseFollowingModeCentered" |
| name="[[screenMagnifierMouseFollowingModePrefValues_.CENTERED]]" |
| pref="[[prefs.settings.a11y.screen_magnifier_mouse_following_mode]]" |
| label="$i18n{screenMagnifierMouseFollowingModeCentered}"> |
| </controlled-radio-button> |
| <controlled-radio-button |
| id="screenMagnifierMouseFollowingModeEdge" |
| name="[[screenMagnifierMouseFollowingModePrefValues_.EDGE]]" |
| pref="[[prefs.settings.a11y.screen_magnifier_mouse_following_mode]]" |
| label="$i18n{screenMagnifierMouseFollowingModeEdge}"> |
| </controlled-radio-button> |
| </settings-radio-group> |
| </div> |
| <settings-toggle-button |
| class="indented hr" |
| pref="{{prefs.settings.a11y.screen_magnifier_focus_following}}" |
| label="$i18n{screenMagnifierFocusFollowingLabel}" |
| deep-link-focus-id$= |
| "[[Setting.kFullscreenMagnifierFocusFollowing]]"> |
| </settings-toggle-button> |
| </template> |
| <div class="settings-box indented"> |
| <div class="flex start settings-box-text" id="labelWrapper"> |
| <div class="label" aria-hidden="true">$i18n{screenMagnifierZoomLabel}</div> |
| <div class="secondary label" id="screenMagnifierZoomHintLabel">$i18n{screenMagnifierZoomHintLabel}</div> |
| </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> |
| </template> |
| <settings-toggle-button |
| class="hr" |
| pref="{{prefs.ash.docked_magnifier.enabled}}" |
| label="$i18n{dockedMagnifierLabel}" |
| disabled="[[prefs.settings.a11y.screen_magnifier.value]]" |
| deep-link-focus-id$="[[Setting.kDockedMagnifier]]"> |
| </settings-toggle-button> |
| <template is="dom-if" if="[[prefs.ash.docked_magnifier.enabled.value]]"> |
| <div class="settings-box continuation"> |
| <div class="start sub-item settings-box-text" aria-hidden="true"> |
| $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> |
| </template> |
| <template is="dom-if" if="[[!isKioskModeActive_]]"> |
| <cr-link-row id="displaySubpageButton" class="hr" |
| label="$i18n{displaySettingsTitle}" on-click="onDisplayTap_" |
| sub-label="$i18n{displaySettingsDescription}" |
| role-description="$i18n{subpageArrowRoleDescription}" embedded> |
| </cr-link-row> |
| <cr-link-row id="appearanceSubpageButton" class="hr" |
| label="$i18n{appearanceSettingsTitle}" on-click="onAppearanceTap_" |
| sub-label="$i18n{appearanceSettingsDescription}" external |
| embedded></cr-link-row> |
| </template> |
| |
| <h2>$i18n{keyboardAndTextInputHeading}</h2> |
| <settings-toggle-button |
| pref="{{prefs.settings.a11y.sticky_keys_enabled}}" |
| label="$i18n{stickyKeysLabel}" |
| deep-link-focus-id$="[[Setting.kStickyKeys]]"> |
| </settings-toggle-button> |
| <settings-toggle-button |
| class="hr" |
| pref="{{prefs.settings.a11y.virtual_keyboard}}" |
| label="$i18n{onScreenKeyboardLabel}" |
| deep-link-focus-id$="[[Setting.kOnScreenKeyboard]]"> |
| </settings-toggle-button> |
| <settings-toggle-button |
| id="enableDictation" |
| class="hr" |
| pref="{{prefs.settings.a11y.dictation}}" |
| label="$i18n{dictationLabel}" |
| sub-label="[[dictationSubtitle_]]" |
| deep-link-focus-id$="[[Setting.kDictation]]"> |
| </settings-toggle-button> |
| <settings-toggle-button |
| class="hr" |
| pref="{{prefs.settings.a11y.focus_highlight}}" |
| label="$i18n{focusHighlightLabel}" |
| deep-link-focus-id$="[[Setting.kHighlightKeyboardFocus]]"> |
| </settings-toggle-button> |
| <settings-toggle-button |
| class="hr" |
| pref="{{prefs.settings.a11y.caret_highlight}}" |
| label="$i18n{caretHighlightLabel}" |
| deep-link-focus-id$="[[Setting.kHighlightTextCaret]]"> |
| </settings-toggle-button> |
| <settings-toggle-button |
| class="hr" |
| pref="{{prefs.settings.a11y.caretbrowsing.enabled}}" |
| on-change="onA11yCaretBrowsingChange_" |
| label="$i18n{caretBrowsingTitle}" |
| sub-label="$i18n{caretBrowsingSubtitle}"> |
| </settings-toggle-button> |
| <template is="dom-if" if="[[!isKioskModeActive_]]"> |
| <settings-toggle-button |
| id="enableSwitchAccess" |
| class="hr" |
| pref="{{prefs.settings.a11y.switch_access.enabled}}" |
| label="$i18n{switchAccessLabel}" |
| deep-link-focus-id$="[[Setting.kEnableSwitchAccess]]"> |
| </settings-toggle-button> |
| <iron-collapse |
| opened="[[prefs.settings.a11y.switch_access.enabled.value]]"> |
| <div class="sub-item"> |
| <cr-link-row id="switchAccessSubpageButton" |
| label="$i18n{switchAccessOptionsLabel}" |
| on-click="onSwitchAccessSettingsTap_" |
| role-description="$i18n{subpageArrowRoleDescription}" embedded> |
| </cr-link-row> |
| </div> |
| </iron-collapse> |
| <cr-link-row id="keyboardSubpageButton" class="hr" |
| label="$i18n{keyboardSettingsTitle}" on-click="onKeyboardTap_" |
| sub-label="$i18n{keyboardSettingsDescription}" |
| role-description="$i18n{subpageArrowRoleDescription}" embedded> |
| </cr-link-row> |
| </template> |
| |
| <h2>$i18n{mouseAndTouchpadHeading}</h2> |
| <settings-toggle-button |
| pref="{{prefs.settings.a11y.autoclick}}" |
| label="$i18n{clickOnStopLabel}" |
| deep-link-focus-id$="[[Setting.kAutoClickWhenCursorStops]]"> |
| </settings-toggle-button> |
| <div class="settings-box continuation" |
| hidden$="[[!prefs.settings.a11y.autoclick.value]]"> |
| <div class="start sub-item settings-box-text" aria-hidden="true"> |
| $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> |
| <div class="sub-item"> |
| <settings-toggle-button class="sub-item" |
| hidden$="[[!prefs.settings.a11y.autoclick.value]]" |
| pref="{{prefs.settings.a11y.autoclick_stabilize_position}}" |
| label="$i18n{autoclickStabilizeCursorPosition}"> |
| </settings-toggle-button> |
| </div> |
| <div class="sub-item"> |
| <settings-toggle-button class="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 settings-box-text" aria-hidden="true"> |
| $i18n{autoclickMovementThresholdLabel} |
| </div> |
| <settings-dropdown-menu |
| label="$i18n{autoclickMovementThresholdLabel}" |
| pref="{{prefs.settings.a11y.autoclick_movement_threshold}}" |
| menu-options="[[autoClickMovementThresholdOptions_]]" |
| disabled="[[!prefs.settings.a11y.autoclick.value]]"> |
| </settings-dropdown-menu> |
| </div> |
| <settings-toggle-button |
| class="hr" |
| pref="{{prefs.settings.a11y.large_cursor_enabled}}" |
| label="$i18n{largeMouseCursorLabel}" |
| deep-link-focus-id$="[[Setting.kLargeCursor]]"> |
| </settings-toggle-button> |
| <div class="settings-box continuation" |
| hidden$="[[!prefs.settings.a11y.large_cursor_enabled.value]]"> |
| <div class="start sub-item settings-box-text" aria-hidden="true"> |
| $i18n{largeMouseCursorSizeLabel} |
| </div> |
| <settings-slider |
| pref="{{prefs.settings.a11y.large_cursor_dip_size}}" |
| min="25" max="64" |
| label-aria="$i18n{largeMouseCursorSizeLabel}" |
| label-min="$i18n{largeMouseCursorSizeDefaultLabel}" |
| label-max="$i18n{largeMouseCursorSizeLargeLabel}"> |
| </settings-slider> |
| </div> |
| <div class="settings-box"> |
| <div class="start settings-box-text" id="cursorColorOptionsLabel"> |
| $i18n{cursorColorOptionsLabel} |
| </div> |
| <settings-dropdown-menu aria-labeledby="cursorColorOptionsLabel" |
| pref="{{prefs.settings.a11y.cursor_color}}" |
| menu-options="[[cursorColorOptions_]]" |
| on-settings-control-change="onA11yCursorColorChange_" |
| deep-link-focus-id$="[[Setting.kEnableCursorColor]]"> |
| </settings-dropdown-menu> |
| </div> |
| <settings-toggle-button |
| class="hr" |
| pref="{{prefs.settings.a11y.cursor_highlight}}" |
| label="$i18n{cursorHighlightLabel}" |
| deep-link-focus-id$="[[Setting.kHighlightCursorWhileMoving]]"> |
| </settings-toggle-button> |
| <cr-link-row id="pointerSubpageButton" class="hr" |
| label="$i18n{mouseSettingsTitle}" on-click="onMouseTap_" |
| sub-label="$i18n{mouseSettingsDescription}" |
| role-description="$i18n{subpageArrowRoleDescription}" embedded> |
| </cr-link-row> |
| <template is="dom-if" if="[[showShelfNavigationButtonsSettings_]]" restamp> |
| <!-- If shelf navigation buttons are implicitly enabled by other a11y |
| settings (e.g. by spoken feedback), the toggle control should be |
| disabled, and toggled regardless of the actual backing pref value. To |
| handle effective pref value changes, wrap the backing pref in a |
| private property, which changes to a stub pref object when the setting |
| is implicitly enabled. --> |
| <settings-toggle-button |
| id="shelfNavigationButtonsEnabledControl" |
| class="hr" |
| disabled="[[shelfNavigationButtonsImplicitlyEnabled_]]" |
| pref="[[shelfNavigationButtonsPref_]]" |
| no-set-pref |
| on-settings-boolean-control-change= |
| "updateShelfNavigationButtonsEnabledPref_" |
| label="$i18n{tabletModeShelfNavigationButtonsSettingLabel}" |
| sub-label="$i18n{tabletModeShelfNavigationButtonsSettingDescription}" |
| learn-more-url="$i18n{tabletModeShelfNavigationButtonsLearnMoreUrl}" |
| on-learn-more-clicked="onShelfNavigationButtonsLearnMoreClicked_" |
| deep-link-focus-id$="[[Setting.kTabletNavigationButtons]]"> |
| </settings-toggle-button> |
| </template> |
| |
| <h2>$i18n{audioAndCaptionsHeading}</h2> |
| <template is="dom-if" if="[[!isKioskModeActive_]]"> |
| <cr-link-row id="captionsSubpageButton" class="first" |
| label="$i18n{captionsTitle}" |
| on-click="onCaptionsClick_" |
| role-description="$i18n{subpageArrowRoleDescription}"> |
| </cr-link-row> |
| </template> |
| <settings-toggle-button |
| class="hr" |
| pref="{{prefs.settings.a11y.mono_audio}}" |
| label="$i18n{monoAudioLabel}" |
| deep-link-focus-id$="[[Setting.kMonoAudio]]"> |
| </settings-toggle-button> |
| <settings-toggle-button id="startupSoundEnabled" |
| class="hr" |
| pref=" " |
| on-change="toggleStartupSoundEnabled_" |
| label="$i18n{startupSoundLabel}" |
| deep-link-focus-id$="[[Setting.kStartupSound]]"> |
| </settings-toggle-button> |
| |
| <template is="dom-if" |
| if="[[shouldShowAdditionalFeaturesLink_(isGuest_, isKioskModeActive_)]]"> |
| <a class="settings-box inherit-color no-outline" tabindex="-1" |
| id="additionalFeaturesLink" target="_blank" |
| href="https://chrome.google.com/webstore/category/collection/3p_accessibility_extensions"> |
| <div class="start settings-box-text"> |
| $i18n{additionalFeaturesTitle} |
| <div class="secondary" id="moreFeaturesSecondary"> |
| $i18n{a11yWebStore} |
| </div> |
| </div> |
| <cr-icon-button 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> |
