Tabs

[niutech]

Is it possible for you to add pure CSS tabs using ARIA roles e.g.:

<div role="tablist">
    <input type="radio" name="tablist" id="tab-1" role="tab" aria-controls="tabpanel-1" checked><label for="tab-1">Tab 1</label>
    ...
    <div id="tabpanel-1" tabindex="0" role="tabpanel">Lorem ipsum...</div>
    ...
</div>

?

[alvaromontoro]

This is an interesting idea. Let me try different options and see how they do with accessibility. The only issue is that this is a CSS project, so there won't be any JS logic, just styling.

[niutech]

You don't need JS for tabs, see e.g. https://codepen.io/markcaron/pen/MvGRYV

[alvaromontoro]

I need to research the options. I know it is possible without JavaScript (I've done it before in different form and shapes), but the solution with checkboxes presents potential issues:

• it forces a specific HTML structure/order. This is not great for DX; it could be solved using :has(), but :has() is not yet supported by many browsers.
• it misses some important accessibility cases. For example, the keyboard interaction wouldn't be the expected one.
• it may present issues with responsiveness (if there are many tabs and they wrap, they may not look great).

I'm not discarding the tabs at all, I think they will be a great addition to the library (and a possible one), just want to do it in a way that is supported, functional, and accessible. My suggestion of adding styles but not logic (so they look ok but they are not functional), feels like missing the mark.