Navi A11y - Focus Heading in each step of onboarding for screen readers.

Bug: 920685
Change-Id: Ibbb068b85f5bd3a94b5823dbece9409ea68bcb36
Reviewed-on: https://chromium-review.googlesource.com/c/1406180
Commit-Queue: Hector Carmona <hcarmona@chromium.org>
Reviewed-by: Dan Beam <dbeam@chromium.org>
Cr-Commit-Position: refs/heads/master@{#622118}

chrome/browser/resources/welcome/onboarding_welcome/email/nux_email.html

@@ -14,8 +14,8 @@
 
       .email-logo {
         content: -webkit-image-set(
-          url(../images/email_provider_1x.png) 1x,
-          url(../images/email_provider_2x.png) 2x);
+            url(../images/email_provider_1x.png) 1x,
+            url(../images/email_provider_2x.png) 2x);
         height: 38px;
         margin: auto;
         margin-bottom: 16px;
@@ -28,11 +28,12 @@
         font-weight: 500;
         margin: 0;
         margin-bottom: 48px;
+        outline: none;
       }
     </style>
     <div class="email-ask">
       <div class="email-logo" alt=""></div>
-      <h1>$i18n{emailProviderTitle}</h1>
+      <h1 tabindex="-1">$i18n{emailProviderTitle}</h1>
       <app-chooser id="emailChooser" indicator-model="[[indicatorModel]]"
           single-select>
       </app-chooser>

chrome/browser/resources/welcome/onboarding_welcome/email_interstitial.html

@@ -35,11 +35,12 @@
 
           h1 {
             margin-top: 0;
+            outline: none;
           }
         </style>
         <onboarding-background></onboarding-background>
         <div id="container">
-          <h1>$i18n{emailInterstitialTitle}</h1>
+          <h1 tabindex="-1">$i18n{emailInterstitialTitle}</h1>
           <paper-button class="action-button" on-click="onContinueClick_">
             $i18n{emailInterstitialContinue}
           </paper-button>

chrome/browser/resources/welcome/onboarding_welcome/email_interstitial.js

@@ -37,6 +37,12 @@ Polymer({
     });
   },
 
+  /** @override */
+  attached: function() {
+    // Focus heading for accessibility.
+    this.$$('h1').focus();
+  },
+
   /** @private */
   onContinueClick_: function() {
     this.finalized_ = true;

chrome/browser/resources/welcome/onboarding_welcome/google_apps/nux_google_apps.html

@@ -28,12 +28,12 @@
         font-weight: 500;
         margin: 0;
         margin-bottom: 48px;
+        outline: none;
       }
     </style>
-
     <div class="apps-ask">
       <div class="chrome-logo" alt=""></div>
-      <h1>$i18n{googleAppsDescription}</h1>
+      <h1 tabindex="-1">$i18n{googleAppsDescription}</h1>
       <app-chooser id="appChooser" indicator-model="[[indicatorModel]]">
       </app-chooser>
     </div>

chrome/browser/resources/welcome/onboarding_welcome/landing_view.html

@@ -14,11 +14,14 @@
   <template>
     <style
         include="paper-button-style action-link-style splash-pages-shared-css">
+      h1 {
+        outline: none;
+      }
     </style>
     <onboarding-background></onboarding-background>
     <div id="container">
       <h2>$i18n{landingDescription}</h2>
-      <h1>$i18n{landingTitle}</h1>
+      <h1 tabindex="-1">$i18n{landingTitle}</h1>
       <paper-button class="action-button" on-click="onNewUserClick_">
         $i18n{landingNewUser}
       </paper-button>

chrome/browser/resources/welcome/onboarding_welcome/navigation_behavior.js

@@ -81,6 +81,8 @@ cr.define('welcome', function() {
     if (currentRouteElement) {
       (/** @type {{onRouteEnter: Function}} */ (currentRouteElement))
           .onRouteEnter();
+      (/** @type {{updateFocusForA11y: Function}} */ (currentRouteElement))
+          .updateFocusForA11y();
     }
   }
 
@@ -153,6 +155,15 @@ cr.define('welcome', function() {
       if (this.id == `step-${step}`) {
         currentRouteElement = this;
         this.onRouteEnter();
+        this.updateFocusForA11y();
+      }
+    },
+
+    /** Called to update focus when progressing through the modules. */
+    updateFocusForA11y: function() {
+      const header = this.$$('h1');
+      if (header) {
+        Polymer.RenderStatus.afterNextRender(this, () => header.focus());
       }
     },
 

chrome/browser/resources/welcome/onboarding_welcome/set_as_default/nux_set_as_default.html

@@ -43,6 +43,7 @@
         font-weight: 500;
         line-height: 2.5rem;
         margin: 0;
+        outline: none;
       }
 
       h2 {
@@ -73,7 +74,7 @@
     </style>
     <div class="container">
       <div class="logo"></div>
-      <h1>$i18n{setDefaultHeader}</h1>
+      <h1 tabindex="-1">$i18n{setDefaultHeader}</h1>
       <h2>$i18n{setDefaultSubHeader}</h2>
       <div class="illustration"></div>
       <div class="button-bar">

chrome/browser/resources/welcome/onboarding_welcome/signin_view.html

@@ -16,11 +16,14 @@
   <template>
     <style
         include="paper-button-style action-link-style splash-pages-shared-css">
+      h1 {
+        outline: none;
+      }
     </style>
     <onboarding-background></onboarding-background>
     <div id="container">
       <h2>$i18n{signInSubHeader}</h2>
-      <h1>$i18n{signInHeader}</h1>
+      <h1 tabindex="-1">$i18n{signInHeader}</h1>
       <paper-button class="action-button" on-click="onSignInClick_">
         $i18n{signIn}
       </paper-button>