scanning: a11y: Add ARIA labels for preview area

This change adds an ARIA label for the preview area that is updated
depending on the current page:
 -In the initial state, grab the scan preview instructions from the page
 -While scanning, update the label when the page number increases
 -When the scan is completed successfully, announce scan is completed
  and the total number of pages scanned.

Bug: 1059779
Change-Id: I1fcdf2552f779737a69d95fe5971c1b98c0a6aa5
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2580846
Commit-Queue: Gavin Williams <gavinwill@chromium.org>
Reviewed-by: Jesse Schettler <jschettler@chromium.org>
Cr-Commit-Position: refs/heads/master@{#835882}

chromeos/chromeos_strings.grd

@@ -600,6 +600,11 @@ Try tapping the mic to ask me anything.
       <message name="IDS_SCANNING_APP_OK_BUTTON_LABEL" desc="The label for the button to acknowledge and close the dialog shown when a scan job fails.">
         Ok
       </message>
+      <message name="IDS_SCANNING_APP_SCANNED_IMAGES_ARIA_LABEL" is_accessibility_with_no_ui="true" desc="The text read by the screen reader to announce a scan job is completed and the total number of pages scanned.">
+        {NUMBER_OF_PAGES, plural,
+        =1 {Scanning completed. 1 page scanned}
+        other {Scanning completed. {NUMBER_OF_PAGES} pages scanned}}
+      </message>
 
       <!-- Diagnostics App -->
       <message name="IDS_DIAGNOSTICS_TITLE" desc="The title of the diagnostics app.">

chromeos/components/scanning/resources/scan_done_section.html

@@ -39,7 +39,7 @@
   }
 </style>
 <iron-icon id="checkMarkIcon" icon="scanning:check-mark"></iron-icon>
-<h1 id="title" role="alert">
+<h1 id="title">
   [[titleText_]]
 </h1>
 <div class="container">

chromeos/components/scanning/resources/scan_done_section.js

@@ -44,8 +44,8 @@ Polymer({
 
   /** @override */
   created() {
+    // ScanningBrowserProxy is initialized when scanning_app.js is created.
     this.browserProxy_ = ScanningBrowserProxyImpl.getInstance();
-    this.browserProxy_.initialize();
   },
 
   /** @private */

chromeos/components/scanning/resources/scan_preview.html

@@ -75,14 +75,14 @@
     --paper-progress-container-color: var(--google-grey-200);
   }
 </style>
-<div class="preview">
-  <div id="helpOrProgress" class="preview-item"
-      hidden$="[[showScannedImages_]]">
+<div class="preview" aria-label="[[previewAriaLabel_]]">
+  <div id="helpOrProgress" class="preview-item" hidden$="[[showScannedImages_]]"
+      aria-hidden="true">
     <div id="helperText" hidden$="[[!showHelperText_]]">
       <span inner-h-t-m-l="[[getHelperTextHtml_()]]"></span>
     </div>
     <div id="scanProgress" hidden$="[[!showScanProgress_]]">
-      <span id="progressText">[[getProgressTextString_(pageNumber)]]</span>
+      <span id="progressText">[[progressTextString_]]</span>
       <paper-progress id="scanProgressBar" value="[[progressPercent]]">
       </paper-progress>
     </div>
@@ -91,7 +91,7 @@
       <paper-progress id="cancelingProgressBar" indeterminate></paper-progress>
     </div>
   </div>
-  <div id="scannedImages" hidden$="[[!showScannedImages_]]">
+  <div id="scannedImages" hidden$="[[!showScannedImages_]]" aria-hidden="true">
     <template is="dom-repeat" items="[[objectUrls]]" as="url">
       <img class="preview-item scanned-image" src="[[url]]">
     </template>

chromeos/components/scanning/resources/scan_preview.js

@@ -7,10 +7,10 @@ import './scanning_shared_css.js';
 import 'chrome://resources/polymer/v3_0/paper-progress/paper-progress.js';
 
 import {I18nBehavior} from 'chrome://resources/js/i18n_behavior.m.js';
-import {loadTimeData} from 'chrome://resources/js/load_time_data.m.js';
-import {html, Polymer} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
+import {afterNextRender, html, Polymer} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
 
 import {AppState} from './scanning_app_types.js';
+import {ScanningBrowserProxy, ScanningBrowserProxyImpl} from './scanning_browser_proxy.js';
 
 /**
  * @fileoverview
@@ -23,6 +23,9 @@ Polymer({
 
   behaviors: [I18nBehavior],
 
+  /** @private {?ScanningBrowserProxy}*/
+  browserProxy_: null,
+
   properties: {
     /** @type {!AppState} */
     appState: {
@@ -37,7 +40,10 @@ Polymer({
     objectUrls: Array,
 
     /** @type {number} */
-    pageNumber: Number,
+    pageNumber: {
+      type: Number,
+      observer: 'onPageNumberChange_',
+    },
 
     /** @type {number} */
     progressPercent: Number,
@@ -65,6 +71,23 @@ Polymer({
       type: Boolean,
       value: false,
     },
+
+    /** @type {string} */
+    progressTextString_: String,
+
+    /** @type {string} */
+    previewAriaLabel_: String,
+  },
+
+  observers: [
+    'setPreviewAriaLabel_(showScannedImages_, showScanProgress_,' +
+        ' showCancelingProgress_, showHelperText_, progressTextString_)',
+  ],
+
+  /** @override */
+  created() {
+    // ScanningBrowserProxy is initialized when scanning_app.js is created.
+    this.browserProxy_ = ScanningBrowserProxyImpl.getInstance();
   },
 
   /**
@@ -77,15 +100,6 @@ Polymer({
     return this.i18nAdvanced('scanPreviewHelperText', {attrs: ['id']});
   },
 
-  /**
-   * @return {string}
-   * @private
-   */
-  getProgressTextString_() {
-    return loadTimeData.getStringF(
-        'scanPreviewProgressText', this.pageNumber.toString());
-  },
-
   /** @private */
   onAppStateChange_() {
     this.showScannedImages_ =
@@ -96,4 +110,48 @@ Polymer({
     this.showHelperText_ =
         !this.showScanProgress_ && !this.showCancelingProgress_;
   },
+
+  /** @private */
+  onPageNumberChange_() {
+    this.progressTextString_ =
+        this.i18n('scanPreviewProgressText', this.pageNumber);
+  },
+
+  /**
+   * Sets the ARIA label used by the preview area based on the app state and the
+   * current page showing. In the initial state, use the scan preview
+   * instructions from the page as the label. While scanning, update the label
+   * each time the page number increases. When the scan completes, announce the
+   * total number of pages scanned.
+   * @private
+   */
+  setPreviewAriaLabel_() {
+    if (this.showScannedImages_) {
+      this.browserProxy_
+          .getPluralString('scannedImagesAriaLabel', this.objectUrls.length)
+          .then(
+              /* @type {string} */ (pluralString) => this.previewAriaLabel_ =
+                  pluralString);
+      return;
+    }
+
+    if (this.showScanProgress_) {
+      this.previewAriaLabel_ = this.progressTextString_;
+      return;
+    }
+
+    if (this.showCancelingProgress_) {
+      this.previewAriaLabel_ = this.i18n('cancelingScanningText');
+      return;
+    }
+
+    if (this.showHelperText_) {
+      // We can't directly use the 'scanPreviewHelperText' string because it
+      // conatains HTML. So instead wait for the page to render then use its
+      // text as the ARIA label.
+      afterNextRender(this, () => {
+        this.previewAriaLabel_ = this.$.helperText.innerText;
+      });
+    }
+  },
 });

chromeos/components/scanning/resources/scanning_app.js

@@ -32,6 +32,7 @@ import {html, Polymer} from 'chrome://resources/polymer/v3_0/polymer/polymer_bun
 import {getScanService} from './mojo_interface_provider.js';
 import {AppState, ScannerArr} from './scanning_app_types.js';
 import {colorModeFromString, fileTypeFromString, pageSizeFromString, tokenToString} from './scanning_app_util.js';
+import {ScanningBrowserProxyImpl} from './scanning_browser_proxy.js';
 
 /**
  * The default save directory for completed scans.
@@ -211,6 +212,8 @@ Polymer({
   created() {
     this.scanService_ = getScanService();
     this.selectedFilePath = DEFAULT_SAVE_DIRECTORY;
+
+    ScanningBrowserProxyImpl.getInstance().initialize();
   },
 
   /** @override */

chromeos/components/scanning/scanning_ui.cc

@@ -109,7 +109,8 @@ void AddScanningAppStrings(content::WebUIDataSource* html_source) {
 
 void AddScanningAppPluralStrings(ScanningHandler* handler) {
   static constexpr webui::LocalizedString kLocalizedStrings[] = {
-      {"fileSavedText", IDS_SCANNING_APP_FILE_SAVED_TEXT}};
+      {"fileSavedText", IDS_SCANNING_APP_FILE_SAVED_TEXT},
+      {"scannedImagesAriaLabel", IDS_SCANNING_APP_SCANNED_IMAGES_ARIA_LABEL}};
 
   for (const auto& str : kLocalizedStrings)
     handler->AddStringToPluralMap(str.name, str.id);