Interactions for VideoPlayer captions button and menu

[Cheetham, Anastasia]

I met with James this morning to go over the desired interactions for the VideoPlayer captions button and menu. Here is a summary of our discussion.

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 show
- the visual styling of the button will change to reflect the fact that the menu is visible
  - the "menu is visible" style is not the same as the hover style

The menu will hide when any one of the following happens:
- the user clicks on the CC button again
- the user clicks on a language in the menu
- the user clicks elsewhere in the interface

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.


Implications for implementation
-------------------------------

This is sounding more and more like a drop-down (especially the mouse interactions), with a few differences, including:

- by default, the appearance of the collapsed drop-down is the currently selected item (we want the CC button)
- by default, pressing enter does not show the drop-down, as we'd like to have happen
- by default, hovering does not leave behind any styling on the most-recently-selected item, which we want

I imagine that some of these are easily overcome, and I suspect our implementation will be much simpler if we can use a drop-down. I'll investigate the specifics of what's involved in addressing the differences, including possible jQuery plugins.


Please weigh in with any thoughts or suggestions!

-- 
Anastasia Cheetham     Inclusive Design Research Centre
acheetham at ocadu.ca           Inclusive Design Institute
                                        OCAD University