Blink: Intent to Ship: Focusgroup

Open UI has been working on speccing out the focusgroup attribute: a declarative way to support roving focus & add keyboard nav to composite widgets like toolbars/menus

We'd love your feedback!

Learn more & see open questions: developer.chrome.com/blog/focusgr...

H/t to Edge folks for prototyping

Blink: Intent to Experiment: Focusgroup

Exciting! Request for developer feedback: focusgroup HTML attribute "a proposed declarative way to add keyboard arrow-key navigation to composite widgets such as toolbars, tablists, menus, listboxes, etc. Replaces hundreds of lines of JavaScript boilerplate." developer.chrome.com/blog/focusgr...

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

On the upcoming Focus Group Podcast we’re planning to answer some listener questions…so send us anything that’s on your mind about our methodology, or about analysis that you want to hear more about on the show!

Email ‘em to focusgroup@thebulwark.com.

View transitions, anchor positioning, ​@scope, focusgroup, invokers, popovers, container queries, grid, relative colors, style-able selects, and more.

The web feels like it’s getting so good at exactly the moment our collective worst practices are getting calcified as the default.

Oh! Chrome 150 supports the `focusgroup` attribute!

developer.chrome.com/blog/new-in-...

Stop writing boilerplate JS for accessible menus. We’re proposing a new HTML primitive: focusgroup. It brings native keyboard arrow-key navigation directly to the platform.

Tell us what you think → goo.gle/4uvFIkz 🧵(1/3)

Excellent stuff! I'didn't know about focusgroup and reading-flow. Brave new world!
Thanx for your great (as always) talk!

Omigosh, the abandoned `focusgroup` attribute proposal is revived and improved!

developer.chrome.com/blog/focusgr...

I'm *so excited* for this, it's a common and super useful behavior that is *absolute trash garbage* to implement yourself. *Plus* it gives you some common ARIA mappings for free!

Initial prototype of a `<toolbar>` element is coming along. Largely piggybacks off the focusgroup code so it's actually quite simple to do.

Lots to discuss and tweak before it's finished but got to start somewhere.

focusgroup has shipped in chromium 150!
developer.chrome.com/blog/new-in-...

Its been a long time coming, glad to have been able to get this out the door!

Also note that there polyfill ready to go: www.npmjs.com/package/@mic...

open-ui.org/components/foc…
we need this :(

Playing with `focusgroup` support in Chrome 150 and I like seeing the browser assign role based on the `focusgroup` token.

Yes, you can override with explicit `role`, which will undoubtedly happen as devs choose kbd patterns that don’t match the role.

But still neat.

codepen.io/aardrian/pen...

Making keyboard navigation effortless. Introducing focusgroup.

Focusgroup is a new HTML attribute, with early support in Edge, Chrome, and other Chromium-based browsers, that completely handles arrow key navigation within complex widgets. No JS needed!

➡️ blogs.windows.com/msedgedev/20...

Interop brain storm:

margin-trim
reference target
focusgroup
CSS functions + if()
customized built-ins (as is tradition)
…