[csswg-drafts] Arrow-index property [css4-ui]

bradkemper has just created a new issue for https://github.com/w3c/csswg-drafts:

== Arrow-index property [css4-ui] ==
https://www.w3.org/TR/css-ui-4/

I think that besides a tab-index property, we should have an arrow-index property. 

When designing component-like things, or when trying to make things such as menus or fake SELECTs behave more like native elements for keyboard users, a recommended technique is to use a roving tabindex. The purpose of it is so that there will be only one tab stop for the component when someone is tabbing through the document, but arrow keys can be used to focus the various sub-elements of the component. But that requires some often complex JavaScript. 

So, if we had a `tab-index` property in CSS (or `tab-next` or whatever) to determine what can be focused via the tab key, and in what order, it would be nice to have a separate property to set what can be focused via arrow keys, and in what order. So, for most elements, the initial value would be `arrow-index:-1` (meaning that users cannot change focus via the arrow keys), but we might need something like 'arrow-index:auto', to account for the way arrow keys can change the focus among radio buttons with the same name. `arrow-index:0` (or any positive number) would enable the element to be accessed via arrow keys. Another property on an ancestor or on one thing that selected several elements at once, could isolate the arrow keys to only focus within a certain context. For instance, `div.menu { arrow-group: isolate} div.menu a { arrow-index:0 }` would mean that you could use the arrow keys to change focus between the anchors within the menu, but could not arrow to something outside of that menu (even if it was another menu with the same class).

Also, though I'm not sure it is necessary, it might be good to have two properties: `arrow-index-x` and `arrow-index-y`, so that authors can turn on/off arrow focusing independently for each direction. 

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/1762 using your GitHub account

Received on Monday, 28 August 2017 17:26:32 UTC