Remove ChromeVox navigation stops from labels on settings-dropdown-menus

-Most dropdowns have an associated text label to explain the
 dropdown'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 dropdown. The "label" attribute on the dropdowns should be
 used instead for giving aural context for ChromeVox users.

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

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

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

@@ -45,7 +45,9 @@
     </div>
     <div class="list-frame">
       <div class="list-item underbar first">
-        <div class="start settings-box-text">$i18n{captionsTextSize}</div>
+        <div class="start settings-box-text" aria-hidden="true">
+          $i18n{captionsTextSize}
+        </div>
         <settings-dropdown-menu id="captionsTextSize"
             label="$i18n{captionsTextSize}"
             pref="{{prefs.accessibility.captions.text_size}}"
@@ -53,7 +55,9 @@
         </settings-dropdown-menu>
       </div>
       <div class="list-item underbar">
-        <div class="start settings-box-text">$i18n{captionsTextFont}</div>
+        <div class="start settings-box-text" aria-hidden="true">
+          $i18n{captionsTextFont}
+        </div>
         <settings-dropdown-menu id="captionsTextFont"
             label="$i18n{captionsTextFont}"
             pref="{{prefs.accessibility.captions.text_font}}"
@@ -61,7 +65,9 @@
         </settings-dropdown-menu>
       </div>
       <div class="list-item underbar">
-        <div class="start settings-box-text">$i18n{captionsTextColor}</div>
+        <div class="start settings-box-text" aria-hidden="true">
+          $i18n{captionsTextColor}
+        </div>
         <settings-dropdown-menu id="captionsTextColor"
             label="$i18n{captionsTextColor}"
             pref="{{prefs.accessibility.captions.text_color}}"
@@ -69,7 +75,9 @@
         </settings-dropdown-menu>
       </div>
       <div class="list-item underbar">
-        <div class="start settings-box-text">$i18n{captionsTextOpacity}</div>
+        <div class="start settings-box-text" aria-hidden="true">
+          $i18n{captionsTextOpacity}
+        </div>
         <settings-dropdown-menu id="captionsTextOpacity"
             label="$i18n{captionsTextOpacity}"
             pref="{{prefs.accessibility.captions.text_opacity}}"
@@ -77,7 +85,9 @@
         </settings-dropdown-menu>
       </div>
       <div class="list-item underbar">
-        <div class="start settings-box-text">$i18n{captionsTextShadow}</div>
+        <div class="start settings-box-text" aria-hidden="true">
+          $i18n{captionsTextShadow}
+        </div>
         <settings-dropdown-menu id="captionsTextShadow"
             label="$i18n{captionsTextShadow}"
             pref="{{prefs.accessibility.captions.text_shadow}}"
@@ -85,7 +95,7 @@
         </settings-dropdown-menu>
       </div>
       <div class="list-item underbar">
-        <div class="start settings-box-text">
+        <div class="start settings-box-text" aria-hidden="true">
           $i18n{captionsBackgroundColor}
         </div>
         <settings-dropdown-menu id="captionsBackgroundColor"
@@ -95,7 +105,7 @@
         </settings-dropdown-menu>
       </div>
       <div class="list-item">
-        <div class="start settings-box-text">
+        <div class="start settings-box-text" aria-hidden="true">
           $i18n{captionsBackgroundOpacity}
         </div>
         <settings-dropdown-menu id="captionsBackgroundOpacity"

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

@@ -85,7 +85,7 @@
     </settings-toggle-button>
     <template is="dom-if" if="[[prefs.settings.a11y.screen_magnifier.value]]">
       <div class="settings-box continuation">
-        <div class="start sub-item settings-box-text">
+        <div class="start sub-item settings-box-text" aria-hidden="true">
           $i18n{screenMagnifierZoomLabel}
         </div>
         <settings-dropdown-menu label="$i18n{screenMagnifierZoomLabel}"
@@ -102,7 +102,7 @@
     </settings-toggle-button>
     <template is="dom-if" if="[[prefs.ash.docked_magnifier.enabled.value]]">
       <div class="settings-box continuation">
-        <div class="start sub-item settings-box-text">
+        <div class="start sub-item settings-box-text" aria-hidden="true">
           $i18n{dockedMagnifierZoomLabel}
         </div>
         <settings-dropdown-menu label="$i18n{dockedMagnifierZoomLabel}"
@@ -171,7 +171,7 @@
     </settings-toggle-button>
     <div class="settings-box continuation"
         hidden$="[[!prefs.settings.a11y.autoclick.value]]">
-      <div class="start sub-item settings-box-text">
+      <div class="start sub-item settings-box-text" aria-hidden="true">
         $i18n{delayBeforeClickLabel}
       </div>
       <settings-dropdown-menu label="$i18n{delayBeforeClickLabel}"
@@ -196,12 +196,11 @@
     </div>
     <div class="settings-box continuation"
         hidden$="[[!prefs.settings.a11y.autoclick.value]]">
-      <div class="start sub-item settings-box-text"
-          id="autoclickMovementThresholdLabel">
+      <div class="start sub-item settings-box-text" aria-hidden="true">
         $i18n{autoclickMovementThresholdLabel}
       </div>
       <settings-dropdown-menu
-          aria-labelledby="autoclickMovementThresholdLabel"
+          label="$i18n{autoclickMovementThresholdLabel}"
           pref="{{prefs.settings.a11y.autoclick_movement_threshold}}"
           menu-options="[[autoClickMovementThresholdOptions_]]"
           disabled="[[!prefs.settings.a11y.autoclick.value]]">

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

@@ -19,7 +19,7 @@
     <h2>$i18n{switchAssignmentHeading}</h2>
     <div class="list-frame">
       <div class="settings-box continuation list-item">
-        <div class="start sub-item settings-box-text">
+        <div class="start sub-item settings-box-text" aria-hidden="true">
           $i18n{assignSelectSwitchLabel}
         </div>
         <settings-dropdown-menu label="$i18n{assignSelectSwitchLabel}"
@@ -29,7 +29,7 @@
         </settings-dropdown-menu>
       </div>
       <div class="settings-box continuation list-item">
-        <div class="start sub-item settings-box-text">
+        <div class="start sub-item settings-box-text" aria-hidden="true">
           $i18n{assignNextSwitchLabel}
         </div>
         <settings-dropdown-menu label="$i18n{assignNextSwitchLabel}"
@@ -39,7 +39,7 @@
         </settings-dropdown-menu>
       </div>
       <div class="settings-box continuation list-item">
-        <div class="start sub-item settings-box-text">
+        <div class="start sub-item settings-box-text" aria-hidden="true">
           $i18n{assignPreviousSwitchLabel}
         </div>
         <settings-dropdown-menu label="$i18n{assignPreviousSwitchLabel}"

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

@@ -111,7 +111,7 @@
         filter="isPrimaryLanguage_"
         sort="alphabeticalSort_">
       <div class="settings-box first">
-        <div class="start settings-box-text">
+        <div class="start settings-box-text" aria-hidden="true">
           [[lang.language]]
         </div>
         <settings-dropdown-menu label="[[lang.language]]"
@@ -134,7 +134,7 @@
       <template is="dom-repeat" items="[[languagesToVoices]]"
           as="lang" sort="alphabeticalSort_" filter="isSecondaryLanguage_">
         <div class="settings-box continuation">
-          <div class="start settings-box-text">
+          <div class="start settings-box-text" aria-hidden="true">
             [[lang.language]]
           </div>
           <settings-dropdown-menu label="[[lang.language]]"

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

@@ -54,7 +54,7 @@
         </div>
       </div>
     </div>
-    <div class="settings-box">
+    <div class="settings-box" aria-hidden="true">
       <h2>$i18n{standardFont}</h2>
     </div>
     <div class="list-frame">
@@ -75,7 +75,7 @@
         </span>
       </div>
     </div>
-    <div class="settings-box">
+    <div class="settings-box" aria-hidden="true">
       <h2>$i18n{serifFont}</h2>
     </div>
     <div class="list-frame">
@@ -96,7 +96,7 @@
         </span>
       </div>
     </div>
-    <div class="settings-box">
+    <div class="settings-box" aria-hidden="true">
       <h2>$i18n{sansSerifFont}</h2>
     </div>
     <div class="list-frame">
@@ -117,7 +117,7 @@
         </span>
       </div>
     </div>
-    <div class="settings-box">
+    <div class="settings-box" aria-hidden="true">
       <h2>$i18n{fixedWidthFont}</h2>
     </div>
     <div class="list-frame">

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

@@ -146,7 +146,9 @@
         </settings-toggle-button>
 </if>
         <div class="settings-box">
-          <div class="start settings-box-text">$i18n{fontSize}</div>
+          <div class="start settings-box-text" aria-hidden="true">
+            $i18n{fontSize}
+          </div>
           <settings-dropdown-menu id="defaultFontSize" label="$i18n{fontSize}"
               pref="{{prefs.webkit.webprefs.default_font_size}}"
               menu-options="[[fontSizeOptions_]]">

chrome/browser/resources/settings/clear_browsing_data_dialog/clear_browsing_data_dialog.html

@@ -131,7 +131,7 @@
             on-selected-item-changed="updateClearButtonState_">
           <div id="basic-tab">
             <div class="row time-range-row">
-              <span class="time-range-label">
+              <span class="time-range-label" aria-hidden="true">
                 $i18n{clearTimeRange}
               </span>
               <settings-dropdown-menu id="clearFromBasic"
@@ -177,7 +177,7 @@
           </div>
           <div id="advanced-tab">
             <div class="row time-range-row">
-              <span class="time-range-label">
+              <span class="time-range-label" aria-hidden="true">
                 $i18n{clearTimeRange}
               </span>
               <settings-dropdown-menu id="clearFrom"

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

@@ -185,9 +185,9 @@
       <!-- Drop down select menu for resolution -->
       <div class="settings-box indented two-line"
           hidden$="[[!showDropDownResolutionSetting_(selectedDisplay)]]">
-        <div class="start text-area layout vertical">
+        <div class="start text-area layout vertical" aria-hidden="true">
           <div>$i18n{displayResolutionTitle}</div>
-          <div class="secondary self-start">
+          <div class="secondary self-start" id="displayResolutionSublabel">
             $i18n{displayResolutionSublabel}
           </div>
         </div>
@@ -202,7 +202,8 @@
             pref="{{selectedModePref_}}"
             disabled="[[isDisplayResolutionMandatory_(
                 prefs.cros.device_display_resolution)]]"
-            label="Display Mode Menu"
+            label="$i18n{displayResolutionTitle}"
+            aria-describedby="displayResolutionSublabel"
             menu-options="[[displayModeList_]]">
         </settings-dropdown-menu>
       </div>
@@ -291,7 +292,7 @@
       </div>
       <!-- Schedule settings -->
       <div class="settings-box indented">
-        <div class="start text-area">
+        <div class="start text-area" aria-hidden="true">
           <div id="nightLightScheduleLabel" class="label">
             $i18n{displayNightLightScheduleLabel}
           </div>
@@ -302,7 +303,8 @@
         </div>
         <settings-dropdown-menu
             id="nightLightScheduleTypeDropDown"
-            aria-labelledby="nightLightScheduleLabel"
+            label="$i18n{displayNightLightScheduleLabel}"
+            aria-describedby="nightLightScheduleSubLabel"
             pref="{{prefs.ash.night_light.schedule_type}}"
             menu-options="[[scheduleTypesList_]]">
         </settings-dropdown-menu>

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

@@ -15,7 +15,7 @@
     <style include="settings-shared"></style>
     <template is="dom-if" if="[[hasInternalKeyboard_]]">
       <div class="settings-box first" id="internalSearchKey">
-        <div class="start">$i18n{keyboardKeySearch}</div>
+        <div class="start" aria-hidden="true">$i18n{keyboardKeySearch}</div>
         <settings-dropdown-menu label="$i18n{keyboardKeySearch}"
             pref="{{prefs.settings.language.xkb_remap_search_key_to}}"
             menu-options="[[keyMapTargets_]]">
@@ -23,28 +23,28 @@
       </div>
     </template>
     <div class="settings-box">
-      <div class="start">$i18n{keyboardKeyCtrl}</div>
+      <div class="start" aria-hidden="true">$i18n{keyboardKeyCtrl}</div>
       <settings-dropdown-menu label="$i18n{keyboardKeyCtrl}"
           pref="{{prefs.settings.language.xkb_remap_control_key_to}}"
           menu-options="[[keyMapTargets_]]">
       </settings-dropdown-menu>
     </div>
     <div class="settings-box">
-      <div class="start">$i18n{keyboardKeyAlt}</div>
+      <div class="start" aria-hidden="true">$i18n{keyboardKeyAlt}</div>
       <settings-dropdown-menu label="$i18n{keyboardKeyAlt}"
           pref="{{prefs.settings.language.xkb_remap_alt_key_to}}"
           menu-options="[[keyMapTargets_]]">
       </settings-dropdown-menu>
     </div>
     <div class="settings-box">
-      <div class="start">$i18n{keyboardKeyEscape}</div>
+      <div class="start" aria-hidden="true">$i18n{keyboardKeyEscape}</div>
       <settings-dropdown-menu label="$i18n{keyboardKeyEscape}"
           pref="{{prefs.settings.language.remap_escape_key_to}}"
           menu-options="[[keyMapTargets_]]">
       </settings-dropdown-menu>
     </div>
     <div class="settings-box">
-      <div class="start">$i18n{keyboardKeyBackspace}</div>
+      <div class="start" aria-hidden="true">$i18n{keyboardKeyBackspace}</div>
       <settings-dropdown-menu label="$i18n{keyboardKeyBackspace}"
           pref="{{prefs.settings.language.remap_backspace_key_to}}"
           menu-options="[[keyMapTargets_]]">
@@ -52,7 +52,7 @@
     </div>
     <template is="dom-if" if="[[hasAssistantKey_]]">
       <div class="settings-box" id="assistantKey">
-        <div class="start">$i18n{keyboardKeyAssistant}</div>
+        <div class="start" aria-hidden="true">$i18n{keyboardKeyAssistant}</div>
         <settings-dropdown-menu label="$i18n{keyboardKeyAssistant}"
             pref="{{prefs.settings.language.xkb_remap_assistant_key_to}}"
             menu-options="[[keyMapTargets_]]">
@@ -61,7 +61,7 @@
     </template>
     <template is="dom-if" if="[[showCapsLock_]]">
       <div class="settings-box" id="capsLockKey">
-        <div class="start">$i18n{keyboardKeyCapsLock}</div>
+        <div class="start" aria-hidden="true">$i18n{keyboardKeyCapsLock}</div>
         <settings-dropdown-menu label="$i18n{keyboardKeyCapsLock}"
             pref="{{prefs.settings.language.remap_caps_lock_key_to}}"
             menu-options="[[keyMapTargets_]]">
@@ -70,7 +70,7 @@
     </template>
     <template is="dom-if" if="[[showExternalMetaKey_]]">
       <div class="settings-box" id="externalMetaKey">
-        <div class="start">
+        <div class="start" aria-hidden="true">
           [[getExternalMetaKeyLabel_(hasInternalKeyboard_)]]
         </div>
         <settings-dropdown-menu
@@ -82,7 +82,7 @@
     </template>
     <template is="dom-if" if="[[showAppleCommandKey_]]">
       <div class="settings-box" id="externalCommandKey">
-        <div class="start">
+        <div class="start" aria-hidden="true">
           [[getExternalCommandKeyLabel_(hasInternalKeyboard_)]]
         </div>
         <settings-dropdown-menu