W3C home > Mailing lists > Public > public-css-archive@w3.org > December 2018

Re: [csswg-drafts] Make things focusable in CSS (#3379)

From: Florian Rivoal via GitHub <sysbot+gh@w3.org>
Date: Mon, 03 Dec 2018 07:47:43 +0000
To: public-css-archive@w3.org
Message-ID: <issue_comment.created-443617793-1543823262-sysbot+gh@w3.org>

Migrated from https://github.com/WICG/spatial-navigation/issues/25#issuecomment-372192743
Originally created by @bradkemper on *Mon, 12 Mar 2018 04:46:58 GMT*

I’m not sure if this is where you want this comment. But what I’ve been trying to get to in some of my other comments, is a way to specify, in CSS, that an element can be tabbed to or arrowed to (previously imagined as `tab-index:0` and `arrow-index:0`). 

Maybe something like `focusable: [tab | arrows | none]`. 

I wasn’t clear from the prose whether `spacial-navigation: active` was supposed to make an element navigable by arrows, or if it was something that applied to an ancestor. But if I was creating a component, like say, something that acted like radio buttons, then I would need to say when something could be tabbed to, and when something could only be arrowed to. So, something like this, I guess:

div.radio-group { spatnav-container: create; }
span.radio-button { focusable: arrows; }
span.radio-button:first-child:not(:has(+ .checked)) { focusable: tab; }
(That last line only works declaratively if :has() is usable on the Web. Otherwise, would have to use JavaScript to track when there are no “checked” classes on the buttons, and set a separate class to indicate that on the radio group parent).

Is there some other way to achieve this using the spec properties?

GitHub Notification of comment by frivoal
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/3379#issuecomment-443617793 using your GitHub account
Received on Monday, 3 December 2018 07:47:44 UTC

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