Accessibility improvements for thumb slider follows instructions given:

https://www.w3.org/TR/wai-aria-practices/#slider
https://www.w3.org/TR/wai-aria-practices/#slidertwothumb

Sets the ARIA roles, states, properties on the thumbs.

RELNOTES: For slider and two thumbs slider: TAB focus is set on the
thumbs instead of the highlighted slider handle. For two thumbs slider: Key events (HOME, END, LEFT arrow, RIGHT arrow...) interacts on the focused thumb (the start thumb or the end thumb) other than the highlighted slider handle.
-------------
Created by MOE: https://github.com/google/moe
MOE_MIGRATED_REVID=125745734

Author: joeltine

closure/goog/deps.js

@@ -436,7 +436,6 @@ goog.ui.SliderBase.prototype.enterDocument = function() {
   this.keyHandler_ = new goog.events.KeyHandler(this.getElement());
   this.enableEventHandlers_(true);
 
-  this.getElement().tabIndex = 0;
   this.updateUi_();
 };
 
@@ -587,45 +586,49 @@ goog.ui.SliderBase.prototype.handleThumbDragStartEnd_ = function(e) {
  */
 goog.ui.SliderBase.prototype.handleKeyDown_ = function(e) {
   var handled = true;
+  var thumb;
+  if (e.target == this.valueThumb || e.target == this.extentThumb) {
+    thumb = goog.asserts.assertElement(e.target);
+  }
+  var delta;
   switch (e.keyCode) {
     case goog.events.KeyCodes.HOME:
-      this.animatedSetValue(this.getMinimum());
+      this.animateThumbToStart_(thumb);
       break;
     case goog.events.KeyCodes.END:
-      this.animatedSetValue(this.getMaximum());
+      this.animateThumbToEnd_(thumb);
       break;
     case goog.events.KeyCodes.PAGE_UP:
-      this.moveThumbs(this.getBlockIncrement());
+      delta = this.getBlockIncrement();
       break;
     case goog.events.KeyCodes.PAGE_DOWN:
-      this.moveThumbs(-this.getBlockIncrement());
+      delta = -this.getBlockIncrement();
       break;
     case goog.events.KeyCodes.LEFT:
       var sign = this.flipForRtl_ && this.isRightToLeft() ? 1 : -1;
-      this.moveThumbs(
-          e.shiftKey ? sign * this.getBlockIncrement() :
-                       sign * this.getUnitIncrement());
+      delta = e.shiftKey ? sign * this.getBlockIncrement() :
+                           sign * this.getUnitIncrement();
       break;
     case goog.events.KeyCodes.DOWN:
-      this.moveThumbs(
-          e.shiftKey ? -this.getBlockIncrement() : -this.getUnitIncrement());
+      delta = e.shiftKey ? -this.getBlockIncrement() : -this.getUnitIncrement();
       break;
     case goog.events.KeyCodes.RIGHT:
       var sign = this.flipForRtl_ && this.isRightToLeft() ? -1 : 1;
-      this.moveThumbs(
-          e.shiftKey ? sign * this.getBlockIncrement() :
-                       sign * this.getUnitIncrement());
+      delta = e.shiftKey ? sign * this.getBlockIncrement() :
+                           sign * this.getUnitIncrement();
       break;
     case goog.events.KeyCodes.UP:
-      this.moveThumbs(
-          e.shiftKey ? this.getBlockIncrement() : this.getUnitIncrement());
+      delta = e.shiftKey ? this.getBlockIncrement() : this.getUnitIncrement();
       break;
 
     default:
       handled = false;
   }
 
   if (handled) {
+    if (delta) {
+      thumb ? this.moveThumb_(delta, thumb) : this.moveThumbs(delta);
+    }
     e.preventDefault();
   }
 };
@@ -851,6 +854,54 @@ goog.ui.SliderBase.prototype.getThumbPosition_ = function(thumb) {
 };
 
 
+/**
+ * Animates the given thumb (or the handle if thumb is not specified) towards
+ * the minimum value position.
+ * @param {!Element=} opt_thumb
+ * @private
+ */
+goog.ui.SliderBase.prototype.animateThumbToStart_ = function(opt_thumb) {
+  if (opt_thumb) {
+    if (opt_thumb == this.valueThumb) {
+      if (this.getValue() != this.getMinimum()) {
+        this.animatedSetValue(this.getMinimum(), this.valueThumb);
+      }
+    } else if (opt_thumb == this.extentThumb) {
+      var newExtentValue = this.getValue() + this.minExtent_;
+      if (this.getValue() + this.getExtent() != newExtentValue) {
+        this.animatedSetValue(newExtentValue, this.extentThumb);
+      }
+    }
+  } else {
+    this.animatedSetValue(this.getMinimum());
+  }
+};
+
+
+/**
+ * Animates the given thumb (or the handle if thumb is not specified) towards
+ * the maximum value position.
+ * @param {!Element=} opt_thumb
+ * @private
+ */
+goog.ui.SliderBase.prototype.animateThumbToEnd_ = function(opt_thumb) {
+  if (opt_thumb) {
+    if (opt_thumb == this.extentThumb) {
+      if (this.getValue() + this.getExtent() != this.getMaximum()) {
+        this.animatedSetValue(this.getMaximum(), this.extentThumb);
+      }
+    } else if (opt_thumb == this.valueThumb) {
+      var newValue = this.getValue() + this.getExtent() - this.minExtent_;
+      if (this.getValue() != newValue) {
+        this.animatedSetValue(newValue, this.valueThumb);
+      }
+    }
+  } else {
+    this.animatedSetValue(this.getMaximum());
+  }
+};
+
+
 /**
  * Returns whether a thumb is currently being dragged with the mouse (or via
  * touch). Note that changing the value with keyboard, mouswheel, or via
@@ -890,6 +941,44 @@ goog.ui.SliderBase.prototype.moveThumbs = function(delta) {
 };
 
 
+/**
+ * Moves the given thumb by the the specified delta as follows:
+ * - The thumb is moved as long as it stays within its [min,max].
+ * - Once it reaches or exceeds min (or max), it stays at min (or max).
+ * In case the thumb has reached min (or max), no change event will fire.
+ * If the specified delta is smaller than the step size, it will be rounded
+ * to the step size.
+ * @param {number} delta The delta by which to move the selected range.
+ * @param {!Element} thumb The thumb to move if given.
+ * @private
+ */
+goog.ui.SliderBase.prototype.moveThumb_ = function(delta, thumb) {
+  // Assume that a small delta is supposed to be at least a step.
+  if (Math.abs(delta) < this.getStep()) {
+    delta = goog.math.sign(delta) * this.getStep();
+  }
+  var currentMinPos = this.getValue();
+  var currentMaxPos = this.getValue() + this.getExtent();
+  if (thumb == this.valueThumb) {
+    var newMinPos = this.getThumbPosition_(this.valueThumb) + delta;
+    newMinPos = goog.math.clamp(
+        newMinPos, this.getMinimum(), this.getMaximum() - this.minExtent_);
+    // Change the extent value to keep the present extentThumb position while
+    // move the valueThumb to newMinPos.
+    var newExtent = currentMaxPos - newMinPos;
+    this.setValueAndExtent(newMinPos, newExtent >= 0 ? newExtent : 0);
+  } else if (thumb == this.extentThumb) {
+    var newMaxPos = this.getThumbPosition_(this.extentThumb) + delta;
+    newMaxPos = goog.math.clamp(
+        newMaxPos, this.getMinimum() + this.minExtent_, this.getMaximum());
+    // Change the extent value to keep the present valueThumb position while
+    // move the extentThumb to newMaxPos.
+    var newExtent = newMaxPos - currentMinPos;
+    this.setValueAndExtent(currentMinPos, newExtent >= 0 ? newExtent : 0);
+  }
+};
+
+
 /**
  * Sets the position of the given thumb. The set is ignored and no CHANGE event
  * fires if it violates the constraint minimum <= value (valueThumb position) <=
@@ -1119,8 +1208,9 @@ goog.ui.SliderBase.prototype.getThumbCoordinateForValue = function(val) {
 /**
  * Sets the value and starts animating the handle towards that position.
  * @param {number} v Value to set and animate to.
+ * @param {!HTMLDivElement=} opt_thumb The thumb to move if given.
  */
-goog.ui.SliderBase.prototype.animatedSetValue = function(v) {
+goog.ui.SliderBase.prototype.animatedSetValue = function(v, opt_thumb) {
   // the value might be out of bounds
   v = goog.math.clamp(v, this.getMinimum(), this.getMaximum());
 
@@ -1131,7 +1221,7 @@ goog.ui.SliderBase.prototype.animatedSetValue = function(v) {
   var animations = new goog.fx.AnimationParallelQueue();
   var end;
 
-  var thumb = this.getClosestThumb_(v);
+  var thumb = opt_thumb || this.getClosestThumb_(v);
   var previousValue = this.getValue();
   var previousExtent = this.getExtent();
   var previousThumbValue = this.getThumbPosition_(thumb);
@@ -1519,10 +1609,17 @@ goog.ui.SliderBase.prototype.setVisible = function(visible) {
  * @protected
  */
 goog.ui.SliderBase.prototype.setAriaRoles = function() {
-  var el = this.getElement();
-  goog.asserts.assert(
-      el, 'The DOM element for the slider base cannot be null.');
-  goog.a11y.aria.setRole(el, goog.a11y.aria.Role.SLIDER);
+  if (!this.valueThumb) {
+    return;
+  }
+
+  var valueThumb = goog.asserts.assertElement(this.valueThumb);
+  goog.a11y.aria.setRole(valueThumb, goog.a11y.aria.Role.SLIDER);
+  valueThumb.tabIndex = 0;
+  var extentThumb = goog.asserts.assertElement(this.extentThumb);
+  goog.a11y.aria.setRole(extentThumb, goog.a11y.aria.Role.SLIDER);
+  extentThumb.tabIndex = 0;
+
   this.updateAriaStates();
 };
 
@@ -1532,18 +1629,48 @@ goog.ui.SliderBase.prototype.setAriaRoles = function() {
  * @protected
  */
 goog.ui.SliderBase.prototype.updateAriaStates = function() {
-  var element = this.getElement();
-  if (element) {
-    goog.a11y.aria.setState(
-        element, goog.a11y.aria.State.VALUEMIN, this.getMinimum());
-    goog.a11y.aria.setState(
-        element, goog.a11y.aria.State.VALUEMAX, this.getMaximum());
-    goog.a11y.aria.setState(
-        element, goog.a11y.aria.State.VALUENOW, this.getValue());
-    // Passing an empty value to setState will restore the default.
-    goog.a11y.aria.setState(
-        element, goog.a11y.aria.State.VALUETEXT, this.getTextValue() || '');
+  if (!this.valueThumb) {
+    return;
   }
+
+  var valueThumb = goog.asserts.assertElement(this.valueThumb);
+  var extentThumb = goog.asserts.assertElement(this.extentThumb);
+
+  goog.a11y.aria.setState(
+      extentThumb, goog.a11y.aria.State.VALUEMIN,
+      this.getValue() + this.minExtent_);
+  goog.a11y.aria.setState(
+      valueThumb, goog.a11y.aria.State.VALUEMIN, this.getMinimum());
+
+  goog.a11y.aria.setState(
+      extentThumb, goog.a11y.aria.State.VALUENOW,
+      this.getValue() + this.getExtent());
+  goog.a11y.aria.setState(
+      valueThumb, goog.a11y.aria.State.VALUENOW, this.getValue());
+
+  goog.a11y.aria.setState(
+      valueThumb, goog.a11y.aria.State.VALUEMAX,
+      this.getValue() + this.getExtent() - this.minExtent_);
+  goog.a11y.aria.setState(
+      extentThumb, goog.a11y.aria.State.VALUEMAX, this.getMaximum());
+
+  this.updateAriaValueText_();
+};
+
+
+/**
+ * Updates the 'aria-valuetext' property for the slider thumbs.
+ * @private
+ */
+goog.ui.SliderBase.prototype.updateAriaValueText_ = function() {
+  // Passing an empty value to setState will restore the default.
+  goog.a11y.aria.setState(
+      goog.asserts.assertElement(this.extentThumb),
+      goog.a11y.aria.State.VALUETEXT,
+      this.getTextValue(this.getValue() + this.getExtent()) || '');
+  goog.a11y.aria.setState(
+      goog.asserts.assertElement(this.valueThumb),
+      goog.a11y.aria.State.VALUETEXT, this.getTextValue(this.getValue()) || '');
 };
 
 
@@ -1605,6 +1732,20 @@ goog.ui.SliderBase.prototype.setEnabled = function(enable) {
     return;
   }
 
+  if (enable) {
+    this.valueThumb.tabIndex = 0;
+    goog.a11y.aria.removeState(this.valueThumb, goog.a11y.aria.State.DISABLED);
+    this.extentThumb.tabIndex = 0;
+    goog.a11y.aria.removeState(this.extentThumb, goog.a11y.aria.State.DISABLED);
+  } else {
+    this.valueThumb.tabIndex = -1;
+    goog.a11y.aria.setState(
+        this.valueThumb, goog.a11y.aria.State.DISABLED, 'true');
+    this.extentThumb.tabIndex = -1;
+    goog.a11y.aria.setState(
+        this.extentThumb, goog.a11y.aria.State.DISABLED, 'true');
+  }
+
   var eventType = enable ? goog.ui.Component.EventType.ENABLE :
                            goog.ui.Component.EventType.DISABLE;
   if (this.dispatchEvent(eventType)) {
@@ -1644,14 +1785,25 @@ goog.ui.SliderBase.prototype.getOffsetStart_ = function(element) {
 
 
 /**
+ * @param {number=} opt_value
  * @return {?string} The text value for the slider's current value, or null if
  *     unavailable.
  */
-goog.ui.SliderBase.prototype.getTextValue = function() {
-  return this.labelFn_(this.getValue());
+goog.ui.SliderBase.prototype.getTextValue = function(opt_value) {
+  var value = opt_value || this.getValue();
+  return this.labelFn_(value);
 };
 
 
+/**
+ * Sets the function to map slider values to text description.
+ * @param {!function(number): string} labelFn
+ */
+goog.ui.SliderBase.prototype.setLabelFn = function(labelFn) {
+  this.labelFn_ = labelFn;
+  this.updateAriaValueText_();
+};
+
 
 /**
  * The factory for creating additional animations to be played when animating to