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

There is arrow focusing with radio button groups, and SELECT OPTIONs.  In the same way that ‘tab-index:0’ could bring tab focusing to any element, I’d like to bring that arrow focusing behavior of radio buttons to any element. 

For component-like things, like menus, the recommended behavior is that there should be only one tab stop, and that arrow keys move the focus within the component. Currently this involves a lot of keystroke trapping and a technique called roaving focus (or roaming focus) to accomplish, using a lot of JavaScript. 

I am suggesting a simpler CSS method, where it could look something more like this:
```
[role=menu] {
    arrow-group:isolate 
    /* so arrowing does not take you from inside the menu to outside the menu, and arrow-index on the menu’s descendants only affects the arrowing order of those descendants and not other elements  */
}
[role=menuitem] {
    tab-index: none;
    arrow-index:0;
}
[role=menu]:not(:has-focus) >[role=menuitem]:first-child {
    tab-index: 0;
}
```
And that would mostly take care of tabbing in and out of a menu, and arrowing to the menu items. It would be so much simpler than the ways we have to deal with things like this now for keyboard access. 

-- 
GitHub Notification of comment by bradkemper
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/1762#issuecomment-340233472 using your GitHub account

Received on Sunday, 29 October 2017 02:44:57 UTC