Commit 577c452e authored by Sophie Yang's avatar Sophie Yang Committed by Commit Bot

[Switch Access] Add text navigation submenu

This change replaces all of the text navigation actions
on the main menu with the ‘Move cursor’ action. When
‘Move cursor’ is selected, a submenu is opened with all
of the text navigation actions.

Test: With emulated Chrome OS on Linux and both the Switch Access
and improved text input command line flags enabled
(--enable-experimental-accessibility-switch-access and
--enable-experimental-accessibility-switch-access-text), manually
verified that when the ‘Move cursor’ action is selected in the main
menu for an editable text node, the main menu is replaced in the
panel by the text navigation submenu. When the back button is
selected while in the text navigation submenu, the submenu is
replaced in the panel by the main menu, and when the back button
is selected while in the main menu, the menu exits and the panel
disappears.

See go/cros-switch-menu-redesign for more information.

Bug: 994256
Change-Id: I4e0a4f45c082d40b164f13ca56ca5de0067181ff
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1772301Reviewed-by: default avatarAnastasia Helfinstein <anastasi@google.com>
Reviewed-by: default avatarAkihiro Ota <akihiroota@chromium.org>
Commit-Queue: Sophie Yang <sophyang@google.com>
Cr-Commit-Position: refs/heads/master@{#690851}
parent a66c82e2
......@@ -47,6 +47,7 @@ run_jsbundler("switch_access_copied_files") {
"icons/keyboard.svg",
"icons/moveBackwardOneCharOfText.svg",
"icons/moveBackwardOneWordOfText.svg",
"icons/moveCursor.svg",
"icons/moveDownOneLineOfText.svg",
"icons/moveForwardOneCharOfText.svg",
"icons/moveForwardOneWordOfText.svg",
......
<!-- Copyright 2019 The Chromium Authors. All rights reserved.
Use of this source code is governed by a BSD-style license that can be
found in the LICENSE file. -->
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
<polygon fill="#E8EAED" fill-rule="evenodd" points="9 11 4.29 11 6.245 12.872 5.091 14 1 10 5.091 6 6.245 7.128 4.371 9 9 9 9 4.29 7.128 6.245 6 5.091 10 1 14 5.091 12.872 6.245 11 4.371 11 9 15.71 9 13.755 7.128 14.909 6 19 10 14.909 14 13.755 12.872 15.629 11 11 11 11 15.71 12.872 13.755 14 14.909 10 19 6 14.909 7.128 13.755 9 15.629"/>
</svg>
......@@ -547,16 +547,7 @@ class MenuManager {
if (window.switchAccess.improvedTextInputEnabled() &&
node.state[StateType.FOCUSED]) {
// TODO(sophyang): Replace these with getTextNavigationActionsForNode_()
// once the text navigation submenu is implemented.
actions.push(SAConstants.MenuAction.JUMP_TO_BEGINNING_OF_TEXT);
actions.push(SAConstants.MenuAction.JUMP_TO_END_OF_TEXT);
actions.push(SAConstants.MenuAction.MOVE_BACKWARD_ONE_CHAR_OF_TEXT);
actions.push(SAConstants.MenuAction.MOVE_BACKWARD_ONE_WORD_OF_TEXT);
actions.push(SAConstants.MenuAction.MOVE_DOWN_ONE_LINE_OF_TEXT);
actions.push(SAConstants.MenuAction.MOVE_FORWARD_ONE_CHAR_OF_TEXT);
actions.push(SAConstants.MenuAction.MOVE_FORWARD_ONE_WORD_OF_TEXT);
actions.push(SAConstants.MenuAction.MOVE_UP_ONE_LINE_OF_TEXT);
actions.push(SAConstants.MenuAction.MOVE_CURSOR);
actions.push(SAConstants.MenuAction.SELECT_START);
if (this.navigationManager_.selectionStarted()) {
actions.push(SAConstants.MenuAction.SELECT_END);
......@@ -638,6 +629,13 @@ class MenuManager {
}
this.navigationManager_.scroll(action);
break;
case SAConstants.MenuAction.MOVE_CURSOR:
if (this.menuOriginNode_) {
this.openMenu_(
this.menuOriginNode_, SAConstants.MenuId.TEXT_NAVIGATION,
true /** Opening a submenu. */);
}
break;
case SAConstants.MenuAction.JUMP_TO_BEGINNING_OF_TEXT:
this.navigationManager_.jumpToBeginningOfText();
break;
......
......@@ -56,71 +56,77 @@
<img src="icons/scrollUpOrBackward.svg">
<p class="i18n" msgid="scroll_backward"></p>
</button>
<button class="action" id="jumpToBeginningOfText" data-position="10">
<img src="icons/jumpToBeginningOfText.svg">
<p class="i18n" msgid="jump_to_beginning_of_text"></p>
</button>
<button class="action" id="jumpToEndOfText" data-position="11">
<img src="icons/jumpToEndOfText.svg">
<p class="i18n" msgid="jump_to_end_of_text"></p>
</button>
<button class="action" id="moveBackwardOneCharOfText" data-position="12">
<img src="icons/moveBackwardOneCharOfText.svg">
<p class="i18n" msgid="move_backward_one_char_of_text"></p>
</button>
<button class="action" id="moveBackwardOneWordOfText" data-position="13">
<img src="icons/moveBackwardOneWordOfText.svg">
<p class="i18n" msgid="move_backward_one_word_of_text"></p>
</button>
<button class="action" id="moveDownOneLineOfText" data-position="14">
<img src="icons/moveDownOneLineOfText.svg">
<p class="i18n" msgid="move_down_one_line_of_text"></p>
</button>
<button class="action" id="moveForwardOneCharOfText" data-position="15">
<img src="icons/moveForwardOneCharOfText.svg">
<p class="i18n" msgid="move_forward_one_char_of_text"></p>
</button>
<button class="action" id="moveForwardOneWordOfText" data-position="16">
<img src="icons/moveForwardOneWordOfText.svg">
<p class="i18n" msgid="move_forward_one_word_of_text"></p>
</button>
<button class="action" id="moveUpOneLineOfText" data-position="17">
<img src="icons/moveUpOneLineOfText.svg">
<p class="i18n" msgid="move_up_one_line_of_text"></p>
<button class="action" id="moveCursor" data-position="10">
<img src="icons/moveCursor.svg">
<p class="i18n" msgid="move_cursor"></p>
</button>
<button class="action" id="selectStart" data-position="18">
<button class="action" id="selectStart" data-position="11">
<img src="icons/textSelectionStart.svg">
<p class="i18n" msgid="selection_start"></p>
</button>
<button class="action" id="selectEnd" data-position="19">
<button class="action" id="selectEnd" data-position="12">
<img src="icons/textSelectionEnd.svg">
<p class="i18n" msgid="selection_end"></p>
</button>
<button class="action" id="cut" data-position="20">
<button class="action" id="cut" data-position="13">
<img src="icons/cut.svg">
<p class="i18n" msgid="cut"></p>
</button>
<button class="action" id="copy" data-position="21">
<button class="action" id="copy" data-position="14">
<img src="icons/copy.svg">
<p class="i18n" msgid="copy"></p>
</button>
<button class="action" id="paste" data-position="22">
<button class="action" id="paste" data-position="15">
<img src="icons/paste.svg">
<p class="i18n" msgid="paste"></p>
</button>
<button class="action" id="dictation" data-position="23">
<button class="action" id="dictation" data-position="16">
<img src="icons/dictation.svg">
<p class="i18n" msgid="dictation"></p>
</button>
<button class="action" id="showContextMenu" data-position="24">
<button class="action" id="showContextMenu" data-position="17">
<img src="icons/showContextMenu.svg">
<p class="i18n" msgid="show_context_menu"></p>
</button>
<button class="action" id="settings" data-position="25">
<button class="action" id="settings" data-position="18">
<img src="icons/settings.svg">
<p class="i18n" msgid="settings_action"></p>
</button>
</div>
<div id="text_navigation_menu" aria-label="Text Navigation Menu">
<button class="action" id="jumpToBeginningOfText" data-position="0">
<img src="icons/jumpToBeginningOfText.svg">
<p class="i18n" msgid="jump_to_beginning_of_text"></p>
</button>
<button class="action" id="jumpToEndOfText" data-position="1">
<img src="icons/jumpToEndOfText.svg">
<p class="i18n" msgid="jump_to_end_of_text"></p>
</button>
<button class="action" id="moveBackwardOneCharOfText" data-position="2">
<img src="icons/moveBackwardOneCharOfText.svg">
<p class="i18n" msgid="move_backward_one_char_of_text"></p>
</button>
<button class="action" id="moveBackwardOneWordOfText" data-position="3">
<img src="icons/moveBackwardOneWordOfText.svg">
<p class="i18n" msgid="move_backward_one_word_of_text"></p>
</button>
<button class="action" id="moveDownOneLineOfText" data-position="4">
<img src="icons/moveDownOneLineOfText.svg">
<p class="i18n" msgid="move_down_one_line_of_text"></p>
</button>
<button class="action" id="moveForwardOneCharOfText" data-position="5">
<img src="icons/moveForwardOneCharOfText.svg">
<p class="i18n" msgid="move_forward_one_char_of_text"></p>
</button>
<button class="action" id="moveForwardOneWordOfText" data-position="6">
<img src="icons/moveForwardOneWordOfText.svg">
<p class="i18n" msgid="move_forward_one_word_of_text"></p>
</button>
<button class="action" id="moveUpOneLineOfText" data-position="7">
<img src="icons/moveUpOneLineOfText.svg">
<p class="i18n" msgid="move_up_one_line_of_text"></p>
</button>
</div>
<button id="back">
<img src="icons/back.svg">
</button>
......
......@@ -162,6 +162,9 @@
<message desc="The Switch Access action to open the Switch Access settings page. Should be short." name="IDS_SWITCH_ACCESS_SETTINGS_ACTION">
Settings
</message>
<message desc="The Switch Access action to show the text navigation menu for moving the text caret within a text element." name="IDS_SWITCH_ACCESS_MOVE_CURSOR">
Move cursor
</message>
<message desc="The Switch Access action for moving the text caret to the beginning of the text element." name="IDS_SWITCH_ACCESS_JUMP_TO_BEGINNING_OF_TEXT">
Jump to beginning
</message>
......
......@@ -137,6 +137,8 @@ SAConstants.MenuAction = {
MOVE_BACKWARD_ONE_CHAR_OF_TEXT: 'moveBackwardOneCharOfText',
// Move text caret one word backward.
MOVE_BACKWARD_ONE_WORD_OF_TEXT: 'moveBackwardOneWordOfText',
// Open the text navigation menu to move the text caret.
MOVE_CURSOR: 'moveCursor',
// Move text caret one line down.
MOVE_DOWN_ONE_LINE_OF_TEXT: 'moveDownOneLineOfText',
// Move text caret one character forward.
......
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