diff --git a/src/js/bootstrap-slider.js b/src/js/bootstrap-slider.js index 1292a445..d29ded72 100644 --- a/src/js/bootstrap-slider.js +++ b/src/js/bootstrap-slider.js @@ -1193,6 +1193,7 @@ const windowIsDefined = (typeof window === "object"); }, _layout: function() { var positionPercentages; + var formattedValue; if(this.options.reversed) { positionPercentages = [ 100 - this._state.percentage[0], this.options.range ? 100 - this._state.percentage[1] : this._state.percentage[1]]; @@ -1203,14 +1204,22 @@ 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])); + formattedValue = this.options.formatter(this._state.value[0]); + if (isNaN(formattedValue)) { + this.handle1.setAttribute('aria-valuetext', formattedValue); + } + else { + this.handle1.removeAttribute('aria-valuetext'); } 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])); + formattedValue = this.options.formatter(this._state.value[1]); + if (isNaN(formattedValue)) { + this.handle2.setAttribute('aria-valuetext', formattedValue); + } + else { + this.handle2.removeAttribute('aria-valuetext'); } /* Position highlight range elements */ diff --git a/test/specs/AriaValueTextFormatterSpec.js b/test/specs/AriaValueTextFormatterSpec.js index e5543b09..8189c6bf 100644 --- a/test/specs/AriaValueTextFormatterSpec.js +++ b/test/specs/AriaValueTextFormatterSpec.js @@ -53,5 +53,59 @@ describe("Aria-valuetext Tests", function() { var ttmaxMessage = $("#accessibilitySliderC").prev(".slider").children(".max-slider-handle").attr("aria-valuetext"); expect(ttminMessage).toBe(expectedMessageC[0]); expect(ttmaxMessage).toBe(expectedMessageC[1]); + + $('#accessibilitySliderC').slider('destroy'); + }); + + describe("Unset 'aria-valuetext' attribute when value can be represented as a number", function() { + var $testSliderC; + var dayOfWeek; + + var dayFormatter = function(value) { + if (value[1]) { + return [ dayOfWeek[value[0]-1], dayOfWeek[value[1]-1] ]; + } + return dayOfWeek[value-1]; + }; + + beforeEach(function() { + dayOfWeek = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday']; + + $testSliderC = $('#accessibilitySliderC').slider({ + id: 'testAccessbilitySlider', + min: 1, + max: 7, + formatter : dayFormatter + }); + }); + + afterEach(function() { + if ($testSliderC) { + $testSliderC.slider('destroy'); + } + }); + + it("Should unset 'aria-valuetext' attribute", function() { + dayOfWeek[0] = '1'; + + var valueToSet = 1; + $testSliderC.slider('setValue', valueToSet); + var ariaValueText = $('#testAccessbilitySlider').find('.min-slider-handle')[0].getAttribute('aria-valuetext'); + expect(ariaValueText).toBeNull(); + }); + + it("Should unset 'aria-valuetext' attributes for range sliders", function() { + dayOfWeek[0] = '1'; + dayOfWeek[6] = '7'; + $testSliderC.slider('setAttribute', 'range', true); + $testSliderC.slider('refresh'); + + var valuesToSet = [1, 7]; + $testSliderC.slider('setValue', valuesToSet); + var ariaValueText1 = $('#testAccessbilitySlider').find('.min-slider-handle')[0].getAttribute('aria-valuetext'); + var ariaValueText2 = $('#testAccessbilitySlider').find('.max-slider-handle')[0].getAttribute('aria-valuetext'); + expect(ariaValueText1).toBeNull(); + expect(ariaValueText2).toBeNull(); + }); }); });