scanning: Add an id to each select element

Ensure each select element has a unique id that can be used to find the
element in tast tests.

Bug: b:173556456
Change-Id: I90b232af27559020f556bb451b1748c8c566c55a
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2575757
Auto-Submit: Jesse Schettler <jschettler@chromium.org>
Commit-Queue: Zentaro Kavanagh <zentaro@chromium.org>
Reviewed-by: Zentaro Kavanagh <zentaro@chromium.org>
Cr-Commit-Position: refs/heads/master@{#833921}

chromeos/components/scanning/resources/color_mode_select.html

@@ -4,8 +4,8 @@
   <div slot="settings">
     <!-- TODO(jschettler): Verify this meets a11y expecations (e.g. ChromeVox
         should announce when a new option is focused). -->
-    <select class="md-select" value="{{selectedColorMode::change}}"
-        disabled="[[disabled]]">
+    <select id="colorModeSelect" class="md-select"
+        value="{{selectedColorMode::change}}" disabled="[[disabled]]">
       <!-- 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

@@ -4,8 +4,8 @@
   <div slot="settings">
     <!-- TODO(jschettler): Verify this meets a11y expecations (e.g. ChromeVox
         should announce when a new option is focused). -->
-    <select class="md-select" value="{{selectedFileType::change}}"
-        disabled="[[disabled]]">
+    <select id="fileTypeSelect" class="md-select"
+        value="{{selectedFileType::change}}" disabled="[[disabled]]">
       <!-- 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

@@ -4,8 +4,8 @@
   <div slot="settings">
     <!-- TODO(jschettler): Verify this meets a11y expecations (e.g. ChromeVox
         should announce when a new option is focused). -->
-    <select class="md-select" value="{{selectedPageSize::change}}"
-        disabled="[[disabled]]">
+    <select id="pageSizeSelect" class="md-select"
+        value="{{selectedPageSize::change}}" disabled="[[disabled]]">
       <!-- TODO(jschettler): Sort the page sizes. -->
       <template is="dom-repeat" items="[[pageSizes]]" as="pageSize">
         <option value="[[pageSize]]"

chromeos/components/scanning/resources/resolution_select.html

@@ -4,8 +4,8 @@
   <div slot="settings">
     <!-- TODO(jschettler): Verify this meets a11y expecations (e.g. ChromeVox
         should announce when a new option is focused). -->
-    <select class="md-select" value="{{selectedResolution::change}}"
-        disabled="[[disabled]]">
+    <select id="resolutionSelect" class="md-select"
+        value="{{selectedResolution::change}}" disabled="[[disabled]]">
       <!-- TODO(jschettler): Sort the resolutions. -->
       <template is="dom-repeat" items="[[resolutions]]" as="resolution">
         <option value="[[resolution]]"

chromeos/components/scanning/resources/scanner_select.html

@@ -19,8 +19,9 @@
     </div>
     <!-- TODO(jschettler): Verify this meets a11y expecations (e.g. ChromeVox
         should announce when a new option is focused). -->
-    <select class="md-select" value="{{selectedScannerId::change}}"
-        hidden$="[[!loaded]]" disabled="[[disabled]]">
+    <select id="scannerSelect" class="md-select"
+        value="{{selectedScannerId::change}}" hidden$="[[!loaded]]"
+        disabled="[[disabled]]">
       <!-- 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

@@ -4,8 +4,8 @@
   <div slot="settings">
     <!-- TODO(jschettler): Verify this meets a11y expecations (e.g. ChromeVox
         should announce when a new option is focused). -->
-    <select class="md-select" value="{{selectedSource::change}}"
-        disabled="[[disabled]]">
+    <select id="sourceSelect" class="md-select"
+        value="{{selectedSource::change}}" disabled="[[disabled]]">
       <template is="dom-if" if="[[!sources.length]]" restamp>
         <option value="">
           [[i18n('defaultSourceOptionText')]]