ChromeVox Tutorial: Remove text content from tab order

Text content was originally added to the tab order with the intention
to make it more accessible. However, this goes against common practices
on the web and could lead to confusion. Therefore, we are removing
text content from the tab order.

Bug: 1124064
Change-Id: I3e6ff0868b8d7c02ebc41a6a87b202602dfc5968
AX-Relnotes: N/A
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2390870
Auto-Submit: Akihiro Ota <akihiroota@chromium.org>
Commit-Queue: Anastasia Helfinstein <anastasi@google.com>
Reviewed-by: Anastasia Helfinstein <anastasi@google.com>
Cr-Commit-Position: refs/heads/master@{#804057}

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="0">[[ chooseYourExperience ]]</h1>
+  <h1 id="mainMenuHeader" tabindex="-1">[[ 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="0">[[ computeLessonMenuHeader(curriculum, medium) ]]</h1>
+      tabindex="-1">[[ computeLessonMenuHeader(curriculum, medium) ]]</h1>
   <div id="lessonShortcuts"></div>
 </div>
 

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="0">[[ title ]]</h1>
+    <h1 id="title" tabindex="-1">[[ title ]]</h1>
   </template>
   <div id="content">
     <template is="dom-repeat" items="[[ content ]]" as="text">
-      <p tabindex="0">[[ text ]]</p>
+      <p tabindex="-1">[[ text ]]</p>
     </template>
   </div>
   <cr-dialog id="practice" close-text="Exit practice area"
       on-close="endPractice" show-close-button>
-    <div class="title" slot="title" tabindex="0">[[ practiceTitle ]]</div>
-    <div class="body" slot="body" tabindex="0">
+    <div class="title" slot="title" tabindex="-1">[[ practiceTitle ]]</div>
+    <div class="body" slot="body" tabindex="-1">
       <p>[[ practiceInstructions ]]</p>
       <div id="practiceContent"></div>
     </div>