Skip to content

GitLab

T
tangled
Commit 701e8046 authored by Josiah K's avatar Josiah K Committed by Chromium LUCI CQ
Browse files
Options

[Switch Access] Display add/remove icon next to switch when pending add/removal 

Adding: https://screenshot.googleplex.com/8s6KD8T8eYsJsdy
Removing: https://screenshot.googleplex.com/8koetbZZpVrfz4H

Fixed: 1161124
AX-Relnotes: N/A.
Change-Id: I4d9f54ebea6496d3e67a7173047c23e577de2ee7
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2600143
Commit-Queue: Josiah Krutz <josiahk@google.com>
Reviewed-by: default avatarJosiah Krutz <josiahk@google.com>
Reviewed-by: default avatarKyle Horimoto <khorimoto@chromium.org>
Reviewed-by: default avatarDavid Tseng <dtseng@chromium.org>
Cr-Commit-Position: refs/heads/master@{#839801}
parent 7ad59599
Hide whitespace changes
Inline Side-by-side
Showing with 108 additions and 7 deletions
chrome/app/os_settings_strings.grdp
View file @ 701e8046
......@@ -1048,6 +1048,18 @@ Press an assigned switch to remove assignment.
<message name="IDS_SETTINGS_SWITCH_ACCESS_ACTION_ASSIGNMENT_DIALOG_EXIT" desc="The label of the button to exit the switch access action assignment dialog without making any changes. Switch Access is an alternative input method designed for users with limited mobility, where the user has as little as one switch (for example, a button) to control the computer.">
Exit
</message>
<message name="IDS_SETTINGS_SWITCH_ACCESS_ACTION_ASSIGNMENT_DIALOG_ASSIGNED_ICON_LABEL" desc="A label for an icon indicating a switch is assigned to an action. Switch Access is an alternative input method designed for users with limited mobility, where the user has as little as one switch (for example, a button) to control the computer.">
Assigned
</message>
<message name="IDS_SETTINGS_SWITCH_ACCESS_ACTION_ASSIGNMENT_DIALOG_ADD_ASSIGNMENT_ICON_LABEL" desc="A label for an icon indicating a switch is ready to add as an assignment to an action. Switch Access is an alternative input method designed for users with limited mobility, where the user has as little as one switch (for example, a button) to control the computer.">
Add assignment
</message>
<message name="IDS_SETTINGS_SWITCH_ACCESS_ACTION_ASSIGNMENT_DIALOG_REMOVE_ASSIGNMENT_ICON_LABEL" desc="A label for an icon indicating a switch is ready to remove as an assignment from an action. Switch Access is an alternative input method designed for users with limited mobility, where the user has as little as one switch (for example, a button) to control the computer.">
Remove assignment
</message>
<message name="IDS_SETTINGS_SWITCH_ACCESS_ACTION_ASSIGNMENT_DIALOG_ERROR_ICON_LABEL" desc="The label for an icon indicating that there was an error adding or removing a switch assignment. Switch Access is an alternative input method designed for users with limited mobility, where the user has as little as one switch (for example, a button) to control the computer.">
Error
</message>
<message name="IDS_SETTINGS_ACCESSIBILITY_TEXT_TO_SPEECH_HEADING" desc="In the settings tab, the heading for accessibility features that enable the computer to speak text from the computer screen.">
Text-to-Speech
</message>
......
chrome/browser/resources/settings/chromeos/os_a11y_page/switch_access_action_assignment_dialog.html
View file @ 701e8046
......@@ -45,8 +45,20 @@
margin-inline-end: 10px;
}
.add-assignment-icon {
--iron-icon-fill-color: var(--cros-icon-color-secondary);
}
.assigned-icon {
--iron-icon-fill-color: var(--cros-icon-color-prominent);
}
.remove-assignment-icon {
--iron-icon-fill-color: var(--cros-icon-color-alert);
}
#errorIcon {
--iron-icon-fill-color: #d93025;
--iron-icon-fill-color: var(--cros-icon-color-alert);
}
#button-container {
......@@ -60,7 +72,7 @@
}
#error {
color: var(--google-red-600);
color: var(--cros-icon-color-alert);
display: flex;
}
</style>
......@@ -75,7 +87,9 @@
<template is="dom-if" if="[[assignments_.length]]">
<template is="dom-repeat" items="[[assignments_]]" as="assignment">
<div class="switch-assignment">
<iron-icon icon="os-settings:hollow-check-circle" class="icon">
<iron-icon icon="os-settings:[[computeIcon_(assignment, assignmentState_)]]"
class$="icon [[computeIcon_(assignment, assignmentState_)]]-icon"
aria-label="[[computeIconLabel_(assignment, assignmentState_)]]">
</iron-icon>
[[assignment]]
</div>
......@@ -85,7 +99,8 @@
<div id="errorContainer">
<template is="dom-if" if="[[errorText_]]">
<div id="error" aria-live="polite">
<iron-icon id="errorIcon" icon="os-settings:warning" class="icon">
<iron-icon id="errorIcon" icon="os-settings:error" class="icon"
aria-label="$i18n{switchAccessActionAssignmentDialogErrorIconLabel}">
</iron-icon>
[[errorText_]]
</div>
......
chrome/browser/resources/settings/chromeos/os_a11y_page/switch_access_action_assignment_dialog.js
View file @ 701e8046
......@@ -36,6 +36,16 @@
previous: 'settings.a11y.switch_access.previous.key_codes'
};
/**
* Various icons representing the state of a given key assignment.
* @enum {string}
*/
/* #export */ const AssignmentIcon = {
ASSIGNED: 'assigned',
ADD_ASSIGNMENT: 'add-assignment',
REMOVE_ASSIGNMENT: 'remove-assignment',
};
Polymer({
is: 'settings-switch-access-action-assignment-dialog',
......@@ -228,6 +238,7 @@ Polymer({
return;
}
this.assignmentState_ = AssignmentState.WAIT_FOR_CONFIRMATION;
this.push('assignments_', this.currentKey_);
},
/**
......@@ -324,6 +335,55 @@ Polymer({
this.getLabelForAction_(action));
},
/**
* Returns the image to use for the assignment's icon. The value must match
* one of iron-icon's os-settings:(*) icon names.
* @param {string} assignment
* @return {AssignmentIcon}
* @private
*/
computeIcon_(assignment) {
if (assignment !== this.currentKey_) {
return AssignmentIcon.ASSIGNED;
}
switch (this.assignmentState_) {
case AssignmentState.WAIT_FOR_KEY:
case AssignmentState.WARN_ALREADY_ASSIGNED_ACTION:
case AssignmentState.WARN_UNRECOGNIZED_KEY:
case AssignmentState.WARN_CANNOT_REMOVE_LAST_SELECT_SWITCH:
return AssignmentIcon.ASSIGNED;
case AssignmentState.WAIT_FOR_CONFIRMATION:
case AssignmentState.WARN_NOT_CONFIRMED:
return AssignmentIcon.ADD_ASSIGNMENT;
case AssignmentState.WAIT_FOR_CONFIRMATION_REMOVAL:
case AssignmentState.WARN_NOT_CONFIRMED_REMOVAL:
return AssignmentIcon.REMOVE_ASSIGNMENT;
}
throw new Error('Invalid assignment state.');
},
/**
* Returns the icon label describing the icon for the specified assignment.
* @param {string} assignment
* @return {string}
* @private
*/
computeIconLabel_(assignment) {
const icon = this.computeIcon_(assignment);
switch (icon) {
case AssignmentIcon.ASSIGNED:
return this.i18n('switchAccessActionAssignmentDialogAssignedIconLabel');
case AssignmentIcon.ADD_ASSIGNMENT:
return this.i18n(
'switchAccessActionAssignmentDialogAddAssignmentIconLabel');
case AssignmentIcon.REMOVE_ASSIGNMENT:
return this.i18n(
'switchAccessActionAssignmentDialogRemoveAssignmentIconLabel');
}
throw new Error('Invalid assignment icon.');
},
/**
* @param {!AssignmentState} assignmentState
* @param {!Array<string>} assignments
......
chrome/browser/resources/settings/chromeos/os_icons.html
View file @ 701e8046
......@@ -66,7 +66,6 @@ These icons may appear blurry.
<g id="google-drive"><path fill-rule="evenodd" clip-rule="evenodd" d="M18.7333 12L13.0167 2H7.31665V2.00833L13.025 12H18.7333ZM8.27502 12.8334L5.41669 17.8334H16.35L19.2084 12.8334H8.27502ZM6.59167 3.26672L1.125 12.8334L3.98333 17.8251L9.45 8.26672C9.45 8.27506 6.59167 3.26672 6.59167 3.26672Z"></path></g>
<g id="google-play"><path fill-rule="evenodd" clip-rule="evenodd" d="M16.8167 9.06658L14.2667 7.61658L11.8834 9.99991L14.2667 12.3832L16.8167 10.9332C17.275 10.6749 17.5 10.3416 17.5 9.99991C17.5 9.65824 17.275 9.32491 16.8167 9.06658ZM3.92498 2.04163C4.93332 3.04996 10.9417 9.05829 10.9417 9.05829L13.0666 6.93329L4.14998 1.88329C4.09165 1.84996 4.03332 1.82496 3.97498 1.79996C3.83332 1.74163 3.72498 1.84163 3.84998 1.97496C3.87498 1.99163 3.89998 2.01663 3.92498 2.04163ZM3.92501 17.9583C3.90001 17.9833 3.87501 18.0083 3.85834 18.025C3.73334 18.15 3.84168 18.2583 3.98334 18.2C4.04168 18.175 4.10001 18.15 4.15834 18.1166L13.0667 13.0667L10.9417 10.9417C10.9417 10.9417 4.94168 16.95 3.92501 17.9583ZM10 9.99995C10 9.99995 2.975 2.97495 2.81667 2.81662C2.65833 2.65828 2.5 2.75828 2.5 2.97495V17.025C2.5 17.2416 2.65833 17.3416 2.81667 17.1833C2.975 17.025 10 9.99995 10 9.99995Z"></path></g>
<g id="hard-drive"><path d="M14 14C14 14.5523 13.5523 15 13 15C12.4477 15 12 14.5523 12 14C12 13.4477 12.4477 13 13 13C13.5523 13 14 13.4477 14 14Z"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M5 2C3.89543 2 3 2.89543 3 4V16C3 17.1046 3.89543 18 5 18H15C16.1046 18 17 17.1046 17 16V4C17 2.89543 16.1046 2 15 2H5ZM5 16H15V12H5V16ZM5 10H15V4H5V10Z"></path></g>
<g id="hollow-check-circle"><path d="M13.7071 7.29289C13.3166 6.90237 12.6834 6.90237 12.2929 7.29289L9 10.5858L7.70711 9.29289C7.31658 8.90237 6.68342 8.90237 6.29289 9.29289C5.90237 9.68342 5.90237 10.3166 6.29289 10.7071L8.29289 12.7071C8.68342 13.0976 9.31658 13.0976 9.70711 12.7071L13.7071 8.70711C14.0976 8.31658 14.0976 7.68342 13.7071 7.29289Z" fill="#1A73E8"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M10 18C14.4183 18 18 14.4183 18 10C18 5.58172 14.4183 2 10 2C5.58172 2 2 5.58172 2 10C2 14.4183 5.58172 18 10 18ZM10 16C13.3137 16 16 13.3137 16 10C16 6.68629 13.3137 4 10 4C6.68629 4 4 6.68629 4 10C4 13.3137 6.68629 16 10 16Z" fill="#1A73E8"></path></g>
<g id="ic-checked-filled"><circle cx="10" cy="10" r="8" fill="#1A73E8"></circle><path fill-rule="evenodd" clip-rule="evenodd" d="M8.33333 11.833L6.16667 9.66634L5 10.833L8.33333 14.1663L15 7.49967L13.8333 6.33301L8.33333 11.833Z" fill="white"></path></g>
<g id="lock"><path d="M11.75 12.5C11.75 13.4665 10.9665 14.25 10 14.25C9.0335 14.25 8.25 13.4665 8.25 12.5C8.25 11.5335 9.0335 10.75 10 10.75C10.9665 10.75 11.75 11.5335 11.75 12.5Z"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M14 7H13.5V5C13.5 3.34315 11.6569 2 10 2C8.34315 2 6.5 3.34315 6.5 5V7H6C4.89543 7 4 7.89543 4 9V16C4 17.1046 4.89543 18 6 18H14C15.1046 18 16 17.1046 16 16V9C16 7.89543 15.1046 7 14 7ZM12 5.5V7H8V5.5C8 5 8.5 3.5 10 3.5C11.5 3.5 12 5 12 5.5ZM6 9V16H14V9H6Z"></path></g>
<g id="keyboard"><path fill-rule="evenodd" clip-rule="evenodd" d="M18 3H2C0.9 3 0.01 3.9 0.01 5L0 15C0 16.1 0.9 17 2 17H18C19.1 17 20 16.1 20 15V5C20 3.9 19.1 3 18 3ZM18 5V15H2V5H18ZM11 6H9V8H11V6ZM9 9H11V11H9V9ZM8 6H6V8H8V6ZM6 9H8V11H6V9ZM5 9H3V11H5V9ZM3 6H5V8H3V6ZM14 12H6V14H14V12ZM12 9H14V11H12V9ZM14 6H12V8H14V6ZM15 9H17V11H15V9ZM17 6H15V8H17V6Z"></path></g>
......@@ -79,8 +78,11 @@ These icons may appear blurry.
<g id="sync"><path fill-rule="evenodd" clip-rule="evenodd" d="M8.99977 3.07092L8.9991 5.1002C6.71731 5.56382 5 7.58136 5 10C5 11.8507 6.00553 13.4666 7.50008 14.3311L7.5 12H9V17H4V15.5L5.6705 15.5009C4.04414 14.2191 3 12.2315 3 10C3 6.55562 5.48772 3.69227 8.76441 3.1087L8.99977 3.07092ZM16 3V4.5L14.3315 4.5007C15.9567 5.78256 17 7.76944 17 10C17 13.5264 14.3924 16.4438 11.0002 16.9291L11.0009 14.8998C13.2827 14.4362 15 12.4186 15 10C15 8.14968 13.9949 6.5341 12.5009 5.66945L12.5 8H11V3H16Z"></path></g>
<g id="wallpaper"><path fill-rule="evenodd" clip-rule="evenodd" d="M4 3H16C17.1046 3 18 3.89543 18 5V15C18 16.1046 17.1046 17 16 17H4C2.89543 17 2 16.1046 2 15V5C2 3.89543 2.89543 3 4 3ZM4 5V15H16V5H4ZM6 13L9 7L11 11L12 9.5L14 13H6Z"></path></g>
<!-- Exclamation mark in circle -->
<g id="warning"><path fill-rule="evenodd" clip-rule="evenodd" d="M9 10H11V6H9V10ZM10 2C5.584 2 2 5.584 2 10C2 14.416 5.584 18 10 18C14.416 18 18 14.416 18 10C18 5.584 14.416 2 10 2ZM10 16C6.6925 16 4 13.3075 4 10C4 6.6925 6.6925 4 10 4C13.3075 4 16 6.6925 16 10C16 13.3075 13.3075 16 10 16ZM9 14H11V12H9V14Z"></path></g>
<!-- Switch Access Action Assignment Dialog icons -->
<g id="add-assignment" fill-rule="evenodd"><path fill-rule="evenodd" clip-rule="evenodd" d="M14 9V11H11V14H9V11H6V9H9V6H11V9H14ZM10 2C5.576 2 2 5.576 2 10C2 14.424 5.576 18 10 18C14.424 18 18 14.424 18 10C18 5.576 14.424 2 10 2ZM10 16C6.6925 16 4 13.3075 4 10C4 6.6925 6.6925 4 10 4C13.3075 4 16 6.6925 16 10C16 13.3075 13.3075 16 10 16Z"></path></g>
<g id="assigned"><path d="M13.7071 7.29289C13.3166 6.90237 12.6834 6.90237 12.2929 7.29289L9 10.5858L7.70711 9.29289C7.31658 8.90237 6.68342 8.90237 6.29289 9.29289C5.90237 9.68342 5.90237 10.3166 6.29289 10.7071L8.29289 12.7071C8.68342 13.0976 9.31658 13.0976 9.70711 12.7071L13.7071 8.70711C14.0976 8.31658 14.0976 7.68342 13.7071 7.29289Z"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M10 18C14.4183 18 18 14.4183 18 10C18 5.58172 14.4183 2 10 2C5.58172 2 2 5.58172 2 10C2 14.4183 5.58172 18 10 18ZM10 16C13.3137 16 16 13.3137 16 10C16 6.68629 13.3137 4 10 4C6.68629 4 4 6.68629 4 10C4 13.3137 6.68629 16 10 16Z"></path></g>
<g id="error"><path fill-rule="evenodd" clip-rule="evenodd" d="M9 10H11V6H9V10ZM10 2C5.584 2 2 5.584 2 10C2 14.416 5.584 18 10 18C14.416 18 18 14.416 18 10C18 5.584 14.416 2 10 2ZM10 16C6.6925 16 4 13.3075 4 10C4 6.6925 6.6925 4 10 4C13.3075 4 16 6.6925 16 10C16 13.3075 13.3075 16 10 16ZM9 14H11V12H9V14Z"></path></g>
<g id="remove-assignment" fill-rule="evenodd"><path fill-rule="evenodd" clip-rule="evenodd" d="M12.072 6.79999L9.99999 8.87199L7.92799 6.79999L6.79999 7.92799L8.87199 9.99999L6.79999 12.072L7.92799 13.2L9.99999 11.128L12.072 13.2L13.2 12.072L11.128 9.99999L13.2 7.92799L12.072 6.79999ZM10 2C5.576 2 2 5.576 2 10C2 14.424 5.576 18 10 18C14.424 18 18 14.424 18 10C18 5.576 14.424 2 10 2ZM10 16C6.6925 16 4 13.3075 4 10C4 6.6925 6.6925 4 10 4C13.3075 4 16 6.6925 16 10C16 13.3075 13.3075 16 10 16Z"></path></g>
<!-- Keep alphabetized. -->
......
chrome/browser/ui/webui/settings/chromeos/accessibility_section.cc
View file @ 701e8046
......@@ -509,6 +509,14 @@ void AccessibilitySection::AddLoadTimeData(
{"assignSelectSwitchLabel", IDS_SETTINGS_ASSIGN_SELECT_SWITCH_LABEL},
{"assignNextSwitchLabel", IDS_SETTINGS_ASSIGN_NEXT_SWITCH_LABEL},
{"assignPreviousSwitchLabel", IDS_SETTINGS_ASSIGN_PREVIOUS_SWITCH_LABEL},
{"switchAccessActionAssignmentDialogAssignedIconLabel",
IDS_SETTINGS_SWITCH_ACCESS_ACTION_ASSIGNMENT_DIALOG_ASSIGNED_ICON_LABEL},
{"switchAccessActionAssignmentDialogAddAssignmentIconLabel",
IDS_SETTINGS_SWITCH_ACCESS_ACTION_ASSIGNMENT_DIALOG_ADD_ASSIGNMENT_ICON_LABEL},
{"switchAccessActionAssignmentDialogRemoveAssignmentIconLabel",
IDS_SETTINGS_SWITCH_ACCESS_ACTION_ASSIGNMENT_DIALOG_REMOVE_ASSIGNMENT_ICON_LABEL},
{"switchAccessActionAssignmentDialogErrorIconLabel",
IDS_SETTINGS_SWITCH_ACCESS_ACTION_ASSIGNMENT_DIALOG_ERROR_ICON_LABEL},
{"switchAccessActionAssignmentDialogTitle",
IDS_SETTINGS_SWITCH_ACCESS_ACTION_ASSIGNMENT_DIALOG_TITLE},
{"switchAccessActionAssignmentDialogWarnNotConfirmedPrompt",
......
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