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

Well… there’s an early experimental implementation of the grid behavior for tables. So this uses an html table!!!

Well done! In Chrome I get an error when I use the “grid” behavior. What behavior is this?

I'm guessing it's maybe behind a separate flag so it's not exposed under experimental web platform features?

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?