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: Dominic Mazzoni <dmazzoni@chromium.org>
Commit-Queue: Akihiro Ota <akihiroota@chromium.org>
Cr-Commit-Position: refs/heads/master@{#799379}

chrome/browser/resources/chromeos/accessibility/chromevox/BUILD.gn

@@ -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",

chrome/browser/resources/chromeos/accessibility/chromevox/i_tutorial/components/i_tutorial.html

@@ -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>
 

chrome/browser/resources/chromeos/accessibility/chromevox/i_tutorial/components/i_tutorial.js

@@ -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();
     }
   },
 });

chrome/browser/resources/chromeos/accessibility/chromevox/i_tutorial/components/tutorial_lesson.html

@@ -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>

chrome/browser/resources/chromeos/accessibility/chromevox/i_tutorial/components/tutorial_lesson.js

@@ -161,6 +161,10 @@ export const TutorialLesson = Polymer({
    * @private
    */
   isGoalStateReached() {
+    if (!this.practiceState) {
+      return false;
+    }
+
     if (this.goalStateReached === true) {
       return true;
     }

chrome/browser/resources/chromeos/accessibility/chromevox/i_tutorial/lessons/selects.html

+<!-- 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