1327207 - (a11y) accessibility of video controls is super bad

Status: NEW

(Toolkit :: Video/Audio Controls, defect)

Description

[arni2033]

>>>   My Info:   Win7_64, Nightly 53, 32bit, ID 20161119030204 (2016-11-19)
{1} Controls disappear for keyboard users - STR_1, STR_2, STR_3
{2} Workaround for {1} doesn't work       - STR_4
{3} Visual styling of focusring is bad    - STR_5, STR_6, STR_7
{4} If you weren't even trying to make it accessible, elements in video controls shouldn't be
    focusable in order to prevent other bugs that are caused by said focusable elements.

>>>
STR_1:
1. Open https://www.iandevlin.com/html5test/webvtt/html5-video-webvtt-sample.html
2. Focus the video via Tab key, press Spacebar to play the video
3. Press Shift+F10, select "Mute"

AR:  Controls disappear
ER:  Controls should stay visible


STR_2:
1. Open url  data:text/html,<video src="https://www.iandevlin.com/html5test/webvtt/v/upc-tobymanley.theora.ogg" autoplay>
2. Focus the video via Tab key
3. Press Shift+F10, select "Show controls"

AR:  Controls are invisible
ER:  Either X or Y
 X) Controls should be visible
 Y) There should be an easy way to make them visible


STR_3:  (unconfirmed)
1. Open https://www.iandevlin.com/html5test/webvtt/html5-video-webvtt-sample.html
2. Focus the video via Tab key, press Spacebar to play the video
3. Hover mouse over the video, then wait 3 seconds (or move mouse away)  [mouse can move occasionally]
4. Press Tab key

AR:  The next focusable element after <video> is focused
ER:  Either X or Y
 X) The first focusable element inside video controls should be focused
 Y) There should be a reliable way for user relying on keyboard to display controls (unlike STR_4)



STR_4:
1. Perform any of STR_1, STR_2, STR_3 to "accidentally" hide controls
2. Press Up/Down key to change volume   [video controls appear!]
3. Press Tab key several times to focus closed captions button

AR:  Video controls hide during Step 3, so Tab key cycles through focusable elements after <video>
ER:  Video controls shouldn't hide if I just focused element inside video controls



STR_5:
1. Open https://www.iandevlin.com/html5test/webvtt/html5-video-webvtt-sample.html , play the video
2. Focus closed captions button via Tab key

AR:  Focusring is black-on-black
ER:  Focusring should be more noticeable


STR_6:
1. Open https://www.iandevlin.com/html5test/webvtt/html5-video-webvtt-sample.html , play the video
2. Focus timeline via Tab key

AR:  No focusring displayed
ER:  Either X or Y
 X) It should be obvious for user that timeline is focused
 Y) Timeline shouldn't be a focusable element


STR_7:
1. Open https://www.iandevlin.com/html5test/webvtt/html5-video-webvtt-sample.html , play the video
2. Focus closed captions button via Tab key, press Enter
3. Press Tab key 3 times to focus option "English" in menu opened in Step 2

AR:  No focusring
ER:  Focusring should be displayed

Comment 1

[James Teh [:Jamie]]

This should be a lot better with the fixes in bug 494175. I'm not sure whether any of the issues here still apply, though.