Enhance settings-slider's ARIA labels

In order to make settings sliders more functional for users of screen
readers we are adding more descriptive ARIA labels.

-Update aria-roledescription to describe to users the context of the
 min and max values of a slider.

For reference:
 Current slider ARIA output: "Slider. 120 percent. Min 60, Max 820"
 Video: https://bugs.chromium.org/p/chromium/issues/detail?id=1015839#c5

 Expected slider ARIA output: "Slider: Slowest to Fastest. 120 percent. Min 60 Max 820"
 Video: https://bugs.chromium.org/p/chromium/issues/detail?id=1015839#c9

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

chrome/app/settings_strings.grdp

@@ -904,6 +904,9 @@
   <message name="IDS_SETTINGS_RETRY" desc="The label text of the retry button because there is an error.">
    Retry
   </message>
+  <message name="IDS_SETTINGS_SLIDER_MIN_MAX_ARIA_ROLE_DESCRIPTION" desc="A label to be read aloud by screen readers when a user focuses on a slider. A settings slider generally has a minimum value, a maximum value, and a fixed range of values in between. This label gives the user context for what the minimum and maximum values represent for that particular slider.">
+    Slider: <ph name="MIN_LABEL">$1<ex>Slowest</ex></ph> to <ph name="MAX_LABEL">$2<ex>Fastest</ex></ph>
+  </message>
 
   <!-- Autofill Page -->
   <message name="IDS_SETTINGS_AUTOFILL" desc="Name of the settings page which allows managing passwords, payment methods and addresses settings.">

chrome/browser/resources/settings/controls/settings_slider.html

@@ -4,6 +4,7 @@
 <link rel="import" href="chrome://resources/html/assert.html">
 <link rel="import" href="chrome://resources/cr_elements/cr_slider/cr_slider.html">
 <link rel="import" href="../settings_vars_css.html">
+<link rel="import" href="../i18n_setup.html">
 
 <dom-module id="settings-slider">
   <template>
@@ -61,8 +62,12 @@
       <cr-slider id="slider" disabled$="[[disableSlider_]]" ticks="[[ticks]]"
           on-cr-slider-value-changed="onSliderChanged_" max="[[max]]"
           min="[[min]]" on-dragging-changed="onSliderChanged_"
-          on-updating-from-key="onSliderChanged_"></cr-slider>
-      <div id="labels" disabled$="[[disableSlider_]]">
+          on-updating-from-key="onSliderChanged_"
+          aria-roledescription$="[[getRoleDescription_()]]"
+          aria-label$="[[labelAria]]">
+      </cr-slider>
+      <!-- aria-hidden because role description on #slider contains min/max. -->
+      <div id="labels" disabled$="[[disableSlider_]]" aria-hidden="true">
         <div id="label-begin">[[labelMin]]</div>
         <div id="label-end">[[labelMax]]</div>
       </div>

chrome/browser/resources/settings/controls/settings_slider.js

@@ -40,6 +40,8 @@ Polymer({
 
     max: Number,
 
+    labelAria: String,
+
     labelMin: String,
 
     labelMax: String,
@@ -169,4 +171,13 @@ Polymer({
       this.set('pref.value', tickValue);
     }
   },
+
+  /**
+   * @return {string}
+   * @private
+   */
+  getRoleDescription_: function() {
+    return loadTimeData.getStringF('settingsSliderRoleDescription',
+      this.labelMin, this.labelMax);
+  },
 });

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

@@ -249,6 +249,8 @@ void AddA11yStrings(content::WebUIDataSource* html_source) {
     {"captionsColorCyan", IDS_SETTINGS_CAPTIONS_COLOR_CYAN},
     {"captionsColorMagenta", IDS_SETTINGS_CAPTIONS_COLOR_MAGENTA},
     {"captionsDefaultSetting", IDS_SETTINGS_CAPTIONS_DEFAULT_SETTING},
+    {"settingsSliderRoleDescription",
+      IDS_SETTINGS_SLIDER_MIN_MAX_ARIA_ROLE_DESCRIPTION},
 #if defined(OS_CHROMEOS)
     {"optionsInMenuLabel", IDS_SETTINGS_OPTIONS_IN_MENU_LABEL},
     {"largeMouseCursorLabel", IDS_SETTINGS_LARGE_MOUSE_CURSOR_LABEL},