<style include="settings-shared">
:host {
--cr-section-indent-width: 60px;
}
.sub-item {
padding-inline-start: var(--cr-section-indent-width);
}
.settings-box {
padding-inline-start: 0;
}
#details {
align-items: center;
display: flex;
flex: auto;
}
.start-padding {
padding-inline-start: var(--cr-section-padding);
}
settings-toggle-button,
cr-link-row {
padding-inline-end: var(--cr-section-padding);
padding-inline-start: var(--cr-section-padding);
}
#facegaze-icon {
padding-inline-end: var(--cr-section-padding);
}
</style>
<settings-toggle-button
id="autoClickToggle"
pref="{{prefs.settings.a11y.autoclick}}"
icon="os-settings:autoclick"
label="$i18n{clickOnStopLabel}"
sub-label="$i18n{clickOnStopDescription}"
deep-link-focus-id$="[[Setting.kAutoClickWhenCursorStops]]">
</settings-toggle-button>
<div class="sub-item" hidden$="[[!prefs.settings.a11y.autoclick.value]]">
<div class="settings-box">
<div class="start settings-box-text" aria-hidden="true">
$i18n{delayBeforeClickLabel}
</div>
<settings-dropdown-menu id="delayBeforeClickDropdown"
label="$i18n{delayBeforeClickLabel}"
pref="{{prefs.settings.a11y.autoclick_delay_ms}}"
menu-options="[[autoClickDelayOptions_]]"
disabled="[[!prefs.settings.a11y.autoclick.value]]">
</settings-dropdown-menu>
</div>
<settings-toggle-button id="autoClickStabilizePositionToggle"
class="settings-box hr"
pref="{{prefs.settings.a11y.autoclick_stabilize_position}}"
label="$i18n{autoclickStabilizeCursorPosition}">
</settings-toggle-button>
<div class="settings-box">
<div class="start settings-box-text" aria-hidden="true">
$i18n{autoclickMovementThresholdLabel}
</div>
<settings-dropdown-menu id="autoclickMovementThresholdDropdown"
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 id="autoClickRevertToLeftClickToggle"
class="settings-box hr"
pref="{{prefs.settings.a11y.autoclick_revert_to_left_click}}"
label="$i18n{autoclickRevertToLeftClick}">
</settings-toggle-button>
</div>
<template is="dom-if" if="[[isAccessibilityMouseKeysEnabled_]]">
<settings-toggle-button
id="enableMouseKeys"
icon="os-settings:mouse-keys"
pref="{{prefs.settings.a11y.mouse_keys.enabled}}"
label="$i18n{mouseKeysLabel}"
sub-label="$i18n{mouseKeysDescription}"
deep-link-focus-id$="[[Setting.kMouseKeysEnabled]]">
</settings-toggle-button>
<div class="sub-item"
hidden$="[[!prefs.settings.a11y.mouse_keys.enabled.value]]">
<div class="settings-box continuation">
<div class="start settings-box-text" id="mouseKeysAcceleration"
aria-hidden="true">
$i18n{mouseKeysAcceleration}
</div>
<settings-slider show-markers
pref="{{prefs.settings.a11y.mouse_keys.acceleration}}"
ticks="[[mouseKeysAccelerationTicks_()]]"
label-aria="$i18n{mouseKeysAcceleration}"
label-min="$i18n{mouseKeysAccelerationMinLabel}"
label-max="$i18n{mouseKeysAccelerationMaxLabel}">
</settings-slider>
</div>
<div class="settings-box continuation">
<div class="start settings-box-text" id="mouseKeysMaxSpeed"
aria-hidden="true">
$i18n{mouseKeysMaxSpeed}
</div>
<settings-slider show-markers
pref="{{prefs.settings.a11y.mouse_keys.max_speed}}"
ticks="[[mouseKeysMaxSpeedTicks_()]]"
label-aria="$i18n{mouseKeysMaxSpeed}"
label-min="$i18n{mouseKeysMaxSpeedMinLabel}"
label-max="$i18n{mouseKeysMaxSpeedMaxLabel}">
</settings-slider>
</div>
<settings-toggle-button id="mouseKeysUsePrimaryKeys"
class="settings-box hr"
pref="{{prefs.settings.a11y.mouse_keys.use_primary_keys}}"
label="$i18n{mouseKeysUsePrimaryKeys}">
</settings-toggle-button>
<div class="settings-box"
hidden$="[[!prefs.settings.a11y.mouse_keys.use_primary_keys.value]]">
<div class="start settings-box-text" aria-hidden="true">
$i18n{mouseKeysDominantHand}
</div>
<settings-dropdown-menu id="mouseKeysDominantHand"
label="$i18n{mouseKeysDominantHand}"
pref="{{prefs.settings.a11y.mouse_keys.dominant_hand}}"
menu-options="[[mouseKeysDominantHandOptions_]]">
</settings-dropdown-menu>
</div>
</div>
</template>
<!-- TODO(b/341770655): Add deep link focus ID -->
<template is="dom-if" if="[[isAccessibilityFaceGazeEnabled_]]">
<cr-link-row
id="faceGazePageRow"
class="hr"
start-icon="os-settings:face-gaze"
label="$i18n{accessibilityFaceGazeLabel}"
sub-label="$i18n{accessibilityFaceGazeDescription}"
on-click="onFaceGazeSettingsClick_"
role-description="$i18n{subpageArrowRoleDescription}">
</cr-link-row>
</template>
<settings-toggle-button
id="largeCursorEnabledControl"
class="hr"
pref="{{prefs.settings.a11y.large_cursor_enabled}}"
label="$i18n{largeMouseCursorLabel}"
deep-link-focus-id$="[[Setting.kLargeCursor]]">
</settings-toggle-button>
<div class="sub-item">
<div class="settings-box"
hidden$="[[!prefs.settings.a11y.large_cursor_enabled.value]]">
<div class="start settings-box-text" aria-hidden="true">
$i18n{largeMouseCursorSizeLabel}
</div>
<settings-slider
id="largeCursorSizeSlider"
pref="{{prefs.settings.a11y.large_cursor_dip_size}}"
min="25" max="128"
label-aria="$i18n{largeMouseCursorSizeLabel}"
label-min="$i18n{largeMouseCursorSizeDefaultLabel}"
label-max="$i18n{largeMouseCursorSizeLargeLabel}">
</settings-slider>
</div>
</div>
<div class="settings-box start-padding">
<div class="start settings-box-text" id="cursorColorOptionsLabel">
$i18n{cursorColorOptionsLabel}
</div>
<settings-dropdown-menu id="cursorColorDropdown"
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 id="cursorHighlightToggle"
class="hr"
pref="{{prefs.settings.a11y.cursor_highlight}}"
label="$i18n{cursorHighlightLabel}"
deep-link-focus-id$="[[Setting.kHighlightCursorWhileMoving]]">
</settings-toggle-button>
<template is="dom-if" if="[[isAccessibilityOverscrollSettingFeatureEnabled_]]">
<settings-toggle-button id="overscrollToggle"
class="hr"
pref="{{prefs.settings.a11y.overscroll_history_navigation}}"
label="$i18n{overscrollHistoryNavigationTitle}"
deep-link-focus-id$="[[Setting.kOverscrollEnabled]]">
</settings-toggle-button>
</template>
<template is="dom-if" if="[[isAccessibilityDisableTrackpadEnabled_]]">
<div class="settings-box start-padding">
<div class="start settings-box-text" id="disableInternalTrackpadLabel">
$i18n{disableTrackpadLabel}
</div>
<settings-dropdown-menu id="disableInternalTrackpadDropdown"
aria-labeledby="disableInternalTrackpadLabel"
pref="{{prefs.settings.a11y.disable_trackpad_mode}}"
menu-options="[[disableTrackpadOptions_]]"
deep-link-focus-id$="[[Setting.kAccessibilityDisableTrackpad]]">
</settings-dropdown-menu>
</div>
</template>
<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>
<cr-link-row id="pointerSubpageButton" class="hr"
label="$i18n{mouseSettingsTitle}" on-click="onNavigateToSubpageClick"
role-description="$i18n{subpageArrowRoleDescription}" embedded>
</cr-link-row>
Codebase Browser
chromium