Consider: Settings Table Component?

[jpdevries]

I've been working on what I'm calling an "Accessible Settings Table". I'm wondering if the jQuery dependency were stripped if this pattern might make sense as a "Frendly Component".

It's a fairly simple concept. You have a table grid of different "settings". Each row is a setting. There is a corresponding form to update each setting. Whenever a row receives focus the associated settings form appears below. Of course on .no-js the component is "expanded" and everything is accessible.

This concept came from re-imagining a similar experience that used Right Click > Update Setting to open a JavaScript modal window.

I really like how you can tab through the whole thing. Combined with some bypasslinks that could be really nice.

Demo and explanation in this pen:
http://codepen.io/jpdevries/pen/BKXbXg

[adamduncan]

Thanks for the write-up @jpdevries. It's an interesting pattern! Feels somewhere between an accordion and description list. Trawling the APG Design Patterns to try to place it.

I wonder how much could be separated into the "shell" mechanic (accordion headers and panels), and "content" (the form content within panels). The relationship between values and form responses is something that may be extended from existing components, but the updating of values may create the need for aria-live attributes, or similar. What do you think?

[jpdevries]

@adamduncan that is a really good question. I would have to think more on how much things could be separated. I know it still needs a sprinkle of ARIA roles and such, but I really like the concept of using colspan to create these "anti modals" for each row.

I'm doing something very similar in the Mange Users Lab here
https://github.com/jpdevries/matboard#labs