Permalink
Browse files

FLUID-4862: Ensure volume controls say something reasonable with scre…

…en readers
  • Loading branch information...
1 parent 5dd43f5 commit 8030a665e95b3e08ea55dfc9282336be57fa8e02 @acheetham acheetham committed Dec 12, 2012
Showing with 17 additions and 7 deletions.
  1. +1 −1 html/videoPlayer_template.html
  2. +12 −4 js/VideoPlayer_controllers.js
  3. +1 −1 tests/js/TestUtils.js
  4. +3 −1 tests/js/VideoPlayerControlsTests.js
@@ -15,7 +15,7 @@
<button type="button" class="flc-videoPlayer-play fl-videoPlayer-button">
</button>
- <div class="flc-videoPlayer-volumeContainer fl-videoPlayer-volumeContainer" title="Volume controls. Use up and down arrows to adjust volume, space or enter to mute">
+ <div class="flc-videoPlayer-volumeContainer fl-videoPlayer-volumeContainer">
<button type="button" class="flc-videoPlayer-mute fl-videoPlayer-button">
</button>
<div class="flc-videoPlayer-volumeControl"></div>
@@ -465,6 +465,8 @@ https://github.com/fluid-project/infusion/raw/master/Infusion-LICENSE.txt
fluid.videoPlayer.volumeControls.init = function (that) {
var volumeControl = that.locate("volumeControl");
+ var mute = that.locate("mute");
+
volumeControl.addClass(that.options.styles.volumeControl);
volumeControl.slider({
orientation: "vertical",
@@ -473,8 +475,10 @@ https://github.com/fluid-project/infusion/raw/master/Infusion-LICENSE.txt
max: that.model.maxVolume,
value: that.model.volume
});
+ var handle = that.locate("handle");
+
// TODO: This in inherited. Do we need to add aria to sliders ourselves?
- that.locate("handle").attr({
+ handle.attr({
"aria-label": that.options.strings.volume,
"aria-valuemin": that.model.minVolume,
"aria-valuemax": that.model.maxVolume,
@@ -484,9 +488,9 @@ https://github.com/fluid-project/infusion/raw/master/Infusion-LICENSE.txt
});
fluid.tabindex(that.container, 0);
- fluid.tabindex(that.locate("mute"), -1);
+ fluid.tabindex(mute, -1);
fluid.tabindex(volumeControl, -1);
- fluid.tabindex(that.locate("handle"), -1);
+ fluid.tabindex(handle, -1);
fluid.activatable(that.container, function (evt) {
that.muteButton.press();
@@ -505,6 +509,9 @@ https://github.com/fluid-project/infusion/raw/master/Infusion-LICENSE.txt
}
}]
});
+
+ that.container.attr("aria-label", that.options.strings.instructions);
+ mute.attr("title", that.options.strings.instructions);
};
fluid.defaults("fluid.videoPlayer.volumeControls", {
@@ -533,7 +540,8 @@ https://github.com/fluid-project/infusion/raw/master/Infusion-LICENSE.txt
},
// TODO: Strings should be moved out into a single top-level bundle (FLUID-4590)
strings: {
- volume: "Volume"
+ volume: "Volume",
+ instructions: "Volume controls. Use up and down arrows to adjust volume, space or enter to mute."
},
components: {
muteButton: {
@@ -97,7 +97,7 @@ fluid.registerNamespace("fluid.testUtils");
jqUnit.assertEquals(name + " button should have role of 'button'", "button", buttonEl.attr("role"));
jqUnit.assertEquals(name + " button should have aria-pressed of 'false' initially", "false", buttonEl.attr("aria-pressed"));
jqUnit.assertFalse(name + " button should not have the 'pressed' style", buttonEl.hasClass(stylePressed));
- jqUnit.assertEquals(name + " button should have correct label", tooltipReleased, $("span", buttonEl).text());
+ jqUnit.assertEquals(name + " button should have correct aria-label", tooltipReleased, buttonEl.attr("aria-label"));
var tooltip = fluid.testUtils.getTooltipCheckString(buttonEl, tooltipReleased);
var tooltipID = buttonEl.attr("aria-describedby");
@@ -37,7 +37,7 @@ fluid.registerNamespace("fluid.tests");
});
videoPlayerControlsTests.asyncTest("Volume controls", function () {
- jqUnit.expect(5);
+ jqUnit.expect(7);
var checkSlider = function (ariavaluenow, expectedValue) {
jqUnit.assertEquals("The slider button should have valuenow of " + expectedValue, expectedValue, ariavaluenow);
},
@@ -52,6 +52,8 @@ fluid.registerNamespace("fluid.tests");
volumeSlider = that.locate("volumeControl"),
sliderHandle = that.locate("handle");
+ jqUnit.assertEquals("Mute button should have title", that.options.strings.instructions, muteButton.attr("title"));
+ jqUnit.assertEquals("Volume container should have aria-label", that.options.strings.instructions, that.container.attr("aria-label"));
checkTooltipOnHover(volumeSlider, "Volume");
checkTooltipOnHover(muteButton, "Mute");
muteButton.click();

0 comments on commit 8030a66

Please sign in to comment.