Accessible Tabs (control-group focus)

[upsiflu]

Accessible stateless Ui transitions and focus groups

The Link module provides some Ui State transition patterns. As of now, these are all implemented with the a href= Html element. But other input types such as radio, checkbox etc. may be apt to implement some patterns. Good implementations are very rare.

Situation

• We need the element to output a href, which means it must be or
• In some cases, we want the spacebar=toggle interactivity which is known from checkbox and button
• In case we have a bar or column of links, we want the arrow keys to move focus, and the tab key to leave/enter the whole group. This is achieved with aria and manual keydown handling, which feels utterly clunky.

Exploration

(1) What does austinshenk/elm-w3 do in terms of these patterns? (2) Is it more advisable to start with the and work-in the group control (perhaps with a sprinkle of custom-elements), or to start with , , or groupable items and work in the change of url manually, giving up the idea of sharing the transition through right-clicking? (3) The border between Link and Button becoms eerily blurry... (4) How valuable is the grouped focus anyway?

Towards Specification

• [ ] Create an exhaustive list of use cases for Ui transitions that are completely orthogonal to what may be going on in the app model
• [ ] Identify use cases that are definitely standard Ui patterns (as opposed to a web app curator's choice)
• • [ ] (a) Implement as custom-element and keep out of the library (because elm libraries can't have custom-elements)
• • [ ] (b) Implement with event catching (Ui html would therefore have global event and not application event type variable while constructing and would be converted by layout or so)

On grouped keyboard focus: https://developer.mozilla.org/en-US/docs/Web/Accessibility/Keyboard-navigable_JavaScript_widgets

tab, tablist, tabpanel...: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/tab_role