westbrookMar 4

Here I am thinking about `:focus-visible-within`...as one does. And wondering, if #CSSWG doesn't think there's a valid path forward on their end, would it make sense to add a `focusVisible` property to `FocusEvent` (or more specifically the `focusin` event, is scoping were beneficial): https://github.com/w3c/csswg-drafts/issues/3080#issuecomment-3999919565 🤔

What do you think? Maybe I'm the crazy one... 🤣

#webdev #js #developingDesignSystems

Do we need :focus-visible-within ? · Issue #3080 · w3c/csswg-drafts

While looking to close out w3ctag/design-reviews#233, one other thought occurred to me: Is there a need for :focus-visible-within to complement :focus, :focus-within, and :focus-visible? In particu...

GitHub
Show threadNoah LiebmanMar 4
@westbrook Unless I’m misunderstanding what you’re trying to do, isn’t this possible with `e.currentTarget.matches(":scope:has(:focus-visible)")` https://codepen.io/noleli/pen/EagPBew
:has(:focus-visible) in event handler

...

Show threadwestbrook

@noleli Yes, _and_ I also want support for https://codepen.io/Westbrook/pen/wBzMVKM. Hence the use for `focusin`, as least in light of difficulties on the CSS side.

🥲

:has(:focus-visible) in event handler

...

Mar 4 at 9:28pmWeb
Show threadNoah LiebmanMar 4
@westbrook Ah interesting, so the problem is that :has() doesn’t traverse shadow boundaries? Is it totally off base to think that it could be framed as a focus delegation issue? Like, if a shadow root delegates focus and the thing inside is focused I want the host to consider itself to have focus (within) from the perspective of the light dom.
Show threadwestbrookMar 4

@noleli I'd much rather it be more complex than that...

`div:focus-within` "pierces" through all depths of the DOM but is agnostic to the accessible context with which the user is interacting with the page. I'm looking for it's soul mate in visible focus.

Show threadNoah LiebmanMar 5
@westbrook hmm, that does make sense. I like the language, too: `within` is somehow more evocative of something inside, no matter how. `has` is more “I have this in the tree that I have visibility into.”