Commit 0e8eb9b5 authored by Akihiro Ota's avatar Akihiro Ota Committed by Commit Bot

ChromeVox Tutorial: Add keyboard basics to OOBE tutorial.

This change:
1. Adds content for tab, shift + tab, enter, and using selects to the
OOBE tutorial.
2. Makes lesson content reachable via tab and shift + tab.

Bug: 1075752
Change-Id: I79ad352c15cf6483b12c43dd43611c891f93f669
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2358133Reviewed-by: default avatarDominic Mazzoni <dmazzoni@chromium.org>
Commit-Queue: Akihiro Ota <akihiroota@chromium.org>
Cr-Commit-Position: refs/heads/master@{#799379}
parent 8744a678
......@@ -196,6 +196,7 @@ run_jsbundler("chromevox_copied_files") {
"i_tutorial/components/tutorial_lesson.js",
"i_tutorial/lessons/basic_navigation.html",
"i_tutorial/lessons/jump_commands.html",
"i_tutorial/lessons/selects.html",
"i_tutorial/lessons/text_fields.html",
"images/chromevox-128.png",
"images/chromevox-16.png",
......
......@@ -99,7 +99,7 @@ h1 {
<div id="mainMenu"
hidden$="[[ shouldHideMainMenu(activeScreen) ]]">
<h1 id="mainMenuHeader" tabindex="-1">[[ chooseYourExperience ]]</h1>
<h1 id="mainMenuHeader" tabindex="0">[[ chooseYourExperience ]]</h1>
<div id="mainMenuButtons">
<cr-button id="newUserButton" on-click="chooseCurriculum">
[[ newUser ]]
......@@ -116,7 +116,7 @@ h1 {
<div id="lessonMenu"
hidden$="[[ shouldHideLessonMenu(activeScreen) ]]">
<h1 id="lessonMenuHeader"
tabindex="-1">[[ computeLessonMenuHeader(curriculum, medium) ]]</h1>
tabindex="0">[[ computeLessonMenuHeader(curriculum, medium) ]]</h1>
<div id="lessonShortcuts"></div>
</div>
......
......@@ -65,6 +65,8 @@ Polymer({
activeScreen: {type: String},
interactiveMode: {type: Boolean, value: false},
// Labels and text content.
chooseYourExperience: {
......@@ -130,7 +132,7 @@ Polymer({
{
content:
[`The Control key can be used at any time to silence any current
speech; however, it does not prevent any new speech from being
speech; please note, it does not prevent any new speech from being
announced. To continue to the next lesson, find and press
the left Shift key, which is directly above the Control key.`],
medium: InteractionMedium.KEYBOARD,
......@@ -194,12 +196,76 @@ Polymer({
autoInteractive: true,
},
{
content: [`In addition to ChromeVox navigation, you can also
use built-in keyboard commands to navigate the screen. ChromeVox
will respect these commands and they work even when ChromeVox is
off. The first example we have is Tab. Pressing Tab will move
keyboard focus, which ChromeVox will follow, to the next focusable
element. Try pressing the Tab key, which is located directly above
the Search key.`],
medium: InteractionMedium.KEYBOARD,
curriculums: [Curriculum.OOBE],
actions: [{
type: 'key_sequence',
value: {keys: {keyCode: [9 /* Tab */]}},
afterActionMsg: 'Great, you found the tab key!'
}],
autoInteractive: true,
},
{
content: [
`You can use Tab + Shift to move to the previous focusable element.
Try pressing the two together to move to the next lesson.`
],
medium: InteractionMedium.KEYBOARD,
curriculums: [Curriculum.OOBE],
actions: [{
type: 'key_sequence',
value: {keys: {keyCode: [9 /* Tab */], shiftKey: [true]}},
}],
autoInteractive: true,
},
{
content: [`Similar to using Search + Space, you can also use Enter to
activate elements. For example, Enter can be used to submit
text in a form field. Try pressing Enter now to move to the next
lesson.`],
medium: InteractionMedium.KEYBOARD,
curriculums: [Curriculum.OOBE],
actions: [
{type: 'key_sequence', value: {keys: {keyCode: [13 /* Enter */]}}}
],
autoInteractive: true,
},
{
content: [`Lastly, you will frequently encounter elements which
require you to select an item out of a list of choices. You can use
the up and down arrow keys to cycle through items. When you've found
the item you want to choose, you can simply stop pressing the arrow
keys. If you wish to practice this skill, find the Practice Area
button and press Enter or Search + Space to activate it. Otherwise,
find and press the Next Lesson button.`],
medium: InteractionMedium.KEYBOARD,
curriculums: [Curriculum.OOBE],
practiceTitle: 'Practice Using Drop-Down Lists',
practiceInstructions:
`Try setting your favorite season from the list below.`,
practiceFile: 'selects',
practiceState: {},
events: [],
hints: []
},
{
title: 'Basic orientation complete!',
content: [
`Well done! You have learned the basics of ChromeVox. You can
replay the basic orientation or exit this tutorial by
finding and clicking on a button below.`,
finding and activating the respective button below.`,
`After you setup your device, you can come back to this tutorial
and view more lessons by pressing Search + O, then T.`,
],
......@@ -451,6 +517,8 @@ Polymer({
return;
}
this.interactiveMode = false;
this.activeLessonIndex = index;
// Lessons observe activeLessonNum. When updated, lessons automatically
......@@ -638,6 +706,7 @@ Polymer({
* @private
*/
startInteractiveMode(actions) {
this.interactiveMode = true;
this.dispatchEvent(new CustomEvent(
'startinteractivemode', {composed: true, detail: {actions}}));
},
......@@ -658,6 +727,19 @@ Polymer({
this.exit();
evt.preventDefault();
evt.stopPropagation();
return;
}
if (window.BackgroundKeyboardHandler &&
window.BackgroundKeyboardHandler.onKeyDown) {
window.BackgroundKeyboardHandler.onKeyDown(evt);
}
if (key === 'Tab' && this.interactiveMode) {
// Prevent Tab from being used in interactive mode. This ensures the user
// can only navigate if they press the expected sequence of keys.
evt.preventDefault();
evt.stopPropagation();
}
},
});
......@@ -24,17 +24,17 @@
<div id="container" hidden>
<template is="dom-if" if="[[ title ]]">
<h1 id="title" tabindex="-1">[[ title ]]</h1>
<h1 id="title" tabindex="0">[[ title ]]</h1>
</template>
<div id="content">
<template is="dom-repeat" items="[[ content ]]" as="text">
<p tabindex="-1">[[ text ]]</p>
<p tabindex="0">[[ text ]]</p>
</template>
</div>
<cr-dialog id="practice" close-text="Exit practice area"
on-close="endPractice" show-close-button>
<div class="title" slot="title">[[ practiceTitle ]]</div>
<div class="body" slot="body">
<div class="title" slot="title" tabindex="0">[[ practiceTitle ]]</div>
<div class="body" slot="body" tabindex="0">
<p>[[ practiceInstructions ]]</p>
<div id="practiceContent"></div>
</div>
......
......@@ -161,6 +161,10 @@ export const TutorialLesson = Polymer({
* @private
*/
isGoalStateReached() {
if (!this.practiceState) {
return false;
}
if (this.goalStateReached === true) {
return true;
}
......
<!-- Copyright 2020 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. -->
<label id="selectLabel">Choose your favorite season</label>
<select aria-labelledby="selectLabel">
<option>Spring</option>
<option>Summer</option>
<option>Fall</option>
<option>Winter</option>
</select>
\ No newline at end of file
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