Post

This demo doesn't use a single line of JS code to respond to the arrow keys. Movement of the player is handled 100% by the upcoming `focusgroup` HTML attribute! Focusgroup was definitely *not* made for this 😅 But, so cool to have this out of the box on the web. More ➡️ open-ui.org/components/s...

See now I'm wondering how you've done this demo... Grid isn't supported yet so how do you move both directions? Either way that's an amazing abuse of this 😂

Was wondering the same! Also, how is the state (eaten or not eaten) done, there's not really a "has tabbed to" state. I noticed they only did one "wrap" (portal) in the video, maybe the path is hardcoded? 🙂 And then "eaten" state could be just "all elements before current focus".

I wish there was a has-ever-been-focused pseudo in CSS. Unfortunately I had to resort to JS for the eaten state.

Isn't there some trick with CSS variables where you can use them as a state toggle?

Hmm, not sure. The thing here is that movement happens with keyboard arrow keys. There’s no clicks. Clicks would be easy, I could select checkboxes or open details elements which world hold the state. I don’t know of a thong that changes state on focus and then preserves it.