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

---

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.checked,
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