Create Keyboard Controls API

[joe-replin]

Creating a ticket to add an API within CORE by which external plug-ins my access keyboard controls that will function across browsers & screen reader combinations. Some use cases are as follows:

• Matching Dropdown & Comboboxes
• Navigating the resources tablist & corresponding tabpanel
• Slider & Confidence Slider controls Update: native sliders
• Escape keypress

Referencing a conversation with @oliverfoster & @chris-steele: adaptlearning/adapt-contrib-resources#78

[joe-replin]

This has cropped up again in an accessibility review, mainly around the lack of navigable arrow controls present in https://github.com/cgkineo/adapt-visua11y

Nudging this request to see if it is something that is desirable for the larger purposes listed above.

[oliverfoster]

Can you provide more detail on which parts of the visua11y ui need special arrow key behaviour?

[joe-replin]

It would be the readability controls. Here is the feedback I am currently processing.

Keyboard operation of "Readability" radio options is not consistent. The following behavior was observed:

Up arrow consistently cycled focus backwards through all options
Down arrow moved focus forward, but is trapped once focus lands on the "Small" option
Left/right arrow keys do nothing 

To avoid confusion and better align with the default radio button experience we recommend allowing users to move back and forth through a radio grouping using up/right to move forward, and down/left to move backward. Forward/backwards navigation must allow users to consistently cycle through all option within a grouping.

​https://www.w3.org/WAI/ARIA/apg/patterns/radio/

[oliverfoster]

That's a simple behaviour created with the correct markup and not supplemental Javascript for focus and display management (as is required for tab and custom select).

The arrow behavior is facilitated by a role=radiogroup container and a matching name attribute on each input in the group I believe.

See mcq.

We don't have to specify arrow key handlers, they come from the browser by default with the correct markup.