A library to implement the logic (and accessibility) of the various HTML roles?

I like using semantic HTML as much as possible, and possibly semantic-ish CSS libraries (PicoCSS, ...). But one thing that I find missing are slightly more complex "interaction components", like tabs or rich tooltips.

Those components don't have explicit HTML elements and no built-in browser support, but they have dedicated HTML roles and ARIA attributes to describe them and their possible states.

For example, we can write fully semantic tabs (role [tablist](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/tablist_role)/tab/tabpanel ...):

<div 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> </div> <div role="tabpanel" id="tab1" aria-current="true">tab1</div> <div role="tabpanel" id="tab2">tab1</div> <div role="tabpanel" id="tab3">tab1</div>

Theorically, one could write a generic JS lib that would handle the click and keyboard interactions without the need for any custom `data-something` attributes:

>Find all "tabs components" by looking for all \[role=tablist\], their direct \[role=tab\] children and follow their aria-controls to find the tabpanels. When one \[role=tab\] is selected (clicked/arrow right/arrow left/...): Remove aria-selected from the others tabs and add it to the selected one. Then remove aria-current from the tabpanels and add it to the one using the corresponding aria-controls.

And styling it semantically seems fairly simple:

* `[role=tab][aria-selected=true]`: make the active tab more visible * `[role=tabpanel]:not([aria-current=true])`: make it "display: none" to hide the panel

It would be similar to some of the "headless" libraries out there, except by using only existing roles/aria and requiring the dev to write accessible HTML markup to make it work.

Does this exist? Is this a stupid idea ?