scanning: a11y: Use label for scan settings dropdowns

Make all the scan settings dropdowns and the Show File Location button
only one stop each with ChromeVox.

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

chromeos/components/scanning/resources/color_mode_select.html

 <style include="scanning-shared"></style>
 <scan-settings-section>
-  <span id="colorModeLabel" slot="label">[[i18n('colorModeDropdownLabel')]]</span>
+  <span id="colorModeLabel" slot="label" aria-hidden="true">
+    [[i18n('colorModeDropdownLabel')]]
+  </span>
   <div slot="settings">
-    <!-- TODO(jschettler): Verify this meets a11y expecations (e.g. ChromeVox
-        should announce when a new option is focused). -->
     <select id="colorModeSelect" class="md-select"
-        value="{{selectedColorMode::change}}" disabled="[[disabled]]">
+        value="{{selectedColorMode::change}}" disabled="[[disabled]]"
+        aria-labelledby="colorModeLabel">
       <!-- TODO(jschettler): Determine how the color modes should be sorted. -->
       <template is="dom-repeat" items="[[colorModes]]" as="colorMode">
         <option value="[[colorMode]]"

chromeos/components/scanning/resources/file_type_select.html

 <style include="scanning-shared"></style>
 <scan-settings-section>
-  <span id="fileTypeLabel" slot="label">[[i18n('fileTypeDropdownLabel')]]</span>
+  <span id="fileTypeLabel" slot="label" aria-hidden="true">
+    [[i18n('fileTypeDropdownLabel')]]
+  </span>
   <div slot="settings">
-    <!-- TODO(jschettler): Verify this meets a11y expecations (e.g. ChromeVox
-        should announce when a new option is focused). -->
     <select id="fileTypeSelect" class="md-select"
-        value="{{selectedFileType::change}}" disabled="[[disabled]]">
+        value="{{selectedFileType::change}}" disabled="[[disabled]]"
+        aria-labelledby="fileTypeLabel">
       <!-- The option values must match the chromeos.scanning.mojom.FileType
           values they correspond to. -->
       <!-- TODO(jschettler): Change default back to PDF when it's supported. -->

chromeos/components/scanning/resources/page_size_select.html

 <style include="scanning-shared"></style>
 <scan-settings-section>
-  <span id="pageSizeLabel" slot="label">[[i18n('pageSizeDropdownLabel')]]</span>
+  <span id="pageSizeLabel" slot="label" aria-hidden="true">
+    [[i18n('pageSizeDropdownLabel')]]
+  </span>
   <div slot="settings">
-    <!-- TODO(jschettler): Verify this meets a11y expecations (e.g. ChromeVox
-        should announce when a new option is focused). -->
     <select id="pageSizeSelect" class="md-select"
-        value="{{selectedPageSize::change}}" disabled="[[disabled]]">
+        value="{{selectedPageSize::change}}" disabled="[[disabled]]"
+        aria-labelledby="pageSizeLabel">
       <!-- TODO(jschettler): Sort the page sizes. -->
       <template is="dom-repeat" items="[[pageSizes]]" as="pageSize">
         <option value="[[pageSize]]"

chromeos/components/scanning/resources/resolution_select.html

 <style include="scanning-shared"></style>
 <scan-settings-section>
-  <span id="resolutionLabel" slot="label">[[i18n('resolutionDropdownLabel')]]</span>
+  <span id="resolutionLabel" slot="label" aria-hidden="true">
+    [[i18n('resolutionDropdownLabel')]]
+  </span>
   <div slot="settings">
-    <!-- TODO(jschettler): Verify this meets a11y expecations (e.g. ChromeVox
-        should announce when a new option is focused). -->
     <select id="resolutionSelect" class="md-select"
-        value="{{selectedResolution::change}}" disabled="[[disabled]]">
+        value="{{selectedResolution::change}}" disabled="[[disabled]]"
+        aria-labelledby="resolutionLabel">
       <!-- TODO(jschettler): Sort the resolutions. -->
       <template is="dom-repeat" items="[[resolutions]]" as="resolution">
         <option value="[[resolution]]"

chromeos/components/scanning/resources/scan_done_section.html

@@ -43,9 +43,11 @@
   [[getTitleText_(pageNumber)]]
 </h1>
 <div class="container">
-  <span class="label">[[i18n('showFileLocationLabel')]]</span>
+  <span id="showFileLocationLabel" class="label" aria-hidden="true">
+    [[i18n('showFileLocationLabel')]]
+  </span>
   <cr-icon-button id="showFileButton" class="button" iron-icon="cr:open-in-new"
-      on-click="showFileInLocation_">
+      on-click="showFileInLocation_" aria-labelledby="showFileLocationLabel">
   </cr-icon-button>
 </div>
 <div class="done-button-container">

chromeos/components/scanning/resources/scan_to_select.html

 <style include="scanning-shared"></style>
 <scan-settings-section>
-  <span id="scanToLabel" slot="label">[[i18n('scanToDropdownLabel')]]</span>
+  <span id="scanToLabel" slot="label" aria-hidden="true">
+    [[i18n('scanToDropdownLabel')]]
+  </span>
   <div slot="settings">
-    <!-- TODO(jschettler): Verify this meets a11y expecations (e.g. ChromeVox
-        should announce when a new option is focused). -->
-    <select id="scanToSelect" class="md-select" disabled="[[disabled]]" on-change="onSelectFolder_">
+    <select id="scanToSelect" class="md-select" disabled="[[disabled]]"
+        on-change="onSelectFolder_" aria-labelledby="scanToLabel">
       <option selected>
         [[displayText_]]
       </option>

chromeos/components/scanning/resources/scanner_select.html

@@ -12,16 +12,16 @@
   }
 </style>
 <scan-settings-section>
-  <span id="scannerLabel" slot="label">[[i18n('scannerDropdownLabel')]]</span>
+  <span id="scannerLabel" slot="label" aria-hidden="true">
+    [[i18n('scannerDropdownLabel')]]
+  </span>
   <div slot="settings">
     <div class="throbber-container" hidden$="[[loaded]]">
       <div class="throbber"></div>
     </div>
-    <!-- TODO(jschettler): Verify this meets a11y expecations (e.g. ChromeVox
-        should announce when a new option is focused). -->
     <select id="scannerSelect" class="md-select"
         value="{{selectedScannerId::change}}" hidden$="[[!loaded]]"
-        disabled="[[disabled]]">
+        disabled="[[disabled]]" aria-labelledby="scannerLabel">
       <!-- TODO(jschettler): Figure out why hiding/disabling the option doesn't
           remove it from the dropdown. -->
       <template is="dom-if" if="[[!scanners.length]]" restamp>

chromeos/components/scanning/resources/source_select.html

 <style include="scanning-shared"></style>
 <scan-settings-section>
-  <span id="sourceLabel" slot="label">[[i18n('sourceDropdownLabel')]]</span>
+  <span id="sourceLabel" slot="label" aria-hidden="true">
+    [[i18n('sourceDropdownLabel')]]
+  </span>
   <div slot="settings">
-    <!-- TODO(jschettler): Verify this meets a11y expecations (e.g. ChromeVox
-        should announce when a new option is focused). -->
     <select id="sourceSelect" class="md-select"
-        value="{{selectedSource::change}}" disabled="[[disabled]]">
+        value="{{selectedSource::change}}" disabled="[[disabled]]"
+        aria-labelledby="sourceLabel">
       <template is="dom-if" if="[[!sources.length]]" restamp>
         <option value="">
           [[i18n('defaultSourceOptionText')]]