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,9 +1148,15 @@ 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]);
+				if (isNaN(this.options.formatter(this._state.value[1])) ) {
+					this.handle2.setAttribute('aria-valuetext', this.options.formatter(this._state.value[1]));
+				}
 
 				/* Position highlight range elements */
 				if (this.rangeHighlightElements.length > 0 && Array.isArray(this.options.rangeHighlights) && this.options.rangeHighlights.length > 0) {

test/specs/AriaValueTextFormatterSpec.js

@@ -0,0 +1,57 @@
+describe("Aria-valuetext Tests", function() {
+      it("Sets the aria-valuetext to 'formatter' value", function() {
+      var textValArrayA = new Array('Monday','Wednesday','Friday');
+      var tooltipFormatterA = function(value) {
+        var arrActiveValueA = value;
+        return textValArrayA[arrActiveValueA-1];
+      };
+
+      //Formatter is used
+      var testSliderA = $("#accessibilitySliderA").slider({
+        formatter : tooltipFormatterA
+      });
+      testSliderA.slider('setValue', 2);
+
+      var tooltipMessageA = $("#accessibilitySliderA").prev(".slider").children(".min-slider-handle").attr("aria-valuetext");
+      var expectedMessageA = tooltipFormatterA(2);
+      expect(tooltipMessageA).toBe(expectedMessageA);
+
+    });
+
+    it("Does not use aria-valuetext if 'formatter' is not used", function() {
+
+      //Formatter is not used  
+      var testSliderB = $("#accessibilitySliderB").slider({});
+      testSliderB.slider('setValue', 1);
+
+      var ariaValueTextB = $("#accessibilitySliderB").prev(".slider").children(".min-slider-handle").attr("aria-valuetext");
+      expect(ariaValueTextB).not.toBeDefined();
+    });
+
+    it("aria-valuetext if 'formatter' is used and has min & max value", function() {
+      var textValArrayC = new Array('Monday','Tuesday','Wednesday','Thursday','Friday','Saturday','Sunday');
+      var tooltipFormatterC = function(value) {
+          if(value[1]){
+            var arrActiveValueC0 = value[0];
+            var arrActiveValueC1 = value[1];  
+            return [ textValArrayC[arrActiveValueC0-1], textValArrayC[arrActiveValueC1-1] ];
+          } else {
+          	var arrActiveValueC = value;
+  			return textValArrayC[arrActiveValueC-1];
+          }
+      };
+
+      //Formatter is used for ranges
+      var testSliderC = $("#accessibilitySliderC").slider({
+        range: true,
+        formatter : tooltipFormatterC
+      });
+      var valuesToSet = [2,4];
+      testSliderC.slider('setValue', valuesToSet);
+      var expectedMessageC = tooltipFormatterC([2,4]);
+      var ttminMessage = $("#accessibilitySliderC").prev(".slider").children(".min-slider-handle").attr("aria-valuetext");
+      var ttmaxMessage = $("#accessibilitySliderC").prev(".slider").children(".max-slider-handle").attr("aria-valuetext");
+      expect(ttminMessage).toBe(expectedMessageC[0]);
+      expect(ttmaxMessage).toBe(expectedMessageC[1]);
+    });
+});

tpl/SpecRunner.tpl

@@ -104,6 +104,8 @@
 		<span id="accessibilitySliderLabelB">Label B</span>
 		<input id="accessibilitySliderA" type="text" data-slider-labelledby="accessibilitySliderLabelA" />
 		<input id="accessibilitySliderB" type="text" data-slider-labelledby='["accessibilitySliderLabelA", "accessibilitySliderLabelB"]' />
+
+		<input id="accessibilitySliderC" type="text" />
 	</div>
 	<% with (scripts) { %>
 	  <% [].concat(jasmine, vendor, src, specs, reporters, start).forEach(function(script){ %>