Feature request: tabs (using proper HTML roles)

[ouvreboite]

👋 First of all, very nice work on this lib.

I'm looking at several "semantic" CSS libraries (picoCSS, beerCSS, ...) at the moment and I'm really enjoying using them. Especially how they implicitly guide you into writting more accessible code.

One feature I would be interested in is a broader support of HTML roles and ARIA attributes that allow to describe more complex components, while making sure they are accessible.

For example, the "tabs". Using the right roles and ARIA attributes, it's possible to describe them semantically.

<menu role="tablist">
    <button role="tab" aria-controls="tab1" aria-selected="true">Tab 1</button>
    <button role="tab" aria-controls="tab2">Tab 2</button>
    <button role="tab" aria-controls="tab3">Tab 3</button>
</menu>
<div role="tabpanel" id="tab1" aria-selected="true">Tab 1 content</div>
<div role="tabpanel" id="tab2">Tab 2 content</div>
<div role="tabpanel" id="tab3">Tab 3 content</div>

1. matcha could add some additional CSS styles to support that (ex: making non-selected tabpanel to display: none, and adding athe background color of the selected tab).
2. matcha could provide an optional JS lib make the tab (or other advanced usecaes) actually works, following accessibility best-pratices.

I know matcha currently does not provide any JS lib and it may be against the initial goal of the library, but supporting those roles seems a good way to both add a very useful features and also push accessibility best-practices.

Proof-of-concept: link

[lowlighter]

That's actually a really good idea !

I confess I'm not too familliar with aria attribute for now, but I think it might also be a better way to handle states .

Currently matcha create relies on class like .selected or .disabled for some styling (like <menu>), but it has the downside of "polluting" the global scope. Since these are standardized attributes it'll rely on native standards and also help sensibilize to accessibility like you mentioned