Skip to content
Permalink
Browse files
AX: media controls accessibility needs more work
https://bugs.webkit.org/show_bug.cgi?id=123749

Patch by James Craig <jcraig@apple.com> on 2013-11-05
Reviewed by Jer Noble.

Updated some of the control labels/roles to improve accessibility.
  - Volume slider is now keyboard/screenreader accessible.
  - muteButton was a checkbox toggling checked state, now a button that toggles label "mute/unmute"
  - fullscreenButton was a checkbox toggling checked state, now a button that toggles label "display/exit full screen"
  - captionButton was a checkbox, now a popup button that launches the newly accessible menu.
Subtitles menu is now keyboard/screenreader accessible (uses roaming tabindex).
Render dump expectations changed because volume slider is now hidden via...
...opacity/size (to make accessible without hover) instead of display:none.

Updated existing test coverage.

Source/WebCore:

* Modules/mediacontrols/mediaControlsApple.css:
(audio::-webkit-media-controls-panel .volume-box):
(audio::-webkit-media-controls-panel .volume-box:active):
(audio::-webkit-media-controls-toggle-closed-captions-button):
(audio::-webkit-media-controls-closed-captions-container .list):
(audio::-webkit-media-controls-closed-captions-container li:focus):
* Modules/mediacontrols/mediaControlsApple.js:
(Controller.prototype.createControls):
(Controller.prototype.handleFullscreenChange):
(Controller.prototype.handleMuteButtonClicked):
(Controller.prototype.handleMinButtonClicked):
(Controller.prototype.handleMaxButtonClicked):
(Controller.prototype.handleVolumeSliderChange):
(Controller.prototype.buildCaptionMenu):
(Controller.prototype.focusSiblingCaptionItem):
(Controller.prototype.handleCaptionItemKeyUp):

LayoutTests:

* platform/mac/accessibility/media-element-expected.txt:
* platform/mac/media/audio-controls-rendering-expected.txt:
* platform/mac/media/controls-after-reload-expected.txt:
* platform/mac/media/controls-strict-expected.txt:
* platform/mac/media/controls-styling-strict-expected.txt:
* platform/mac/media/controls-without-preload-expected.txt:

Canonical link: https://commits.webkit.org/142040@main
git-svn-id: https://svn.webkit.org/repository/webkit/trunk@158713 268f45cc-cd09-0410-ab3c-d52691b4dbfc
  • Loading branch information
cookiecrook authored and webkit-commit-queue committed Nov 6, 2013
1 parent 67ac57e commit dc7a94fb2bef64cfb9e942a6328826017ab04afd
@@ -1,3 +1,28 @@
2013-11-05 James Craig <jcraig@apple.com>

AX: media controls accessibility needs more work
https://bugs.webkit.org/show_bug.cgi?id=123749

Reviewed by Jer Noble.

Updated some of the control labels/roles to improve accessibility.
- Volume slider is now keyboard/screenreader accessible.
- muteButton was a checkbox toggling checked state, now a button that toggles label "mute/unmute"
- fullscreenButton was a checkbox toggling checked state, now a button that toggles label "display/exit full screen"
- captionButton was a checkbox, now a popup button that launches the newly accessible menu.
Subtitles menu is now keyboard/screenreader accessible (uses roaming tabindex).
Render dump expectations changed because volume slider is now hidden via...
...opacity/size (to make accessible without hover) instead of display:none.

Updated existing test coverage.

* platform/mac/accessibility/media-element-expected.txt:
* platform/mac/media/audio-controls-rendering-expected.txt:
* platform/mac/media/controls-after-reload-expected.txt:
* platform/mac/media/controls-strict-expected.txt:
* platform/mac/media/controls-styling-strict-expected.txt:
* platform/mac/media/controls-without-preload-expected.txt:

2013-11-05 Ryosuke Niwa <rniwa@webkit.org>

Add a test to obtain offsetWidth of expanded table cell
@@ -54,12 +54,20 @@ State at 'canplaythrough' event:
role: AXRole: AXStaticText


description: AXDescription: Volume
role: AXRole: AXSlider


description: AXDescription:
role: AXRole: AXValueIndicator


description: AXDescription: Mute
role: AXRole: AXCheckBox
role: AXRole: AXButton


description: AXDescription: Display Full Screen
role: AXRole: AXCheckBox
role: AXRole: AXButton



@@ -43,6 +43,13 @@ layer at (104,51) size 6x6
RenderBlock {DIV} at (0,0) size 6x6 [bgcolor=#FFFFFF]
layer at (184,44) size 22x22
RenderFlexibleBox {DIV} at (176,2) size 22x22
layer at (184,44) size 2x22
RenderFlexibleBox {DIV} at (0,0) size 2x22 [border: (1px solid #000000F3)]
RenderSlider {INPUT} at (-7,6) size 2x10 [color=#909090] [border: (1px solid #000000DF)]
RenderFlexibleBox {DIV} at (1,1) size 0x8
RenderBlock {DIV} at (0,0) size 0x8
layer at (170,51) size 8x8
RenderBlock {DIV} at (-8,0) size 8x8
layer at (187,47) size 16x16
RenderButton {BUTTON} at (3,3) size 16x16 [color=#FFFFFF]
layer at (8,85) size 320x25
@@ -74,6 +81,13 @@ layer at (104,94) size 6x6
RenderBlock {DIV} at (0,0) size 6x6 [bgcolor=#FFFFFF]
layer at (304,87) size 22x22
RenderFlexibleBox {DIV} at (296,2) size 22x22
layer at (304,87) size 2x22
RenderFlexibleBox {DIV} at (0,0) size 2x22 [border: (1px solid #000000F3)]
RenderSlider {INPUT} at (-7,6) size 2x10 [color=#909090] [border: (1px solid #000000DF)]
RenderFlexibleBox {DIV} at (1,1) size 0x8
RenderBlock {DIV} at (0,0) size 0x8
layer at (290,94) size 8x8
RenderBlock {DIV} at (-8,0) size 8x8
layer at (307,90) size 16x16
RenderButton {BUTTON} at (3,3) size 16x16 [color=#FFFFFF]
layer at (8,128) size 320x100
@@ -107,5 +121,12 @@ layer at (104,212) size 6x6
RenderBlock {DIV} at (0,0) size 6x6 [bgcolor=#FFFFFF]
layer at (304,205) size 22x22
RenderFlexibleBox {DIV} at (296,2) size 22x22
layer at (304,205) size 2x22
RenderFlexibleBox {DIV} at (0,0) size 2x22 [border: (1px solid #000000F3)]
RenderSlider {INPUT} at (-7,6) size 2x10 [color=#909090] [border: (1px solid #000000DF)]
RenderFlexibleBox {DIV} at (1,1) size 0x8
RenderBlock {DIV} at (0,0) size 0x8
layer at (290,212) size 8x8
RenderBlock {DIV} at (-8,0) size 8x8
layer at (307,208) size 16x16
RenderButton {BUTTON} at (3,3) size 16x16 [color=#FFFFFF]
@@ -39,6 +39,13 @@ layer at (104,266) size 6x6
RenderBlock {DIV} at (0,0) size 6x6 [bgcolor=#FFFFFF]
layer at (274,259) size 22x22
RenderFlexibleBox {DIV} at (266,2) size 22x22
layer at (274,259) size 2x22
RenderFlexibleBox {DIV} at (0,0) size 2x22 [border: (1px solid #000000F3)]
RenderSlider {INPUT} at (-7,6) size 2x10 [color=#909090] [border: (1px solid #000000DF)]
RenderFlexibleBox {DIV} at (1,1) size 0x8
RenderBlock {DIV} at (0,0) size 0x8
layer at (260,266) size 8x8
RenderBlock {DIV} at (-8,0) size 8x8
layer at (277,262) size 16x16
RenderButton {BUTTON} at (3,3) size 16x16 [color=#FFFFFF]
layer at (305,262) size 16x16
@@ -39,6 +39,13 @@ layer at (104,274) size 6x6
RenderBlock {DIV} at (0,0) size 6x6 [bgcolor=#FFFFFF]
layer at (274,267) size 22x22
RenderFlexibleBox {DIV} at (266,2) size 22x22
layer at (274,267) size 2x22
RenderFlexibleBox {DIV} at (0,0) size 2x22 [border: (1px solid #000000F3)]
RenderSlider {INPUT} at (-7,6) size 2x10 [color=#909090] [border: (1px solid #000000DF)]
RenderFlexibleBox {DIV} at (1,1) size 0x8
RenderBlock {DIV} at (0,0) size 0x8
layer at (260,274) size 8x8
RenderBlock {DIV} at (-8,0) size 8x8
layer at (277,270) size 16x16
RenderButton {BUTTON} at (3,3) size 16x16 [color=#FFFFFF]
layer at (305,270) size 16x16
@@ -43,6 +43,13 @@ layer at (104,274) size 6x6
RenderBlock {DIV} at (0,0) size 6x6 [bgcolor=#FFFFFF]
layer at (274,267) size 22x22
RenderFlexibleBox {DIV} at (266,2) size 22x22
layer at (274,267) size 2x22
RenderFlexibleBox {DIV} at (0,0) size 2x22 [border: (1px solid #000000F3)]
RenderSlider {INPUT} at (-7,6) size 2x10 [color=#909090] [border: (1px solid #000000DF)]
RenderFlexibleBox {DIV} at (1,1) size 0x8
RenderBlock {DIV} at (0,0) size 0x8
layer at (260,274) size 8x8
RenderBlock {DIV} at (-8,0) size 8x8
layer at (277,270) size 16x16
RenderButton {BUTTON} at (3,3) size 16x16 [color=#FFFFFF]
layer at (305,270) size 16x16
@@ -76,6 +83,13 @@ layer at (428,274) size 6x6
RenderBlock {DIV} at (0,0) size 6x6 [bgcolor=#FFFFFF]
layer at (598,267) size 22x22
RenderFlexibleBox {DIV} at (266,2) size 22x22
layer at (598,267) size 2x22
RenderFlexibleBox {DIV} at (0,0) size 2x22 [border: (1px solid #000000F3)]
RenderSlider {INPUT} at (-7,6) size 2x10 [color=#909090] [border: (1px solid #000000DF)]
RenderFlexibleBox {DIV} at (1,1) size 0x8
RenderBlock {DIV} at (0,0) size 0x8
layer at (584,274) size 8x8
RenderBlock {DIV} at (-8,0) size 8x8
layer at (601,270) size 16x16
RenderButton {BUTTON} at (3,3) size 16x16 [color=#FFFFFF]
layer at (629,270) size 16x16
@@ -39,6 +39,13 @@ layer at (104,266) size 6x6
RenderBlock {DIV} at (0,0) size 6x6 [bgcolor=#FFFFFF]
layer at (274,259) size 22x22
RenderFlexibleBox {DIV} at (266,2) size 22x22
layer at (274,259) size 2x22
RenderFlexibleBox {DIV} at (0,0) size 2x22 [border: (1px solid #000000F3)]
RenderSlider {INPUT} at (-7,6) size 2x10 [color=#909090] [border: (1px solid #000000DF)]
RenderFlexibleBox {DIV} at (1,1) size 0x8
RenderBlock {DIV} at (0,0) size 0x8
layer at (260,266) size 8x8
RenderBlock {DIV} at (-8,0) size 8x8
layer at (277,262) size 16x16
RenderButton {BUTTON} at (3,3) size 16x16 [color=#FFFFFF]
layer at (305,262) size 16x16
@@ -1,3 +1,38 @@
2013-11-05 James Craig <jcraig@apple.com>

AX: media controls accessibility needs more work
https://bugs.webkit.org/show_bug.cgi?id=123749

Reviewed by Jer Noble.

Updated some of the control labels/roles to improve accessibility.
- Volume slider is now keyboard/screenreader accessible.
- muteButton was a checkbox toggling checked state, now a button that toggles label "mute/unmute"
- fullscreenButton was a checkbox toggling checked state, now a button that toggles label "display/exit full screen"
- captionButton was a checkbox, now a popup button that launches the newly accessible menu.
Subtitles menu is now keyboard/screenreader accessible (uses roaming tabindex).
Render dump expectations changed because volume slider is now hidden via...
...opacity/size (to make accessible without hover) instead of display:none.

Updated existing test coverage.

* Modules/mediacontrols/mediaControlsApple.css:
(audio::-webkit-media-controls-panel .volume-box):
(audio::-webkit-media-controls-panel .volume-box:active):
(audio::-webkit-media-controls-toggle-closed-captions-button):
(audio::-webkit-media-controls-closed-captions-container .list):
(audio::-webkit-media-controls-closed-captions-container li:focus):
* Modules/mediacontrols/mediaControlsApple.js:
(Controller.prototype.createControls):
(Controller.prototype.handleFullscreenChange):
(Controller.prototype.handleMuteButtonClicked):
(Controller.prototype.handleMinButtonClicked):
(Controller.prototype.handleMaxButtonClicked):
(Controller.prototype.handleVolumeSliderChange):
(Controller.prototype.buildCaptionMenu):
(Controller.prototype.focusSiblingCaptionItem):
(Controller.prototype.handleCaptionItemKeyUp):

2013-11-05 Andreas Kling <akling@apple.com>

Move some plugin-specific code from RenderWidget to RenderEmbeddedObject.
@@ -172,7 +172,6 @@ audio::-webkit-media-controls-panel .volume-box {
position: absolute;
box-sizing: border-box;
height: 22px;
width: 114px;
bottom: 0;
left: 0;

@@ -194,17 +193,21 @@ audio::-webkit-media-controls-panel .volume-box {
-webkit-justify-content: flex-end;

opacity: 0;
display: none;
/* make zero width (rather than display:none) for AX and FKA */
width: 0; /* will become 114px when shown */

}

/* FIXME: needs CSS4 !subject selector to show when slider inside .volume-box is focused */
video::-webkit-media-controls-panel .mute-box:hover .volume-box,
video::-webkit-media-controls-panel .volume-box:hover,
video::-webkit-media-controls-panel .volume-box:active,
audio::-webkit-media-controls-panel .mute-box:hover .volume-box,
audio::-webkit-media-controls-panel .volume-box:hover,
audio::-webkit-media-controls-panel .volume-box:active {
opacity: 1;
display: inherit;
/* resize to usable amount (rather than display:none) for AX and FKA */
width: 114px;
}

audio::-webkit-media-controls-volume-slider,
@@ -268,8 +271,8 @@ audio::-webkit-media-controls-toggle-closed-captions-button {
width: 16px;
height: 16px;
margin: 0 7px;

background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 102 105"><linearGradient id="gradient" x2="0" y2="100%" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="rgb(216, 216, 216)"/><stop offset="0.46875" stop-color="rgb(216, 216, 216)"/><stop offset="0.46875" stop-color="rgb(208, 208, 208)"/><stop offset="0.53125" stop-color="rgb(208, 208, 208)"/><stop offset="0.53125" stop-color="rgb(200, 200, 200)"/><stop offset="1" stop-color="rgb(208, 208, 208)"/></linearGradient><path d="M98.766,43.224c0-23.163-21.775-41.94-48.637-41.94c-26.859,0-48.635,18.777-48.635,41.94c0,18.266,13.546,33.796,32.444,39.549c1.131,8.356,26.037,24.255,22.864,19.921c-4.462-6.096-5.159-13.183-5.07-17.566C77.85,84.397,98.766,65.923,98.766,43.224z" fill="url(#gradient)"/></svg>');
outline: 0;
}

video::-webkit-media-controls-closed-captions-container,
@@ -294,7 +297,7 @@ audio::-webkit-media-controls-closed-captions-container {
video::-webkit-media-controls-closed-captions-container .list,
audio::-webkit-media-controls-closed-captions-container .list {
display: block;
font-family: "Helvetica Bold", Helvetica;
font-family: "Helvetica Bold", Helvetica, sans-serif;
font-size: 10pt;
-webkit-user-select: none;
}
@@ -337,6 +340,12 @@ audio::-webkit-media-controls-closed-captions-container li {
border-bottom: 1px solid transparent;
}

video::-webkit-media-controls-closed-captions-container li:focus,
audio::-webkit-media-controls-closed-captions-container li:focus {
outline: 0;
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, rgba(255, 255, 255, 0.3)), color-stop(1, rgba(255, 255, 255, 0.2)));
}

video::-webkit-media-controls-closed-captions-container li:hover,
audio::-webkit-media-controls-closed-captions-container li:hover {
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, rgb(79, 112, 246)), color-stop(1, rgb(26, 68, 243)));

0 comments on commit dc7a94f

Please sign in to comment.