Index: components/uiOptions/js/UIOptions.js =================================================================== --- components/uiOptions/js/UIOptions.js (revision 8629) +++ components/uiOptions/js/UIOptions.js (working copy) @@ -129,7 +129,9 @@ if (that.isInRange(model)) { that.events.modelChanged.fire(model, that.model, source); that.model = model; that.locate("thumb").attr("aria-valuenow", that.model); + var result = fluid.stringTemplate(that.options.unitTextTemplate, {val: that.model}); + that.locate("thumb").attr("aria-valuetext", result); } }; @@ -152,7 +154,8 @@ }, min: 0, max: 100, - value: null + value: null, + unitTextTemplate: "%val point" }); })(jQuery, fluid_1_2); @@ -458,7 +461,8 @@ type: "fluid.textfieldSlider", options: { min: 1, - max: 10 + max: 10, + unitTextTemplate: "%val em" } }, selectors: { Index: tests/component-tests/uiOptions/js/TextfieldSliderTests.js =================================================================== --- tests/component-tests/uiOptions/js/TextfieldSliderTests.js (revision 8629) +++ tests/component-tests/uiOptions/js/TextfieldSliderTests.js (working copy) @@ -43,13 +43,14 @@ slider.slider("value", valToTest); jqUnit.assertEquals("Slider value should be " + expected, expected, slider.slider("value")); textfield.val(valToTest); textfield.change(); jqUnit.assertEquals("Textfield value should be the " + expected, expected, textfield.val()); - jqUnit.assertEquals("The ARIA value now should be " + expected, expected, thumb.attr("aria-valuenow")); + jqUnit.assertEquals("The ARIA value now should be " + expected, expected, thumb.attr("aria-valuenow")); + jqUnit.assertEquals("The ARIA valuetext should be ", expected + " point", thumb.attr("aria-valuetext")); }; - + tests.test("Test Min/Max Size", function () { - expect(18); + expect(24); var textfieldSlider = fluid.textfieldSlider(".fl-textfield-slider", {min: 5, max: 55}); testSetting(56, 55); @@ -61,7 +62,7 @@ }); tests.test("Test Negative Scale", function () { - expect(15); + expect(20); fluid.textfieldSlider(".fl-textfield-slider", {min: -15, max: -5}); testSetting(56, -5); @@ -71,6 +72,35 @@ testSetting(-5, -5); }); - + // change the default ARIA-valuetext of the slider + var customUnitTextOption = { + min: 5, + max: 55, + unitTextTemplate: "point %val" + }; + + var testValueTextSetting = function (valToTest, expected) { + var slider = $(".flc-textfieldSlider-slider"); + var textfield = $(".flc-textfieldSlider-field"); + var thumb = $(".ui-slider-handle"); + + slider.slider("value", valToTest); + jqUnit.assertEquals("Slider value should be " + expected, expected, slider.slider("value")); + textfield.val(valToTest); + textfield.change(); + jqUnit.assertEquals("Textfield value should be the " + expected, expected, textfield.val()); + jqUnit.assertEquals("The ARIA value now should be " + expected, expected, thumb.attr("aria-valuenow")); + jqUnit.assertEquals("The ARIA valuetext should be custom ", "point " + expected, thumb.attr("aria-valuetext")); + + }; + + tests.test("ARIA valuetext", function () { + fluid.textfieldSlider(".fl-textfield-slider", customUnitTextOption); + testValueTextSetting(55, 55); + testValueTextSetting(4, 5); + testValueTextSetting(25, 25); + testValueTextSetting(-5, 5); + }); + }); })(jQuery);