aria-valuetext as formatter value

README.md

@@ -187,7 +187,7 @@ Options can be passed either as a data (data-slider-foo) attribute, or as part o
 | handle |	string |	'round' |	handle shape. Accepts: 'round', 'square', 'triangle' or 'custom' |
 | reversed | bool | false | whether or not the slider should be reversed |
 | enabled | bool | true | whether or not the slider is initially enabled |
-| formatter |	function |	returns the plain value |	formatter callback. Return the value wanted to be displayed in the tooltip |
+| formatter |	function |	returns the plain value |	formatter callback. Return the value wanted to be displayed in the tooltip, useful for string values. If a string is returned it will be indicated in an aria-valuetext attribute.  |
 | natural_arrow_keys | bool | false | The natural order is used for the arrow keys. Arrow up select the upper slider value for vertical sliders, arrow right the righter slider value for a horizontal slider - no matter if the slider was reversed or not. By default the arrow keys are oriented by arrow up/right to the higher slider value, arrow down/left to the lower slider value. |
 | ticks | array | [ ] | Used to define the values of ticks. Tick marks are indicators to denote special values in the range. This option overwrites min and max options. |
 | ticks_positions | array | [ ] | Defines the positions of the tick values in percentages. The first value should always be 0, the last value should always be 100 percent. |

src/js/bootstrap-slider.js

@@ -1148,6 +1148,9 @@ const windowIsDefined = (typeof window === "object");
 
 				this.handle1.style[this.stylePos] = positionPercentages[0]+'%';
 				this.handle1.setAttribute('aria-valuenow', this._state.value[0]);
+				if (isNaN(this.options.formatter(this._state.value[0])) ) {
+					this.handle1.setAttribute('aria-valuetext', this.options.formatter(this._state.value[0]));
+				}
 
 				this.handle2.style[this.stylePos] = positionPercentages[1]+'%';
 				this.handle2.setAttribute('aria-valuenow', this._state.value[1]);

test/specs/AriaValueTextFormatterSpec.js

@@ -0,0 +1,28 @@
+    it("Sets the aria-valuetext to 'formatter' value", function() {
+      var textValArray = new Array('Monday','Wednesday','Friday');
+      var tooltipFormatter = function(value) {
+        var arrActiveValue = value;
+        return 'Current value: ' + textValArray[arrActiveValue-1];
+      };
+
+      //Formatter is used
+      var testSlider = $("#accessibilitySliderA").slider({
+        formatter : tooltipFormatter
+      });
+      testSlider.slider('setValue', 2);
+
+      var tooltipMessage = $("#accessibilitySliderA").siblings(".slider").children(".min-slider-handle").attr("aria-valuetext");
+      var expectedMessage = tooltipFormatter(2);
+      expect(tooltipMessage).toBe(expectedMessage);
+
+    });
+    it("Does not use aria-valuetext if 'formatter' is not used", function() {
+
+      //Formatter is not used  
+      var testSliderB = $("#accessibilitySliderB").slider({});
+      testSliderB.slider('setValue', 2);
+
+      var ariaValueText = $("#accessibilitySliderB").siblings(".slider").children(".min-slider-handle").attr("aria-valuetext");
+      expect(ariaValueText).not.toBeDefined();
+    });
+