Fix flaky aria attr test on TTS subpage.

This makes sure the aria-valuemax, aria-valuemin, and aria-valuenow are numbers
rather than strings.

Bug: 856051
Cq-Include-Trybots: luci.chromium.try:closure_compilation
Change-Id: If75cd1af2ec4bc5928655daa7337fd4a52479fec
Reviewed-on: https://chromium-review.googlesource.com/1114134
Commit-Queue: Katie Dektar <katie@chromium.org>
Commit-Queue: Hector Carmona <hcarmona@chromium.org>
Reviewed-by: Hector Carmona <hcarmona@chromium.org>
Cr-Commit-Position: refs/heads/master@{#570241}

chrome/browser/resources/settings/a11y_page/BUILD.gn

@@ -34,6 +34,7 @@ js_library("tts_subpage") {
   deps = [
     ":externs",
     "..:route",
+    "../device_page:display_size_slider",
     "../languages_page:languages_browser_proxy",
     "../settings_page:settings_animated_pages",
     "//ui/webui/resources/js:i18n_behavior",

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

@@ -75,7 +75,7 @@ Polymer({
   /**
    * Ticks for the Speech Rate slider. Non-linear as we expect people
    * to want more control near 1.0.
-   * @return Array<{value: number, label: string}>
+   * @return Array<SliderTick>
    * @private
    */
   speechRateTicks_: function() {
@@ -91,7 +91,7 @@ Polymer({
   /**
    * Ticks for the Speech Pitch slider. Valid pitches are between 0 and 2,
    * exclusive of 0.
-   * @return Array<{value: number, label: string}>
+   * @return Array<SliderTick>
    * @private
    */
   speechPitchTicks_: function() {
@@ -104,7 +104,7 @@ Polymer({
    * Ticks for the Speech Volume slider. Valid volumes are between 0 and
    * 1 (100%), but volumes lower than .2 are excluded as being too quiet.
    * The values are linear between .2 and 1.0.
-   * @return Array<{value: number, label: string}>
+   * @return Array<SliderTick>
    * @private
    */
   speechVolumeTicks_: function() {
@@ -116,14 +116,15 @@ Polymer({
   /**
    * Initializes i18n labels for ticks arrays.
    * @param {number} tick The value to make a tick for.
-   * @return {{value: number, label: string}}
+   * @return {SliderTick}
    * @private
    */
   initTick_: function(tick) {
-    let value = (100 * tick).toFixed(0);
-    let label = value === '100' ? this.i18n('defaultPercentage', value) :
-                                  this.i18n('percentage', value);
-    return {label: label, value: tick};
+    let value = Math.round(100 * tick);
+    let strValue = value.toFixed(0);
+    let label = strValue === '100' ? this.i18n('defaultPercentage', strValue) :
+                                     this.i18n('percentage', strValue);
+    return {label: label, value: tick, ariaValue: value};
   },
 
   /**

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

@@ -345,9 +345,9 @@ Polymer({
     for (let i = 0; i < selectedDisplay.availableDisplayZoomFactors.length;
          i++) {
       const value = selectedDisplay.availableDisplayZoomFactors[i];
-      const label =
-          this.i18n('displayZoomValue', Math.round(value * 100).toString());
-      zoomValues.push({value: value, label: label});
+      const ariaValue = Math.round(value * 100);
+      const label = this.i18n('displayZoomValue', ariaValue.toString());
+      zoomValues.push({value: value, label: label, ariaValue: ariaValue});
     }
     return zoomValues;
   },

chrome/browser/resources/settings/device_page/display_size_slider.js

@@ -14,10 +14,13 @@
 /**
  * The |value| is the corresponding value that the current slider tick is
  * assocated with. The string |label| is shown in the ui as the label for the
- * current slider value.
+ * current slider value. The |ariaValue| number is used for aria-valuemin,
+ * aria-valuemax, and aria-valuenow, and is optional. If missing, |value| will
+ * be used instead.
  * @typedef {{
- *   value: (number|string|boolean),
- *   label: string
+ *   value: !number,
+ *   label: !string,
+ *   ariaValue: (number|undefined),
  * }}
  */
 let SliderTick;
@@ -120,7 +123,8 @@ Polymer({
     newIndex = this.clampToRange_(newIndex, this.min, this.max);
     if (newIndex != this.index) {
       this._setIndex(newIndex);
-      this.setAttribute('aria-valuenow', this.ticks[this.index].value);
+      this.setAttribute(
+          'aria-valuenow', this.getAriaValueForIndex_(this.ticks, this.index));
       this.setAttribute(
           'aria-valuetext', this.getLabelForIndex_(this.ticks, this.index));
       if (this.dragging) {
@@ -208,7 +212,7 @@ Polymer({
   },
 
   /**
-   * Returns the current label for the selected slider value.
+   * Returns the current label for the selected slider index.
    * @param {SliderTicks} ticks Slider label and corresponding value for each
    *    tick.
    * @param {number} index Index of the slider tick with the desired label.
@@ -220,6 +224,25 @@ Polymer({
     return ticks[index].label;
   },
 
+  /**
+   * Returns the aria value for a selected slider index. aria-valuenow,
+   * aria-valuemin and aria-valuemax are expected to be a numbers, so sliders
+   * which use strings for labels should populate the ariaValue with a number
+   * as well.
+   * @param {SliderTicks} ticks Slider label and corresponding value for each
+   *    tick.
+   * @param {number} index Index of the slider tick with the desired label.
+   * @return {number|string} Returns the empty string if there is not tick at
+   *    the given index.
+   */
+  getAriaValueForIndex_: function(ticks, index) {
+    if (!ticks || ticks.length == 0 || index >= ticks.length)
+      return '';
+    // ariaValue factored out for closure compilation.
+    let ariaValue = ticks[index].ariaValue;
+    return ariaValue !== undefined ? ariaValue : ticks[index].value;
+  },
+
   /** @private Safely increments the slider index value by 1 and updates pref */
   increment_: function() {
     this.clampIndexAndUpdatePref_(this.index + 1);
@@ -439,7 +462,9 @@ Polymer({
     for (let i = 0; i < this.ticks.length; i++) {
       if (this.ticks[i].value == this.pref.value) {
         this._setIndex(i);
-        this.setAttribute('aria-valuenow', this.ticks[this.index].value);
+        this.setAttribute(
+            'aria-valuenow',
+            this.getAriaValueForIndex_(this.ticks, this.index));
         this.setAttribute(
             'aria-valuetext', this.getLabelForIndex_(this.ticks, this.index));
       }
@@ -485,9 +510,9 @@ Polymer({
     }
     this.max = this.ticks.length - 1;
     this.setAttribute(
-        'aria-valuemin', this.getLabelForIndex_(this.ticks, this.min));
+        'aria-valuemin', this.getAriaValueForIndex_(this.ticks, this.min));
     this.setAttribute(
-        'aria-valuemax', this.getLabelForIndex_(this.ticks, this.max));
+        'aria-valuemax', this.getAriaValueForIndex_(this.ticks, this.max));
     this.updateIndex_();
   },
 });