Welcome WebUI: Add screen reader label for progress dots

Bug: 1098534
Change-Id: Ie3ef928071d1e5c542d9ba1e8496652c94916b35
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2367807Reviewed-by: Rebekah Potter <rbpotter@chromium.org>
Reviewed-by: Lei Zhang <thestig@chromium.org>
Commit-Queue: John Lee <johntlee@chromium.org>
Cr-Commit-Position: refs/heads/master@{#801135}

chrome/app/welcome_strings.grdp

@@ -7,6 +7,9 @@
   <message name="IDS_WELCOME_SKIP" desc="Label for a button to skip the current welcome step.">
     Skip
   </message>
+  <message name="IDS_WELCOME_STEPS" desc="Label indicating what step the user is in and how many steps there are in total.">
+    Step <ph name="CURRENT_STEP">$1<ex>1</ex></ph> of <ph name="TOTAL_STEPS">$2<ex>2</ex></ph>
+  </message>
   <message name="IDS_WELCOME_BOOKMARK_ADDED" desc="String read for accessibility to inform the user a bookmark was added.">
     Bookmark added
   </message>

chrome/app/welcome_strings_grdp/IDS_WELCOME_STEPS.png.sha1

+ab7212da9244c6ba7da1bea1cff337dce99c54f9
\ No newline at end of file

chrome/browser/resources/welcome/shared/BUILD.gn

@@ -34,6 +34,7 @@ js_library("step_indicator") {
   deps = [
     ":nux_types",
     "//third_party/polymer/v3_0/components-chromium/polymer:polymer_bundled",
+    "//ui/webui/resources/js:i18n_behavior.m",
   ]
 }
 

chrome/browser/resources/welcome/shared/step_indicator.html

@@ -16,7 +16,15 @@
   span.active {
     background: var(--navi-step-indicator-active-color);
   }
+
+  .screen-reader-only {
+    clip: rect(0, 0, 0, 0);
+    position: fixed;
+  }
 </style>
 <template is="dom-repeat" items="[[dots_]]">
   <span class$="[[getActiveClass_(index, model.active)]]"></span>
 </template>
+<div class="screen-reader-only">
+  [[computeLabel_(model.active, model.total)]]
+</div>
\ No newline at end of file

chrome/browser/resources/welcome/shared/step_indicator.js

@@ -9,6 +9,7 @@
 import 'chrome://resources/cr_elements/shared_vars_css.m.js';
 import './navi_colors_css.js';
 
+import {I18nBehavior} from 'chrome://resources/js/i18n_behavior.m.js';
 import {html, Polymer} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
 
 import {stepIndicatorModel} from './nux_types.js';
@@ -16,6 +17,8 @@ import {stepIndicatorModel} from './nux_types.js';
 Polymer({
   is: 'step-indicator',
 
+  behaviors: [I18nBehavior],
+
   _template: html`{__html_template__}`,
 
   properties: {
@@ -29,6 +32,16 @@ Polymer({
     },
   },
 
+  /**
+   * @param {number} active
+   * @param {number} total
+   * @return {string}
+   * @private
+   */
+  computeLabel_(active, total) {
+    return this.i18n('stepsLabel', active + 1, total);
+  },
+
   /**
    * @return {!Array<undefined>}
    * @private

chrome/browser/ui/webui/welcome/welcome_ui.cc

@@ -82,6 +82,7 @@ void AddStrings(content::WebUIDataSource* html_source) {
       {"next", IDS_WELCOME_NEXT},
       {"noThanks", IDS_NO_THANKS},
       {"skip", IDS_WELCOME_SKIP},
+      {"stepsLabel", IDS_WELCOME_STEPS},
 
       // Sign-in view strings.
       {"signInHeader", IDS_WELCOME_SIGNIN_VIEW_HEADER},