W3C home > Mailing lists > Public > public-css-archive@w3.org > October 2017

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

From: Brad Kemper via GitHub <sysbot+gh@w3.org>
Date: Sun, 29 Oct 2017 02:44:55 +0000
To: public-css-archive@w3.org
Message-ID: <issue_comment.created-340233472-1509245093-sysbot+gh@w3.org>
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] {
    /* 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;
[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

This archive was generated by hypermail 2.4.0 : Tuesday, 5 July 2022 06:41:19 UTC