Remove ChromeVox navigation stops from labels on <select> elements

-Most select elements have an associated text label to explain the
 element's purpose. To be in line with the overall Settings page
 a11y strategy, the labels will be marked as aria-hidden so
 ChromeVox navigation will skip over the label and navigate directly
 to the select element.

-This CL is primarily adding aria-hidden to the labels and in a few
 places correcting/adding the select element aria-label.

Fixed: 1015899
Change-Id: Ibc0a18498bdcdbba7bc3f824a24831a13716f372
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1947194Reviewed-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@{#723486}

chrome/app/settings_strings.grdp

@@ -5000,7 +5000,7 @@
       Low-power charger
     </message>
     <message name="IDS_SETTINGS_POWER_SOURCE_CALCULATING" desc="In Device Settings > Power, the power source description when the power status is being determined.">
-      Checking...
+      Checking power sources...
     </message>
     <message name="IDS_SETTINGS_POWER_IDLE_LABEL" desc="In Device Settings > Power, label for behavior when device is idle.">
       When idle

chrome/browser/resources/settings/a11y_page/tts_subpage.html

@@ -76,11 +76,12 @@
 
     <h2>$i18n{textToSpeechPreviewHeading}</h2>
     <div class="settings-box first">
-      <div class="start settings-box-text">
+      <div id="textToSpeechPreviewVoice" class="start settings-box-text"
+          aria-hidden="true">
         $i18n{textToSpeechPreviewVoice}
       </div>
       <select id="previewVoice" class="md-select"
-          label="$i18n{textToSpeechPreviewVoice}"
+          aria-labelledby="textToSpeechPreviewVoice"
           value="{{defaultPreviewVoice}}"
           disabled="[[!hasVoices]]">
         <template is="dom-repeat" id="previewVoiceOptions"

chrome/browser/resources/settings/appearance_page/appearance_page.html

@@ -157,7 +157,7 @@
             role-description="$i18n{subpageArrowRoleDescription}">
         </cr-link-row>
         <div class="settings-box" hidden="[[!pageVisibility.pageZoom]]">
-          <div id="pageZoom" class="start settings-box-text">
+          <div id="pageZoom" class="start settings-box-text" aria-hidden="true">
             $i18n{pageZoom}
           </div>
           <select id="zoomLevel" class="md-select" aria-labelledby="pageZoom"

chrome/browser/resources/settings/autofill_page/credit_card_edit_dialog.html

@@ -69,12 +69,15 @@
             value="{{creditCard.cardNumber}}"
             on-input="onCreditCardNameOrNumberChanged_">
         </cr-input>
-        <label id="creditCardExpiration" class="cr-form-field-label">
+        <!-- aria-hidden for creditCardExpiration label since
+          creditCardExpirationMonth and creditCardExpirationYear provide
+          sufficient labeling. -->
+        <label class="cr-form-field-label" aria-hidden="true">
           $i18n{creditCardExpiration}
         </label>
         <select class="md-select" id="month" value="[[expirationMonth_]]"
             on-change="onMonthChange_"
-            aria-labelledby="creditCardExpiration">
+            aria-label="$i18n{creditCardExpirationMonth}">
           <template is="dom-repeat" items="[[monthList_]]">
             <option>[[item]]</option>
           </template>

chrome/browser/resources/settings/chromeos/os_search_page/os_search_page.html

@@ -53,13 +53,12 @@
              in the omnibox and a different one in the launcher. -->
         <div class="settings-box first block">
           <div id="search-wrapper">
-            <div id="searchExplanation" class="start settings-box-text">
+            <div id="searchExplanation" class="start settings-box-text"
+                aria-hidden="true">
               $i18n{osSearchEngineLabel}
-              <iron-icon id="help-icon" icon="cr:help-outline"
-                  aria-label="$i18n{osSearchEngineTooltip}"
-                  aria-describedby="tooltip"></iron-icon>
+              <iron-icon id="help-icon" icon="cr:help-outline"></iron-icon>
               <paper-tooltip id="tooltip" for="help-icon" position="bottom"
-                  aria-hidden="true" fit-to-visible-bounds>
+                  fit-to-visible-bounds>
                 $i18n{osSearchEngineTooltip}
               </paper-tooltip>
             </div>

chrome/browser/resources/settings/device_page/display.html

@@ -134,7 +134,7 @@
       <template is="dom-if" restamp
           if="[[showDisplaySelectMenu_(displays, selectedDisplay)]]">
         <div class="settings-box indented">
-          <div id="displayScreenTitle" class="start">
+          <div id="displayScreenTitle" class="start" aria-hidden="true">
             $i18n{displayScreenTitle}
           </div>
           <select class="md-select" on-change="updatePrimaryDisplay_"
@@ -208,7 +208,8 @@
       </div>
       <template is="dom-if" if="[[!unifiedDesktopMode_]]" restamp>
         <div class="settings-box indented">
-          <div id="displayOrientation" class="start text-area">
+          <div id="displayOrientation" class="start text-area"
+              aria-hidden="true">
             $i18n{displayOrientation}
           </div>
           <template is="dom-if" if="[[isDevicePolicyEnabled_(

chrome/browser/resources/settings/device_page/power.html

@@ -14,13 +14,13 @@
     <style include="settings-shared md-select"></style>
     <div id="powerSourceRow" class="settings-box first two-line"
         hidden$="[[!batteryStatus_.present]]">
-      <div class="start">
+      <div class="start" id="powerSourceLabelDiv">
         <div>[[powerSourceLabel_]]</div>
         <div class="secondary">[[batteryStatus_.statusText]]</div>
       </div>
       <select id="powerSource" class="md-select"
           hidden$="[[!showPowerSourceDropdown_]]"
-          aria-label="$i18n{powerSourceLabel}"
+          aria-labelledby="powerSourceLabelDiv"
           on-change="onPowerSourceChange_">
         <option value="" selected="[[isEqual_('', selectedPowerSourceId_)]]">
           $i18n{powerSourceBattery}
@@ -38,7 +38,7 @@
     </div>
 
     <div class$="settings-box [[getFirst_(batteryStatus_.present)]]">
-      <div class="start">$i18n{powerIdleLabel}</div>
+      <div class="start" aria-hidden="true">$i18n{powerIdleLabel}</div>
       <template is="dom-if" if="[[idleControlled_]]" restamp>
         <cr-policy-indicator id="idleControlledIndicator"
             indicator-type="devicePolicy"

chrome/browser/resources/settings/google_assistant_page/google_assistant_page.html

@@ -54,11 +54,12 @@
         </settings-toggle-button>
         <div class="settings-box" id="dsp-hotword-container"
             hidden="[[hotwordDspAvailable_]]">
-          <div class="start text-area settings-box-text">
-            <div class="label">
+          <div class="start text-area settings-box-text" aria-hidden="true">
+            <div class="label" id="googleAssistantEnableHotword">
               $i18n{googleAssistantEnableHotword}
             </div>
-            <div class="secondary label">
+            <div class="secondary label"
+                id="googleAssistantEnableHotwordDescription">
               $i18n{googleAssistantEnableHotwordWithoutDspDescription}
             </div>
           </div>
@@ -73,6 +74,7 @@
                preference. -->
           <select id="dsp-hotword-state" class="md-select"
               aria-labelledby="googleAssistantEnableHotword"
+              aria-describedby="googleAssistantEnableHotwordDescription"
               on-change="onDspHotwordStateChange_"
               disabled="[[hotwordEnforced_]]">
             <template is="dom-repeat" items="[[hotwordDropdownList_]]">

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

@@ -99,7 +99,8 @@
         </div>
         <div class="settings-box two-line">
           <div class="start">
-            <div id="printerProtocol" class="cr-form-field-label">
+            <div id="printerProtocol" class="cr-form-field-label"
+                aria-hidden="true">
               $i18n{printerProtocol}
             </div>
             <div class="secondary">

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

@@ -44,7 +44,8 @@
         </div>
         <div class="settings-box two-line">
           <div class="start">
-            <div id="printerProtocol" class="cr-form-field-label">
+            <div id="printerProtocol" class="cr-form-field-label"
+                aria-hidden="true">
               $i18n{printerProtocol}
             </div>
             <div class="secondary">

chrome/browser/resources/settings/site_settings/site_details_permission.html

@@ -23,9 +23,9 @@
           <iron-icon icon="[[icon]]">
           </iron-icon>
         </div>
-        <div class="middle" id="permissionHeader">
+        <div class="middle" id="permissionHeader" aria-hidden="true">
           [[label]]
-          <div class="secondary"
+          <div class="secondary" id="permissionSecondary"
               hidden$="[[!hasPermissionInfoString_(site.source, category,
                                                    site.setting)]]"
               inner-h-t-m-l="[[permissionInfoString_(
@@ -47,7 +47,8 @@
           </div>
         </div>
         <select id="permission" class="md-select"
-            aria-labelledby="permissionHeader"
+            aria-label$="[[label]]"
+            aria-describedby="permissionSecondary"
             on-change="onPermissionSelectionChange_"
             disabled$="[[!isPermissionUserControlled_(site.source, category,
                                                       site.setting)]]">