CC button and menu interactions

Mouse interactions

There will be a hover style for the CC button that will override any other styling that might be on the CC button.

When the user clicks on the CC button

The menu will hide when any one of the following happens:

The currently selected item in the menu will have its own style. The menu items will have a hover style different than the 'currently selected' style.

The styling of the CC button will change to reflect whether or not a caption is currently selected. The "captions are on" style is different than the "menu is currently showing" style.

Keyboard interactions

There will be a focus style for the CC button that will be different than the hover style.

Tabbing to the CC button will focus it but not show the menu. Enter or space will show the menu.

Once the menu is showing, arrow keys will move 'focus' within the menu items. This action alone will NOT actually 'activate' an item in the menu.

Items selected with the arrow keys will be styled differently than the currently active selection. James is still deciding whether or not this style will be different than the hover style.

While the menu is showing, enter or space will hide the menu. If the arrow keys had been used to change the selection, the new selection will be activated with the enter or space.

If the user has used the arrow keys to select something but NOT yet pressed enter or space, tabbing away from the CC button will hide the menu WITHOUT activating the selected menu item.


Tab focus order index for video player:

1. Video player container

2. Play/pause button

3. Volume button

4. Closed captioning button

5. Transcript button

6. Full-screen button

Keyboard interactions for Video player container:

- On stop/pause, enter/space plays the video

- On play, enter/space pauses the video

up/down arrows ?

right/left arrows ?

Keyboard interactions for Play/pause button:

- enter/space alternates between play and pause

- up/down arrows do nothing

- right/left arrows ?

Keyboard interactions for Volume button:

- On focus, volume slider appears (focus is on the combined button + slider piece)

enter/space alternates between muting and unmuting the audio

up/down arrows increase/decrease the volume

right/left arrows ?

Keyboard interactions for Closed captioning and Transcript buttons:

- On focus, CC/Transcript menu appears; focus is on the button, not on a menu item

- enter/space on button turns on/off CC/Transcript to default or last activated

- up/down arrows cycles through menu elements; focus is never back on the button

- enter/space on menu item toggles the element (hybrid radio/checkbox interaction: if something else is already activated, then deselect and activate element in question; if element in question is already activated, then deactivate it)

- right/left arrows ?

Keyboard interactions for Full screen button:

enter/space alternates between full screen and windows

up/down arrows do nothing

right/left arrows ?