ChromeVox Tutorial: Add CSS styling and small UX enhancements.

This change:
1. Increases the text size and line height for tutorial content.
2. Styles the practice area.
3. Practice area UX enhancements (scroll items into view and
prevent clicked links from exiting the tutorial).

Bug: 1124065
Change-Id: I11aeeb75f3c4559fbb0c92aecd5d6b3a6191b0e8
AX-Relnotes: N/A
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2391592
Commit-Queue: Akihiro Ota <akihiroota@chromium.org>
Auto-Submit: Akihiro Ota <akihiroota@chromium.org>
Reviewed-by: Dominic Mazzoni <dmazzoni@chromium.org>
Cr-Commit-Position: refs/heads/master@{#804399}

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

@@ -14,13 +14,10 @@
   top: 0;
 }
 
-#mainMenu {
-  margin: auto;
-  text-align: center;
-  width: 50%;
-}
-
-#lessonMenu {
+#mainMenu,
+#lessonMenu,
+#lessonContainer,
+#nav {
   margin: auto;
   text-align: center;
   width: 50%;
@@ -32,27 +29,9 @@
   box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.3);
   display: flex;
   flex-direction: column;
-}
-
-#lessonContainer {
-  margin: auto;
-  text-align: center;
-  width: 50%;
-}
-
-#nav {
   margin: auto;
-  text-align: center;
-  width: 50%;
-}
-
-h1 {
-  display: flex;
-  flex-direction: column;
-  font-family: Google Sans;
-  font-size: 24px;
-  line-height: 32px;
-  padding: 8px;
+  max-height: 500px;
+  overflow: scroll;
 }
 
 #mainMenuButtons {
@@ -66,14 +45,27 @@ h1 {
 #navSeparator {
   background: rgb(232, 234, 237);
   height: 1px;
-  margin: 10px;
+  margin: 30px;
+}
+
+h1,
+cr-button {
+  font-family: Google Sans;
+}
+
+h1 {
+  display: flex;
+  flex-direction: column;
+  font-size: 32px;
+  line-height: 32px;
+  margin: 20px;
+  padding: 8px;
 }
 
 #mainMenu cr-button,
 #lessonMenu cr-button {
   color: rgb(32, 33, 36);
-  font-family: Roboto;
-  font-size: 18px;
+  font-size: 22px;
   font-style: normal;
   font-weight: normal;
   line-height: 20px;
@@ -82,8 +74,7 @@ h1 {
 
 #navButtons cr-button {
   color: rgb(26, 115, 232);
-  font-family: Roboto;
-  font-size: 13px;
+  font-size: 16px;
   font-style: normal;
   font-weight: 500;
   line-height: 20px;
@@ -146,8 +137,7 @@ h1 {
 </div>
 
 <div id="nav">
-  <div id="navSeparator">
-  </div>
+  <div id="navSeparator"></div>
   <div id="navButtons">
     <cr-button on-click="showPreviousLesson"
         hidden$="[[

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

@@ -3,23 +3,93 @@
      found in the LICENSE file. -->
 <style>
 
+body,
+div,
+h1,
+p,
+cr-button,
+a {
+  font-family: Google Sans;
+}
+
+#title {
+  font-size: 32px;
+}
+
 #content {
   display: block;
-  font-family: Google Sans;
-  font-size: 18px;
+  font-size: 28px;
   font-style: normal;
+  font-weight: normal;
+  line-height: 36px;
+  margin: auto;
+  max-height: 500px;
+  overflow: scroll;
+  text-align: center;
+}
+
+#practice {
+  overflow: scroll;
+}
+
+#practiceTitle {
+  font-size: 28px;
   font-weight: 500;
-  line-height: 24px;
+}
+
+#practiceInstructions {
+  line-height: 32px;
+  margin: 5px;
+  padding: 5px;
+}
+
+#practiceBody {
+  color: #000;
+  font-size: 22px;
+  font-style: normal;
+  font-weight: normal;
+  padding: 20px;
   text-align: center;
 }
 
+#practiceBody h1,
+#practiceBody h2,
+#practiceBody h3,
+#practiceBody h4,
+#practiceBody h5,
+#practiceBody h6 {
+  margin: 5px;
+}
+
+#practiceContent cr-button {
+  font-size: 18px;
+  margin: 20px;
+}
+
+#practiceContent a {
+  color: rgb(26, 115, 232);
+  font-size: 18px;
+  margin: 20px;
+}
+
 #startPractice {
+  color: rgb(26, 115, 232);
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 20px;
   margin-bottom: 10px;
   margin-inline-end: 10px;
   margin-inline-start: 10px;
   margin-top: 10px;
 }
 
+#separator {
+  background: rgb(232, 234, 237);
+  height: 1px;
+  margin: 20px;
+}
+
 </style>
 
 <div id="container" hidden>
@@ -33,9 +103,12 @@
   </div>
   <cr-dialog id="practice" close-text="Exit practice area"
       on-close="endPractice" show-close-button>
-    <div class="title" slot="title" tabindex="-1">[[ practiceTitle ]]</div>
-    <div class="body" slot="body" tabindex="-1">
-      <p>[[ practiceInstructions ]]</p>
+    <div id="practiceTitle" class="title" slot="title" tabindex="-1">
+      [[ practiceTitle ]]
+    </div>
+    <div id="practiceBody" class="body" slot="body" tabindex="-1">
+      <p id="practiceInstructions">[[ practiceInstructions ]]</p>
+      <div id="separator"></div>
       <div id="practiceContent"></div>
     </div>
   </cr-dialog>

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

@@ -58,6 +58,17 @@ export const TutorialLesson = Polymer({
         this.$.practiceContent.addEventListener(
             evt, this.onPracticeEvent.bind(this), true);
       }
+      this.$.practiceContent.addEventListener('focus', (evt) => {
+        // The practice area has the potential to overflow, so ensure elements
+        // are scrolled into view when focused.
+        evt.target.scrollIntoView();
+      }, true);
+      this.$.practiceContent.addEventListener('click', (evt) => {
+        // Intercept click events. For example, clicking a link will exit the
+        // tutorial without this listener.
+        evt.preventDefault();
+        evt.stopPropagation();
+      }, true);
     }
   },
 
@@ -125,6 +136,7 @@ export const TutorialLesson = Polymer({
   startPractice() {
     this.$.practice.showModal();
     this.startHints();
+    this.$.practiceTitle.focus();
   },
 
   /** @private */

chrome/browser/resources/chromeos/accessibility/chromevox/i_tutorial/lessons/basic_navigation.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. -->
-<h1>This is a heading</h1>
-<button>This is a button</button>
+<script type="module"
+    src="chrome://resources/cr_elements/cr_button/cr_button.m.js">
+</script>
+<h3>This is a heading</h3>
+<cr-button>This is a button</cr-button>
 <p>You're almost there</p>
 <p>You're very close to the button</p>
-<button id="goal">Click me</button>
+<cr-button id="goal">Click me</cr-button>
 <p>You're very close to the button</p>
 <p>You're almost there</p>
-<button>This is another button</button>
-<h1>This is another heading</h1>
\ No newline at end of file
+<cr-button>This is another button</cr-button>
+<h3>This is another heading</h3>

chrome/browser/resources/chromeos/accessibility/chromevox/i_tutorial/lessons/jump_commands.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. -->
-<h1 id="first-heading" tabindex="-1">This is the first heading</h1>
+<script type="module"
+    src="chrome://resources/cr_elements/cr_button/cr_button.m.js">
+</script>
+<div style="white-space: pre">
+<h3 id="first-heading" tabindex="-1">This is the first heading</h3>
 <a id="first-link" href="#first-link">This is the first link</a>
-<button id="first-button">This is the first button</button>
-<h1 id="second-heading" tabindex="-1">This is the middle heading</h1>
-<button id="second-button">This is the second button</button>
+<cr-button id="first-button">This is the first button</cr-button>
+<h3 id="second-heading" tabindex="-1">This is the middle heading</h3>
+<cr-button id="second-button">This is the second button</cr-button>
 <a id="second-link" href="#second-link">This is the second link</a>
-<button id="last-button">This is the last button</button>
-<h1 id="last-heading" tabindex="-1">This is the last heading</h1>
-<a id="last-link"href="#last-link">This is the last link</a>
\ No newline at end of file
+<cr-button id="last-button">This is the last button</cr-button>
+<h3 id="last-heading" tabindex="-1">This is the last heading</h3>
+<a id="last-link"href="#last-link">This is the last link</a>
+</div>