Permalink
Browse files

FLUID-4862: Ensure buttons have labels for screen readers to read; mo…

…ve video label out so Safari will see it
  • Loading branch information...
acheetham committed Dec 11, 2012
1 parent 4539572 commit 1eb649850196727e11f242aee600bdc14b45f900
@@ -12,7 +12,9 @@
<div class="fl-videoPlayer-controller-buttons">
<div class="fl-videoPlayer-controller-buttons-main">
- <button type="button" class="flc-videoPlayer-play fl-videoPlayer-button"></button>
+ <button type="button" class="flc-videoPlayer-play fl-videoPlayer-button">
+ <span class="flc-videoPlayer-play-label fl-hidden-accessible"></span>
+ </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">
<button type="button" class="flc-videoPlayer-mute fl-videoPlayer-button"></button>
@@ -39,22 +41,28 @@
<div class="fl-videoPlayer-controller-buttons-secondary">
<div class="flc-videoPlayer-captionControls-container fl-videoPlayer-captions">
- <button class="flc-videoPlayer-captions-button fl-videoPlayer-button"></button>
+ <button class="flc-videoPlayer-captions-button fl-videoPlayer-button">
+ <span class="flc-videoPlayer-captions-label fl-hidden-accessible"></span>
+ </button>
<ul class="flc-videoPlayer-captions-languageMenu fl-videoPlayer-languageMenu">
<li class="flc-videoPlayer-language flc-videoPlayer-menuItem fl-videoPlayer-menuItem"></li>
<li class="flc-videoPlayer-languageNone flc-videoPlayer-menuItem fl-videoPlayer-menuItem"></li>
</ul>
</div>
<div class="flc-videoPlayer-transcriptControls-container fl-videoPlayer-transcript">
- <button class="flc-videoPlayer-transcripts-button fl-videoPlayer-button"></button>
+ <button class="flc-videoPlayer-transcripts-button fl-videoPlayer-button">
+ <span class="flc-videoPlayer-transcripts-label fl-hidden-accessible"></span>
+ </button>
<ul class="flc-videoPlayer-transcripts-languageMenu fl-videoPlayer-languageMenu">
<li class="flc-videoPlayer-language flc-videoPlayer-menuItem fl-videoPlayer-menuItem"></li>
<li class="flc-videoPlayer-languageNone flc-videoPlayer-menuItem fl-videoPlayer-menuItem"></li>
</ul>
</div>
- <button id="fullscreen" type="button" class="flc-videoPlayer-fullscreen fl-videoPlayer-optional fl-videoPlayer-button"></button>
+ <button id="fullscreen" type="button" class="flc-videoPlayer-fullscreen fl-videoPlayer-optional fl-videoPlayer-button">
+ <span class="flc-videoPlayer-fullscreen-label fl-hidden-accessible"></span>
+ </button>
</div>
</div>
</div>
View
@@ -230,6 +230,7 @@ https://github.com/fluid-project/infusion/raw/master/Infusion-LICENSE.txt
finalInitFunction: "fluid.videoPlayer.languageControls.finalInit",
selectors: {
button: ".flc-videoPlayer-languageButton",
+ label: ".flc-videoPlayer-languageButton-label",
menu: ".flc-videoPlayer-languageMenu"
},
events: {
@@ -259,7 +260,8 @@ https://github.com/fluid-project/infusion/raw/master/Infusion-LICENSE.txt
pressed: "{languageControls}.options.styles.button"
},
selectors: {
- button: "{languageControls}.options.selectors.button"
+ button: "{languageControls}.options.selectors.button",
+ label: "{languageControls}.options.selectors.label"
},
strings: "{languageControls}.options.strings"
}
View
@@ -26,7 +26,8 @@ https://github.com/fluid-project/infusion/raw/master/Infusion-LICENSE.txt
onReady: null
},
selectors: { // Integrators may override this selector
- button: ".flc-videoPlayer-button"
+ button: ".flc-videoPlayer-button",
+ label: ".flc-videoPlayer-button-label"
},
styles: {
init: "fl-videoPlayer-button-init",
@@ -80,7 +81,9 @@ https://github.com/fluid-project/infusion/raw/master/Infusion-LICENSE.txt
}
button.attr("aria-pressed", pressed);
- that.tooltip.updateContent(that.tooltipContentFunction(that));
+ var labelText = that.tooltipContentFunction(that);
+ that.locate("label").text(labelText);
+ that.tooltip.updateContent(labelText);
};
that.press = function () {
View
@@ -541,12 +541,13 @@ https://github.com/fluid-project/infusion/raw/master/Infusion-LICENSE.txt
that.container.append(res[key].resourceText);
that.refreshView();
var video = that.locate("video");
- video.attr("aria-label", that.options.strings.videoTitlePreface + that.options.videoTitle);
// Setting the width and height attributes to respect the CSS API for setting the size of the video
// This is required for cross browser sizing of the video
video.attr("width", video.css("width"));
video.attr("height", video.css("height"));
+ that.locate("videoContainer").attr("aria-label", that.options.strings.videoTitlePreface + that.options.videoTitle);
+
bindVideoPlayerDOMEvents(that);
//create all the listeners to the model
bindVideoPlayerModel(that);
@@ -71,6 +71,7 @@ https://github.com/fluid-project/infusion/raw/master/Infusion-LICENSE.txt
currentLanguagePath: "currentTracks.captions",
selectors: {
button: ".flc-videoPlayer-captions-button",
+ label: ".flc-videoPlayer-captions-label",
menu: ".flc-videoPlayer-captions-languageMenu"
},
styles: {
@@ -99,6 +100,7 @@ https://github.com/fluid-project/infusion/raw/master/Infusion-LICENSE.txt
currentLanguagePath: "currentTracks.transcripts",
selectors: {
button: ".flc-videoPlayer-transcripts-button",
+ label: ".flc-videoPlayer-transcripts-label",
menu: ".flc-videoPlayer-transcripts-languageMenu"
},
styles: {
@@ -121,7 +123,8 @@ https://github.com/fluid-project/infusion/raw/master/Infusion-LICENSE.txt
container: "{controllers}.container",
options: {
selectors: {
- button: ".flc-videoPlayer-play"
+ button: ".flc-videoPlayer-play",
+ label: ".flc-videoPlayer-play-label"
},
styles: {
init: "fl-videoPlayer-play",
@@ -143,7 +146,8 @@ https://github.com/fluid-project/infusion/raw/master/Infusion-LICENSE.txt
container: "{controllers}.container",
options: {
selectors: {
- button: ".flc-videoPlayer-fullscreen"
+ button: ".flc-videoPlayer-fullscreen",
+ label: ".flc-videoPlayer-fullscreen-label"
},
styles: {
init: "fl-videoPlayer-fullscreen",
@@ -31,7 +31,9 @@ <h2 id="qunit-userAgent"></h2>
<div id="qunit-fixture">
<div id="basic-languageControls-test">
- <button type="button" class="flc-videoPlayer-languageButton"></button>
+ <button type="button" class="flc-videoPlayer-languageButton">
+ <span class="flc-videoPlayer-languageButton-label fl-hidden-accessible"></span>
+ </button>
<ul id="basic-menu-test" class="flc-videoPlayer-languageMenu">
<li class="flc-videoPlayer-language flc-videoPlayer-menuItem fl-videoPlayer-menuItem"></li>
<li class="flc-videoPlayer-languageNone flc-videoPlayer-menuItem fl-videoPlayer-menuItem"></li>
@@ -31,7 +31,15 @@ <h2 id="qunit-userAgent"></h2>
<div id="qunit-fixture">
<div id="basic-toggle-button-test">
- <button type="button" class="test-toggle-button"></button>
+ <button type="button" class="test-toggle-button">
+ <span class="flc-videoPlayer-button-label fl-hidden-accessible"></span>
+ </button>
+ </div>
+
+ <div id="custom-selector-test">
+ <button type="button" class="test-toggle-button">
+ <span class="special-selector fl-hidden-accessible"></span>
+ </button>
</div>
</div> <!-- /main -->
@@ -177,7 +177,7 @@ fluid.registerNamespace("fluid.tests");
listeners: {
onReady: {
listener: function (that) {
- jqUnit.expect(8);
+ jqUnit.expect(10);
var langList = that.menu.locate("language");
var showHide = $(that.menu.locate("showHide")[0]);
var verifyLanguageState = function (expectedShowText, expectedShowHideFlag) {
@@ -190,10 +190,12 @@ fluid.registerNamespace("fluid.tests");
jqUnit.notVisible("Menu should not be visible initially", that.menu.container);
verifyLanguageState(that.options.strings.showLanguage, false);
+ jqUnit.assertEquals("Button should have default text", that.button.options.strings.press, that.button.locate("label").text());
var button = $(that.locate("button")[0]);
button.click();
jqUnit.isVisible("Clicking the button should show menu", that.menu.container);
jqUnit.assertTrue("Buttons state should be released", that.button.model.pressed);
+ jqUnit.assertEquals("Button should have pressed text", that.button.options.strings.release, that.button.locate("label").text());
button.click();
jqUnit.notVisible("Clicking the button again should hide menu again", that.menu.container);
View
@@ -92,11 +92,12 @@ fluid.registerNamespace("fluid.testUtils");
};
fluid.testUtils.verifyBasicButtonFunctions = function (buttonEl, name, tooltipReleased, tooltipPressed, stylePressed) {
- jqUnit.expect(12);
+ jqUnit.expect(13);
jqUnit.assertEquals("There should be exactly one " + name + " button", 1, buttonEl.length);
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());
var tooltip = fluid.testUtils.getTooltipCheckString(buttonEl, tooltipReleased);
var tooltipID = buttonEl.attr("aria-describedby");
@@ -34,15 +34,15 @@ fluid.registerNamespace("fluid.tests");
button: ".test-toggle-button"
}
};
- fluid.tests.initToggleButton = function (testOpts) {
+ fluid.tests.initToggleButton = function (container, testOpts) {
var opts = fluid.copy(baseToggleButtonOpts);
$.extend(true, opts, testOpts);
- return fluid.toggleButton("#basic-toggle-button-test", opts);
+ return fluid.toggleButton(container, opts);
};
toggleButtonTests.asyncTest("State change", function () {
jqUnit.expect(3);
- var testComponent = fluid.tests.initToggleButton({
+ var testComponent = fluid.tests.initToggleButton("#basic-toggle-button-test", {
listeners: {
onReady: function (that) {
jqUnit.assertEquals("Initial state should be 'false'", false, that.readIndirect("modelPath"));
@@ -59,7 +59,7 @@ fluid.registerNamespace("fluid.tests");
toggleButtonTests.asyncTest("onPress event", function () {
jqUnit.expect(1);
- var testComponent = fluid.tests.initToggleButton({
+ var testComponent = fluid.tests.initToggleButton("#basic-toggle-button-test", {
listeners: {
onReady: function (that) {
var toggleButton = that.locate("button");
@@ -76,7 +76,7 @@ fluid.registerNamespace("fluid.tests");
toggleButtonTests.asyncTest("Press", function () {
jqUnit.expect(3);
var testComponent;
- testComponent = fluid.tests.initToggleButton({
+ testComponent = fluid.tests.initToggleButton("#basic-toggle-button-test", {
listeners: {
onReady: function (that) {
jqUnit.assertEquals("Initial state should be 'false'", false, that.readIndirect("modelPath"));
@@ -92,7 +92,7 @@ fluid.registerNamespace("fluid.tests");
});
toggleButtonTests.asyncTest("Default integrated functionality", function () {
- var testComponent = fluid.tests.initToggleButton({
+ var testComponent = fluid.tests.initToggleButton("#basic-toggle-button-test", {
listeners: {
onPress: fluid.tests.onPressEventHandler,
onReady: function (that) {
@@ -115,7 +115,7 @@ fluid.registerNamespace("fluid.tests");
press: "press me",
release: "release me"
};
- var testComponent = fluid.tests.initToggleButton({
+ var testComponent = fluid.tests.initToggleButton("#basic-toggle-button-test", {
strings: testStrings,
listeners: {
onReady: function (that) {
@@ -142,7 +142,7 @@ fluid.registerNamespace("fluid.tests");
press: "press me",
release: "release me"
},
- testComponent = fluid.tests.initToggleButton({
+ testComponent = fluid.tests.initToggleButton("#basic-toggle-button-test", {
invokers: {
tooltipContentFunction: {
funcName: "fluid.tests.tooltipContentFunction"
@@ -159,5 +159,39 @@ fluid.registerNamespace("fluid.tests");
});
});
+ toggleButtonTests.asyncTest("Label text", function () {
+ jqUnit.expect(2);
+ testComponent = fluid.tests.initToggleButton("#basic-toggle-button-test", {
+ listeners: {
+ onReady: function (that) {
+ jqUnit.assertEquals("Content should contain press label text", that.options.strings.press, that.locate("label").text());
+ that.locate("button").click();
+ },
+ onPress: function (that) {
+ jqUnit.assertEquals("Content should contain release label text", that.options.strings.release, that.locate("label").text());
+ start();
+ }
+ }
+ });
+ });
+
+ toggleButtonTests.asyncTest("Label text: custom selector", function () {
+ jqUnit.expect(2);
+ testComponent = fluid.tests.initToggleButton("#custom-selector-test", {
+ selectors: {
+ label: ".special-selector"
+ },
+ listeners: {
+ onReady: function (that) {
+ jqUnit.assertEquals("Content should contain press label text", that.options.strings.press, that.locate("label").text());
+ that.locate("button").click();
+ },
+ onPress: function (that) {
+ jqUnit.assertEquals("Content should contain release label text", that.options.strings.release, that.locate("label").text());
+ start();
+ }
+ }
+ });
+ });
});
})(jQuery);
@@ -135,7 +135,7 @@ https://github.com/fluid-project/infusion/raw/master/Infusion-LICENSE.txt
var testVideoLabel = function (vp, expectedLabel) {
jqUnit.expect(1);
- jqUnit.assertEquals("aria-label should be set properly", vp.options.strings.videoTitlePreface + expectedLabel, vp.locate("video").attr("aria-label"));
+ jqUnit.assertEquals("aria-label should be set properly", vp.options.strings.videoTitlePreface + expectedLabel, vp.locate("videoContainer").attr("aria-label"));
};
videoPlayerTests.asyncTest("Video label: default", function () {

0 comments on commit 1eb6498

Please sign in to comment.