In my previous post, I mentioned that I���ve used the web install API in production. Specifically, I���ve used it on The Session. In order to do that, I had to register for the origin trial.

I���ve just signed up for another origin trial. This time it���s for the proposed focusgroup attribute:

The focusgroup HTML attribute is a proposed declarative way to add keyboard arrow-key navigation to composite widgets such as toolbars, tablists, menus, listboxes, etc. without writing any roving-tabindex JavaScript. One attribute replaces hundreds of lines of boilerplate.

I���ve got an HTML web component on The Session called tab-controls. And yes, there���s a bunch of code in there to listen for keyboard events and respond appropriately. I would very much like to rip that code out.

So now that I���ve opted into the origin trial, I���ve added this to my HTML:

If this focusgroup attribute takes off, I���ll be able to remove the role attribute but for now, it���s very much needed.

In the JavaScript for my tab-controls custom element, I need to be able to detect support for focusgroup. Here���s how I���m doing it:

Here���s the important thing: don���t use getAttribute('focusgroup') to test for browser support. That will return true if the attribute is in the HTML. But the attribute will only get converted into a property if the browser understands it.

Jake has a lot more detail on the differences between attributes and properties.

Anyway, I figured I���d share that little snippet in case you too were interested in trying out the focusgroup proposal using progressive enhancement.