Add meaningful ARIA labels to settings Printers screen

-Using aria-hidden will force the these text labels to be skipped over
 when navigating with the screen reader. The preference is to only
 navigate to the actionable button instead of its text label.

-Adding an aria-labelledby and a aria-describedby will make the screen
 reader read "{printerName}, Button, Save/Setup" when navigated to.

Bug: 1014145
Change-Id: I4cca27f8d48297d9de0c1409984b0344503e8bb7
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1859689Reviewed-by: Hector Carmona <hcarmona@chromium.org>
Reviewed-by: Bailey Berro <baileyberro@chromium.org>
Commit-Queue: Gavin Williams <gavinwill@chromium.org>
Cr-Commit-Position: refs/heads/master@{#711061}

chrome/app/settings_strings.grdp

@@ -1520,9 +1520,15 @@
     <message name="IDS_SETTINGS_PRINTING_CUPS_PRINTER_SETUP_BUTTON" desc="Text for the button which allows the user to manually setup a CUPS printer.">
       Set up
     </message>
+    <message name="IDS_SETTINGS_PRINTING_CUPS_PRINTER_SETUP_BUTTON_ARIA" desc="Label to be read aloud by the screen reader for the button which allows the user to manually setup a CUPS printer.">
+      Set up <ph name="PRINTER_NAME">$1<ex>HP OfficeJet 500</ex></ph>
+    </message>
     <message name="IDS_SETTINGS_PRINTING_CUPS_PRINTER_SAVE_BUTTON" desc="Text for the button which allows the user to add an automatically discovered printer to the user's saved printer list.">
       Save
     </message>
+    <message name="IDS_SETTINGS_PRINTING_CUPS_PRINTER_SAVE_BUTTON_ARIA" desc="Label to be read aloud by the screen reader for the button which allows the user to add an automatically discovered printer to the user's saved printer list.">
+      Save <ph name="PRINTER_NAME">$1<ex>HP OfficeJet 500</ex></ph>
+    </message>
     <message name="IDS_SETTINGS_PRINTING_CUPS_SEARCH_LABEL" desc="The placeholder text in the printer search field.">
       Search printers
     </message>

chrome/browser/resources/settings/printing_page/cups_printers.html

@@ -168,7 +168,9 @@
 
       <div id="addPrinterSection">
         <div class="layout horizontal center custom-list-item">
-          <div id="addPrinterText">$i18n{addCupsPrinter}</div>
+          <div id="addPrinterText" aria-hidden="true">
+            $i18n{addCupsPrinter}
+          </div>
           <cr-icon-button class="action-button" id="addManualPrinterIcon"
               iron-icon="settings20:printer-add"
               on-click="onAddPrinterTap_"

chrome/browser/resources/settings/printing_page/cups_printers_entry.html

@@ -14,28 +14,34 @@
     </style>
     <div id="entry" class="list-item" focus-row-container>
       <div class="printer-name text-elide">
-        <span id="printerName">
+        <span id="printerName" aria-hidden="true">
             [[printerEntry.printerInfo.printerName]]
         </span>
-        <div id="printerSubtext" hidden="[[!subtext]]" class="secondary">
+        <div id="printerSubtext" hidden="[[!subtext]]" class="secondary"
+            aria-hidden="true">
           [[subtext]]
         </div>
       </div>
       <template is="dom-if" if="[[isSavedPrinter_(printerEntry.printerType)]]">
         <cr-icon-button class="icon-more-vert" on-click="onOpenActionMenuTap_"
-            title="$i18n{moreActions}">
+            title="$i18n{moreActions}" aria-labelledby="printerName"
+            aria-describedby="printerSubtext">
         </cr-icon-button>
       </template>
       <template is="dom-if"
           if="[[isDiscoveredPrinter_(printerEntry.printerType)]]">
         <cr-button id="setupPrinterButton"
-            on-click="onOpenManufacturerModelDialogTap_">
+            on-click="onOpenManufacturerModelDialogTap_"
+            aria-label$="[[getSetupButtonAria_()]]"
+            aria-describedby="printerSubtext">
           $i18n{setupPrinter}
         </cr-button>
       </template>
       <template is="dom-if"
           if="[[isAutomaticPrinter_(printerEntry.printerType)]]">
-        <cr-button id="savePrinterButton" on-click="onAddAutomaticPrinterTap_">
+        <cr-button id="savePrinterButton" on-click="onAddAutomaticPrinterTap_"
+            aria-label$="[[getSaveButtonAria_()]]"
+            aria-describedby="printerSubtext">
           $i18n{savePrinter}
         </cr-button>
       </template>

chrome/browser/resources/settings/printing_page/cups_printers_entry.js

@@ -64,5 +64,15 @@ Polymer({
    */
   isAutomaticPrinter_: function() {
     return this.printerEntry.printerType == PrinterType.AUTOMATIC;
-  }
+  },
+
+  getSaveButtonAria_: function() {
+    return loadTimeData.getStringF('savePrinterAria',
+      this.printerEntry.printerInfo.printerName);
+  },
+
+  getSetupButtonAria_: function() {
+    return loadTimeData.getStringF('setupPrinterAria',
+      this.printerEntry.printerInfo.printerName);
+  },
 });

chrome/browser/ui/webui/settings/settings_localized_strings_provider.cc

@@ -2353,7 +2353,9 @@ void AddPrintingStrings(content::WebUIDataSource* html_source) {
     {"editPrinter", IDS_SETTINGS_PRINTING_CUPS_PRINTERS_EDIT},
     {"removePrinter", IDS_SETTINGS_PRINTING_CUPS_PRINTERS_REMOVE},
     {"setupPrinter", IDS_SETTINGS_PRINTING_CUPS_PRINTER_SETUP_BUTTON},
+    {"setupPrinterAria", IDS_SETTINGS_PRINTING_CUPS_PRINTER_SETUP_BUTTON_ARIA},
     {"savePrinter", IDS_SETTINGS_PRINTING_CUPS_PRINTER_SAVE_BUTTON},
+    {"savePrinterAria", IDS_SETTINGS_PRINTING_CUPS_PRINTER_SAVE_BUTTON_ARIA},
     {"searchLabel", IDS_SETTINGS_PRINTING_CUPS_SEARCH_LABEL},
     {"noSearchResults", IDS_SEARCH_NO_RESULTS},
     {"printerDetailsTitle", IDS_SETTINGS_PRINTING_CUPS_PRINTER_DETAILS_TITLE},