Include printer status in ChromeVox output

To comply with GAR4 standards, this change adds the current error
printer status to the aria-description. So when the element is
navigated to in ChromeVox, the status will be announced as well.

Also fixed destination and See More label by adding single quotes. This
will pass the values into i18n as a string and not a variable.

Bug: 1059607
Change-Id: I7a5c6e715eb056534b15295d913d85e3621b9d60
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2317777
Commit-Queue: Gavin Williams <gavinwill@chromium.org>
Reviewed-by: Rebekah Potter <rbpotter@chromium.org>
Cr-Commit-Position: refs/heads/master@{#791733}

chrome/browser/resources/print_preview/data/printer_status_cros.js

@@ -54,3 +54,22 @@ export const PrinterStatusSeverity = {
  * }}
  */
 export let PrinterStatus;
+
+/** @const {!Map<!PrinterStatusReason, string>} */
+export const ERROR_STRING_KEY_MAP = new Map([
+  [PrinterStatusReason.CONNECTING_TO_DEVICE, 'printerStatusConnectingToDevice'],
+  [PrinterStatusReason.DEVICE_ERROR, 'printerStatusDeviceError'],
+  [PrinterStatusReason.DOOR_OPEN, 'printerStatusDoorOpen'],
+  [PrinterStatusReason.LOW_ON_INK, 'printerStatusLowOnInk'],
+  [PrinterStatusReason.LOW_ON_PAPER, 'printerStatusLowOnPaper'],
+  [PrinterStatusReason.OUT_OF_INK, 'printerStatusOutOfInk'],
+  [PrinterStatusReason.OUT_OF_PAPER, 'printerStatusOutOfPaper'],
+  [PrinterStatusReason.OUTPUT_ALMOST_FULL, 'printerStatusOutputAlmostFull'],
+  [PrinterStatusReason.OUTPUT_FULL, 'printerStatusOutputFull'],
+  [PrinterStatusReason.PAPER_JAM, 'printerStatusPaperJam'],
+  [PrinterStatusReason.PAUSED, 'printerStatusPaused'],
+  [PrinterStatusReason.PRINTER_QUEUE_FULL, 'printerStatusPrinterQueueFull'],
+  [PrinterStatusReason.PRINTER_UNREACHABLE, 'printerStatusPrinterUnreachable'],
+  [PrinterStatusReason.STOPPED, 'printerStatusStopped'],
+  [PrinterStatusReason.TRAY_MISSING, 'printerStatusTrayMissing'],
+]);

chrome/browser/resources/print_preview/ui/destination_dropdown_cros.html

@@ -101,7 +101,9 @@
   }
 </style>
 <div id="destination-dropdown" on-keydown="onKeyDown_" tabindex="0"
-    on-blur="onBlur_" on-click="onClick_" role="button" aria-haspopup="true">
+    on-blur="onBlur_" on-click="onClick_" role="button" aria-haspopup="true"
+    aria-label="$i18n{destinationLabel} [[value.displayName]]"
+    aria-description$="[[destinationStatusText]]">
   <div id="destination-display-container">
     <div id="destination-icon-box">
       <iron-icon icon="[[destinationIcon]]"
@@ -126,7 +128,9 @@
               on-click="onSelect_" on-blur="onBlur_" role="menuitem"
               aria-setsize$="[[dropdownLength_]]"
               class$="list-item [[getHighlightedClass_(item.key,
-                  highlightedIndex_)]]">
+                  highlightedIndex_)]]"
+              aria-description$="[[getPrinterStatusErrorString_(
+                  item.printerStatusReason)]]">
             <printer-status-icon-cros icon-location="[[IconLocation.DROPDOWN]]"
                 printer-state="[[computePrinterState_(
                     item.printerStatusReason)]]"
@@ -157,7 +161,7 @@
           $i18n{noDestinationsMessage}
         </button>
         <button on-click="onSelect_" tabindex="-1" value="seeMore"
-          aria-label$="[[i18n(seeMoreDestinationsLabel)]]" on-blur="onBlur_"
+          aria-label="$i18n{seeMoreDestinationsLabel}" on-blur="onBlur_"
           role="menuitem" aria-setsize$="[[dropdownLength_]]"
           class$="list-item [[getHighlightedClass_('seeMore',
               highlightedIndex_)]]">

chrome/browser/resources/print_preview/ui/destination_dropdown_cros.js

@@ -10,10 +10,11 @@ import 'chrome://resources/polymer/v3_0/iron-icon/iron-icon.js';
 
 import './print_preview_vars_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 {Destination, DestinationOrigin} from '../data/destination.js';
-import {PrinterStatusReason} from '../data/printer_status_cros.js';
+import {ERROR_STRING_KEY_MAP, PrinterStatusReason} from '../data/printer_status_cros.js';
 
 import {IconLocation, PrinterState} from './printer_status_icon_cros.js';
 
@@ -22,6 +23,8 @@ Polymer({
 
   _template: html`{__html_template__}`,
 
+  behaviors: [I18nBehavior],
+
   properties: {
     /** @type {!Destination} */
     value: Object,
@@ -67,6 +70,8 @@ Polymer({
       computed:
           'computeDropdownLength_(itemList, pdfPrinterDisabled, driveDestinationKey, noDestinations, )',
     },
+
+    destinationStatusText: String,
   },
 
   listeners: {
@@ -333,4 +338,14 @@ Polymer({
     }
     return length;
   },
+
+  /**
+   * @param {!PrinterStatusReason} printerStatusReason
+   * @return {string}
+   * @private
+   */
+  getPrinterStatusErrorString_: function(printerStatusReason) {
+    const errorStringKey = ERROR_STRING_KEY_MAP.get(printerStatusReason);
+    return errorStringKey ? this.i18n(errorStringKey) : '';
+  },
 });

chrome/browser/resources/print_preview/ui/destination_select_cros.html

@@ -15,7 +15,7 @@
     </div>
     <template is="dom-if" if="[[!printerStatusFlagEnabled_]]">
       <select id="dropdown" class="md-select"
-          aria-label$="[[i18n(destinationLabel)]]" hidden$="[[!loaded]]"
+          aria-label="$i18n{destinationLabel}" hidden$="[[!loaded]]"
           style="background-image:[[backgroundImages_]];"
           disabled$="[[disabled]]"
           value="{{selectedValue::change}}">
@@ -34,7 +34,7 @@
           $i18n{noDestinationsMessage}
         </option>
         <option value="seeMore"
-            aria-label$="[[i18n(seeMoreDestinationsLabel)]]">
+            aria-label="$i18n{seeMoreDestinationsLabel}">
           $i18n{seeMore}
         </option>
       </select>
@@ -49,7 +49,8 @@
           pdf-printer-disabled="[[pdfPrinterDisabled]]"
           destination-icon="[[destinationIcon_]]" disabled="[[disabled]]"
           is-current-destination-cros-local="[[isCurrentDestinationCrosLocal_]]"
-          on-dropdown-value-selected="onDropdownValueSelected_">
+          on-dropdown-value-selected="onDropdownValueSelected_"
+          destination-status-text="[[statusText_]]">
       </print-preview-destination-dropdown-cros>
     </template>
   </div>
@@ -58,7 +59,8 @@
     hidden$="[[!statusText_]]">
   <div slot="title"></div>
   <div slot="controls">
-    <div id="statusText" class="destination-status" title="[[statusText_]]">
+    <div id="statusText" class="destination-status" title="[[statusText_]]"
+        aria-hidden="true">
         [[statusText_]]
     </div>
   </div>

chrome/browser/resources/print_preview/ui/destination_select_cros.js

@@ -22,31 +22,12 @@ import {loadTimeData} from 'chrome://resources/js/load_time_data.m.js';
 import {Base, html, Polymer} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
 
 import {CloudOrigins, Destination, DestinationOrigin, PDF_DESTINATION_KEY, RecentDestination} from '../data/destination.js';
-import {PrinterStatus, PrinterStatusReason, PrinterStatusSeverity} from '../data/printer_status_cros.js';
+import {ERROR_STRING_KEY_MAP, PrinterStatus, PrinterStatusReason, PrinterStatusSeverity} from '../data/printer_status_cros.js';
 import {NativeLayer, NativeLayerImpl} from '../native_layer.js';
 import {getSelectDropdownBackground} from '../print_preview_utils.js';
 
 import {SelectBehavior} from './select_behavior.js';
 
-/** @const {!Map<!PrinterStatusReason, string>} */
-const ERROR_STRING_KEY_MAP = new Map([
-  [PrinterStatusReason.CONNECTING_TO_DEVICE, 'printerStatusConnectingToDevice'],
-  [PrinterStatusReason.DEVICE_ERROR, 'printerStatusDeviceError'],
-  [PrinterStatusReason.DOOR_OPEN, 'printerStatusDoorOpen'],
-  [PrinterStatusReason.LOW_ON_INK, 'printerStatusLowOnInk'],
-  [PrinterStatusReason.LOW_ON_PAPER, 'printerStatusLowOnPaper'],
-  [PrinterStatusReason.OUT_OF_INK, 'printerStatusOutOfInk'],
-  [PrinterStatusReason.OUT_OF_PAPER, 'printerStatusOutOfPaper'],
-  [PrinterStatusReason.OUTPUT_ALMOST_FULL, 'printerStatusOutputAlmostFull'],
-  [PrinterStatusReason.OUTPUT_FULL, 'printerStatusOutputFull'],
-  [PrinterStatusReason.PAPER_JAM, 'printerStatusPaperJam'],
-  [PrinterStatusReason.PAUSED, 'printerStatusPaused'],
-  [PrinterStatusReason.PRINTER_QUEUE_FULL, 'printerStatusPrinterQueueFull'],
-  [PrinterStatusReason.PRINTER_UNREACHABLE, 'printerStatusPrinterUnreachable'],
-  [PrinterStatusReason.STOPPED, 'printerStatusStopped'],
-  [PrinterStatusReason.TRAY_MISSING, 'printerStatusTrayMissing'],
-]);
-
 Polymer({
   is: 'print-preview-destination-select-cros',
 
@@ -391,8 +372,8 @@ Polymer({
    * @private
    */
   getErrorString_: function(printerStatusReason) {
-    const errorTextKey = ERROR_STRING_KEY_MAP.get(printerStatusReason);
-    return errorTextKey ? this.i18n(errorTextKey) : '';
+    const errorStringKey = ERROR_STRING_KEY_MAP.get(printerStatusReason);
+    return errorStringKey ? this.i18n(errorStringKey) : '';
   },
 
   /**