Skip to content
This repository

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse code

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

…ve video label out so Safari will see it
  • Loading branch information...
commit 1eb649850196727e11f242aee600bdc14b45f900 1 parent 4539572
Anastasia Cheetham authored December 11, 2012
16  html/videoPlayer_template.html
@@ -12,7 +12,9 @@
12 12
         
13 13
             <div class="fl-videoPlayer-controller-buttons">
14 14
                 <div class="fl-videoPlayer-controller-buttons-main">
15  
-                    <button type="button" class="flc-videoPlayer-play fl-videoPlayer-button"></button>
  15
+                    <button type="button" class="flc-videoPlayer-play fl-videoPlayer-button">
  16
+                        <span class="flc-videoPlayer-play-label fl-hidden-accessible"></span>
  17
+                    </button>
16 18
         
17 19
                     <div class="flc-videoPlayer-volumeContainer fl-videoPlayer-volumeContainer" title="Volume controls. Use up and down arrows to adjust volume, space or enter to mute">
18 20
                         <button type="button" class="flc-videoPlayer-mute fl-videoPlayer-button"></button>
@@ -39,7 +41,9 @@
39 41
 
40 42
                 <div class="fl-videoPlayer-controller-buttons-secondary">
41 43
                     <div class="flc-videoPlayer-captionControls-container fl-videoPlayer-captions">
42  
-                        <button class="flc-videoPlayer-captions-button fl-videoPlayer-button"></button>
  44
+                        <button class="flc-videoPlayer-captions-button fl-videoPlayer-button">
  45
+                            <span class="flc-videoPlayer-captions-label fl-hidden-accessible"></span>
  46
+                        </button>
43 47
                         <ul class="flc-videoPlayer-captions-languageMenu fl-videoPlayer-languageMenu">
44 48
                             <li class="flc-videoPlayer-language flc-videoPlayer-menuItem fl-videoPlayer-menuItem"></li>
45 49
                             <li class="flc-videoPlayer-languageNone flc-videoPlayer-menuItem fl-videoPlayer-menuItem"></li>
@@ -47,14 +51,18 @@
47 51
                     </div>
48 52
         
49 53
                     <div class="flc-videoPlayer-transcriptControls-container fl-videoPlayer-transcript">
50  
-                        <button class="flc-videoPlayer-transcripts-button fl-videoPlayer-button"></button>
  54
+                        <button class="flc-videoPlayer-transcripts-button fl-videoPlayer-button">
  55
+                            <span class="flc-videoPlayer-transcripts-label fl-hidden-accessible"></span>
  56
+                        </button>
51 57
                         <ul class="flc-videoPlayer-transcripts-languageMenu fl-videoPlayer-languageMenu">
52 58
                             <li class="flc-videoPlayer-language flc-videoPlayer-menuItem fl-videoPlayer-menuItem"></li>
53 59
                             <li class="flc-videoPlayer-languageNone flc-videoPlayer-menuItem fl-videoPlayer-menuItem"></li>
54 60
                         </ul>
55 61
                     </div>
56 62
         
57  
-                    <button id="fullscreen" type="button" class="flc-videoPlayer-fullscreen fl-videoPlayer-optional fl-videoPlayer-button"></button>
  63
+                    <button id="fullscreen" type="button" class="flc-videoPlayer-fullscreen fl-videoPlayer-optional fl-videoPlayer-button">
  64
+                        <span class="flc-videoPlayer-fullscreen-label fl-hidden-accessible"></span>
  65
+                    </button>
58 66
                 </div>
59 67
             </div>
60 68
         </div>
4  js/MenuButton.js
@@ -230,6 +230,7 @@ https://github.com/fluid-project/infusion/raw/master/Infusion-LICENSE.txt
230 230
         finalInitFunction: "fluid.videoPlayer.languageControls.finalInit",
231 231
         selectors: {
232 232
             button: ".flc-videoPlayer-languageButton",
  233
+            label: ".flc-videoPlayer-languageButton-label",
233 234
             menu: ".flc-videoPlayer-languageMenu"
234 235
         },
235 236
         events: {
@@ -259,7 +260,8 @@ https://github.com/fluid-project/infusion/raw/master/Infusion-LICENSE.txt
259 260
                         pressed: "{languageControls}.options.styles.button"  
260 261
                     },
261 262
                     selectors: {
262  
-                        button: "{languageControls}.options.selectors.button"
  263
+                        button: "{languageControls}.options.selectors.button",
  264
+                        label: "{languageControls}.options.selectors.label"
263 265
                     },
264 266
                     strings: "{languageControls}.options.strings"
265 267
                 }
7  js/ToggleButton.js
@@ -26,7 +26,8 @@ https://github.com/fluid-project/infusion/raw/master/Infusion-LICENSE.txt
26 26
             onReady: null
27 27
         },
28 28
         selectors: {    // Integrators may override this selector
29  
-            button: ".flc-videoPlayer-button"
  29
+            button: ".flc-videoPlayer-button",
  30
+            label: ".flc-videoPlayer-button-label"
30 31
         },
31 32
         styles: {
32 33
             init: "fl-videoPlayer-button-init",
@@ -80,7 +81,9 @@ https://github.com/fluid-project/infusion/raw/master/Infusion-LICENSE.txt
80 81
             }
81 82
             button.attr("aria-pressed", pressed);
82 83
 
83  
-            that.tooltip.updateContent(that.tooltipContentFunction(that));
  84
+            var labelText = that.tooltipContentFunction(that);
  85
+            that.locate("label").text(labelText);
  86
+            that.tooltip.updateContent(labelText);
84 87
         };
85 88
 
86 89
         that.press = function () {
3  js/VideoPlayer.js
@@ -541,12 +541,13 @@ https://github.com/fluid-project/infusion/raw/master/Infusion-LICENSE.txt
541 541
                     that.container.append(res[key].resourceText);
542 542
                     that.refreshView();
543 543
                     var video = that.locate("video");
544  
-                    video.attr("aria-label", that.options.strings.videoTitlePreface + that.options.videoTitle);
545 544
                     // Setting the width and height attributes to respect the CSS API for setting the size of the video
546 545
                     // This is required for cross browser sizing of the video
547 546
                     video.attr("width", video.css("width"));
548 547
                     video.attr("height", video.css("height"));
549 548
 
  549
+                    that.locate("videoContainer").attr("aria-label", that.options.strings.videoTitlePreface + that.options.videoTitle);
  550
+
550 551
                     bindVideoPlayerDOMEvents(that);
551 552
                     //create all the listeners to the model
552 553
                     bindVideoPlayerModel(that);
8  js/VideoPlayer_controllers.js
@@ -71,6 +71,7 @@ https://github.com/fluid-project/infusion/raw/master/Infusion-LICENSE.txt
71 71
                     currentLanguagePath: "currentTracks.captions",
72 72
                     selectors: {
73 73
                         button: ".flc-videoPlayer-captions-button",
  74
+                        label: ".flc-videoPlayer-captions-label",
74 75
                         menu: ".flc-videoPlayer-captions-languageMenu"
75 76
                     },
76 77
                     styles: {
@@ -99,6 +100,7 @@ https://github.com/fluid-project/infusion/raw/master/Infusion-LICENSE.txt
99 100
                     currentLanguagePath: "currentTracks.transcripts",
100 101
                     selectors: {
101 102
                         button: ".flc-videoPlayer-transcripts-button",
  103
+                        label: ".flc-videoPlayer-transcripts-label",
102 104
                         menu: ".flc-videoPlayer-transcripts-languageMenu"
103 105
                     },
104 106
                     styles: {
@@ -121,7 +123,8 @@ https://github.com/fluid-project/infusion/raw/master/Infusion-LICENSE.txt
121 123
                 container: "{controllers}.container",
122 124
                 options: {
123 125
                     selectors: {
124  
-                        button: ".flc-videoPlayer-play"
  126
+                        button: ".flc-videoPlayer-play",
  127
+                        label: ".flc-videoPlayer-play-label"
125 128
                     },
126 129
                     styles: {
127 130
                         init: "fl-videoPlayer-play",
@@ -143,7 +146,8 @@ https://github.com/fluid-project/infusion/raw/master/Infusion-LICENSE.txt
143 146
                 container: "{controllers}.container",
144 147
                 options: {
145 148
                     selectors: {
146  
-                        button: ".flc-videoPlayer-fullscreen"
  149
+                        button: ".flc-videoPlayer-fullscreen",
  150
+                        label: ".flc-videoPlayer-fullscreen-label"
147 151
                     },
148 152
                     styles: {
149 153
                         init: "fl-videoPlayer-fullscreen",
4  tests/html/MenuButton-test.html
@@ -31,7 +31,9 @@ <h2 id="qunit-userAgent"></h2>
31 31
       <div id="qunit-fixture">
32 32
 
33 33
         <div id="basic-languageControls-test">
34  
-            <button type="button" class="flc-videoPlayer-languageButton"></button>
  34
+            <button type="button" class="flc-videoPlayer-languageButton">
  35
+                <span class="flc-videoPlayer-languageButton-label fl-hidden-accessible"></span>
  36
+            </button>
35 37
             <ul id="basic-menu-test" class="flc-videoPlayer-languageMenu">
36 38
                 <li class="flc-videoPlayer-language flc-videoPlayer-menuItem fl-videoPlayer-menuItem"></li>
37 39
                 <li class="flc-videoPlayer-languageNone flc-videoPlayer-menuItem fl-videoPlayer-menuItem"></li>
10  tests/html/ToggleButton-test.html
@@ -31,7 +31,15 @@ <h2 id="qunit-userAgent"></h2>
31 31
       <div id="qunit-fixture">
32 32
 
33 33
         <div id="basic-toggle-button-test">
34  
-            <button type="button" class="test-toggle-button"></button>
  34
+            <button type="button" class="test-toggle-button">
  35
+                <span class="flc-videoPlayer-button-label fl-hidden-accessible"></span>
  36
+            </button>
  37
+        </div>
  38
+
  39
+        <div id="custom-selector-test">
  40
+            <button type="button" class="test-toggle-button">
  41
+                <span class="special-selector fl-hidden-accessible"></span>
  42
+            </button>
35 43
         </div>
36 44
 
37 45
       </div> <!-- /main -->
4  tests/js/MenuButtonTests.js
@@ -177,7 +177,7 @@ fluid.registerNamespace("fluid.tests");
177 177
                 listeners: {
178 178
                     onReady: {
179 179
                         listener: function (that) {
180  
-                            jqUnit.expect(8);
  180
+                            jqUnit.expect(10);
181 181
                             var langList = that.menu.locate("language");
182 182
                             var showHide = $(that.menu.locate("showHide")[0]);
183 183
                             var verifyLanguageState = function (expectedShowText, expectedShowHideFlag) {
@@ -190,10 +190,12 @@ fluid.registerNamespace("fluid.tests");
190 190
                             jqUnit.notVisible("Menu should not be visible initially", that.menu.container);
191 191
                             verifyLanguageState(that.options.strings.showLanguage, false);
192 192
 
  193
+                            jqUnit.assertEquals("Button should have default text", that.button.options.strings.press, that.button.locate("label").text());
193 194
                             var button = $(that.locate("button")[0]);
194 195
                             button.click();
195 196
                             jqUnit.isVisible("Clicking the button should show menu", that.menu.container);
196 197
                             jqUnit.assertTrue("Buttons state should be released", that.button.model.pressed);
  198
+                            jqUnit.assertEquals("Button should have pressed text", that.button.options.strings.release, that.button.locate("label").text());
197 199
                             button.click();
198 200
                             jqUnit.notVisible("Clicking the button again should hide menu again", that.menu.container);
199 201
 
3  tests/js/TestUtils.js
@@ -92,11 +92,12 @@ fluid.registerNamespace("fluid.testUtils");
92 92
     };
93 93
 
94 94
     fluid.testUtils.verifyBasicButtonFunctions = function (buttonEl, name, tooltipReleased, tooltipPressed, stylePressed) {
95  
-        jqUnit.expect(12);
  95
+        jqUnit.expect(13);
96 96
         jqUnit.assertEquals("There should be exactly one " + name + " button", 1, buttonEl.length);
97 97
         jqUnit.assertEquals(name + " button should have role of 'button'", "button", buttonEl.attr("role"));
98 98
         jqUnit.assertEquals(name + " button should have aria-pressed of 'false' initially", "false", buttonEl.attr("aria-pressed"));
99 99
         jqUnit.assertFalse(name + " button should not have the 'pressed' style", buttonEl.hasClass(stylePressed));
  100
+        jqUnit.assertEquals(name + " button should have correct label", tooltipReleased, $("span", buttonEl).text());
100 101
 
101 102
         var tooltip = fluid.testUtils.getTooltipCheckString(buttonEl, tooltipReleased);
102 103
         var tooltipID = buttonEl.attr("aria-describedby");
50  tests/js/ToggleButtonTests.js
@@ -34,15 +34,15 @@ fluid.registerNamespace("fluid.tests");
34 34
                 button: ".test-toggle-button"
35 35
             }
36 36
         };
37  
-        fluid.tests.initToggleButton = function (testOpts) {
  37
+        fluid.tests.initToggleButton = function (container, testOpts) {
38 38
             var opts = fluid.copy(baseToggleButtonOpts);
39 39
             $.extend(true, opts, testOpts);
40  
-            return fluid.toggleButton("#basic-toggle-button-test", opts);
  40
+            return fluid.toggleButton(container, opts);
41 41
         };
42 42
 
43 43
         toggleButtonTests.asyncTest("State change", function () {
44 44
             jqUnit.expect(3);
45  
-            var testComponent = fluid.tests.initToggleButton({
  45
+            var testComponent = fluid.tests.initToggleButton("#basic-toggle-button-test", {
46 46
                 listeners: {
47 47
                     onReady: function (that) {
48 48
                         jqUnit.assertEquals("Initial state should be 'false'", false, that.readIndirect("modelPath"));
@@ -59,7 +59,7 @@ fluid.registerNamespace("fluid.tests");
59 59
 
60 60
         toggleButtonTests.asyncTest("onPress event", function () {
61 61
             jqUnit.expect(1);
62  
-            var testComponent = fluid.tests.initToggleButton({
  62
+            var testComponent = fluid.tests.initToggleButton("#basic-toggle-button-test", {
63 63
                 listeners: {
64 64
                     onReady: function (that) {
65 65
                         var toggleButton = that.locate("button");
@@ -76,7 +76,7 @@ fluid.registerNamespace("fluid.tests");
76 76
         toggleButtonTests.asyncTest("Press", function () {
77 77
             jqUnit.expect(3);
78 78
             var testComponent;
79  
-            testComponent = fluid.tests.initToggleButton({
  79
+            testComponent = fluid.tests.initToggleButton("#basic-toggle-button-test", {
80 80
                 listeners: {
81 81
                     onReady: function (that) {
82 82
                         jqUnit.assertEquals("Initial state should be 'false'", false, that.readIndirect("modelPath"));
@@ -92,7 +92,7 @@ fluid.registerNamespace("fluid.tests");
92 92
         });
93 93
 
94 94
         toggleButtonTests.asyncTest("Default integrated functionality", function () {
95  
-            var testComponent = fluid.tests.initToggleButton({
  95
+            var testComponent = fluid.tests.initToggleButton("#basic-toggle-button-test", {
96 96
                 listeners: {
97 97
                     onPress: fluid.tests.onPressEventHandler,
98 98
                     onReady: function (that) {
@@ -115,7 +115,7 @@ fluid.registerNamespace("fluid.tests");
115 115
                 press: "press me",
116 116
                 release: "release me"
117 117
             };
118  
-            var testComponent = fluid.tests.initToggleButton({
  118
+            var testComponent = fluid.tests.initToggleButton("#basic-toggle-button-test", {
119 119
                 strings: testStrings,
120 120
                 listeners: {
121 121
                     onReady: function (that) {
@@ -142,7 +142,7 @@ fluid.registerNamespace("fluid.tests");
142 142
                     press: "press me",
143 143
                     release: "release me"
144 144
                 },
145  
-                testComponent = fluid.tests.initToggleButton({
  145
+                testComponent = fluid.tests.initToggleButton("#basic-toggle-button-test", {
146 146
                     invokers: {
147 147
                         tooltipContentFunction: {
148 148
                             funcName: "fluid.tests.tooltipContentFunction"
@@ -159,5 +159,39 @@ fluid.registerNamespace("fluid.tests");
159 159
                 });
160 160
         });
161 161
 
  162
+        toggleButtonTests.asyncTest("Label text", function () {
  163
+            jqUnit.expect(2);
  164
+            testComponent = fluid.tests.initToggleButton("#basic-toggle-button-test", {
  165
+                listeners: {
  166
+                    onReady: function (that) {
  167
+                        jqUnit.assertEquals("Content should contain press label text", that.options.strings.press, that.locate("label").text());
  168
+                        that.locate("button").click();
  169
+                    },
  170
+                    onPress: function (that) {
  171
+                        jqUnit.assertEquals("Content should contain release label text", that.options.strings.release, that.locate("label").text());
  172
+                        start();
  173
+                    }
  174
+                }
  175
+            });
  176
+        });
  177
+
  178
+        toggleButtonTests.asyncTest("Label text: custom selector", function () {
  179
+            jqUnit.expect(2);
  180
+            testComponent = fluid.tests.initToggleButton("#custom-selector-test", {
  181
+                selectors: {
  182
+                    label: ".special-selector"
  183
+                },
  184
+                listeners: {
  185
+                    onReady: function (that) {
  186
+                        jqUnit.assertEquals("Content should contain press label text", that.options.strings.press, that.locate("label").text());
  187
+                        that.locate("button").click();
  188
+                    },
  189
+                    onPress: function (that) {
  190
+                        jqUnit.assertEquals("Content should contain release label text", that.options.strings.release, that.locate("label").text());
  191
+                        start();
  192
+                    }
  193
+                }
  194
+            });
  195
+        });
162 196
     });
163 197
 })(jQuery);
2  tests/js/VideoPlayerTests.js
@@ -135,7 +135,7 @@ https://github.com/fluid-project/infusion/raw/master/Infusion-LICENSE.txt
135 135
 
136 136
         var testVideoLabel = function (vp, expectedLabel) {
137 137
             jqUnit.expect(1);
138  
-            jqUnit.assertEquals("aria-label should be set properly", vp.options.strings.videoTitlePreface + expectedLabel, vp.locate("video").attr("aria-label"));
  138
+            jqUnit.assertEquals("aria-label should be set properly", vp.options.strings.videoTitlePreface + expectedLabel, vp.locate("videoContainer").attr("aria-label"));
139 139
         };
140 140
 
141 141
         videoPlayerTests.asyncTest("Video label: default", function () {

0 notes on commit 1eb6498

Please sign in to comment.
Something went wrong with that request. Please try again.