Re: [csswg-drafts] [selectors] `:focusable` pseudo-class (#7269)

@LeaVerou - https://github.com/w3c/csswg-drafts/issues/7269#issuecomment-2117074783
> That's an interesting idea. Whether it's a good path forwards depends on the use cases for targeting focusable elements. Do we have a list of use cases?

I'm working on a focus trap for widgets on a page. The widgets can be arranged by the user and potentially contain many focusable elements so, in order to help the user quickly navigate around widgets, they can tab/arrow key between them and then press the Enter key to "enter" the active widget and then tab between elements inside it. This is similar to how Microsoft's Power BI web application works (which is also not perfect, btw!):

https://github.com/user-attachments/assets/0a6f4e37-f55b-48fb-b1a0-e3463150edc8

Creating such a trap is definitely tricky. I've seen a lot of poor attempts at a `:tabbable` selector but the biggest problem is that some tababble elements cannot even be selected via CSS. For instance, any element with `overflow: scroll` or `overflow: auto` becomes tababble, but no selector exists to target them based on this state. `display: none` is another property that can affect general focusability without any selector.

I've ended up with something much more complex than I would have liked and resorted to having a way for elements to opt-in to the trap with a data attribute instead of creating a fully-generic, self-contained wrapper function (which beats adding intersection observers to every single descendant). I had to come up with a selector that would target most elements. I've possibly missed some edge cases myself that `:tabbable` might have covered.

All this being said, I don't think either `:tabbable` or `:focusable` are viable selectors due to their potential to be affected by layout, [creating infinite loops](https://wiki.csswg.org/faq#selectors-that-depend-on-layout). Consider the following:

```css
button:focusable {
  display: none;
}
```

`display: none` makes the button no longer focusable, which removes the `display: none`, which makes the button focusable, which reapplies the `display: none`, which... you get the idea. `:overflowed-content` was rejected for [the same reason](https://github.com/w3c/csswg-drafts/issues/2011#issuecomment-774190135).




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


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Wednesday, 23 April 2025 12:44:02 UTC