Design proposal: tabs

[ouvreboite]

A common UI component that is lacking in pico are the "tabs"

Combining the <details> HTML element and the tablist, tab and tabpanel roles should allow to produce usable tabs, using CSS only while keeping a good semantic (no need for a hidden checkbox or JS).

Syntax proposal:

<div role="tablist">
    <details role="tab" name="my-tabs" open>
        <summary>First</summary>
        <div role="tabpanel">
            First tab content
        </div>
    </details>
    <details role="tab" name="my-tabs">
        <summary>Second</summary>
        <div role="tabpanel">
            Second tab content
        </div>
    </details>
</div>

Syntax details

• any block with the tablist role could act as a container (for example a <div> or an <article>)
• it should contains <details> with the tab role
• the <summary> block act as the tab's name and clickable area
• the <details> should contains a content block (<div>, <p>, <form>, ...) with a tabpanel role
  • styling the implicit content of the details is hard, so an explicit content block makes it way simpler
• we can use the <details> built-in interaction:
  • use the same name on of tabs to only open one panel at a time
  • prevent pointer event on the summary of an the openned details's summary, to avoid "closing" the active tab (and only accept picking another one)
  • use open to define which tab is preopenned
  • mark a summary as aria-disabled="true" to disable it
• optionally the summary could have the button role to look like a button. The buttons could then look like the button group

Prototype

https://gistpreview.github.io/?86c08db6793d078757aa795845c19ed3

The styling is a bit rough, especially for the "non button" variant. But I'm mostly focusing on semantics and usability for now.

How it's done

CSS excerpt:

[role="tablist"] {
    /* The tablist act as a flexbox container with wrap */
    display: flex;
    flex-wrap: wrap;
}

[role="tablist"]>details[role="tab"]>summary {
    /* The summaries are before the tabpanels in the flexbox and grow to fill the first line */
    order: 0; 
    flex-grow: 1;
}


[role="tablist"]>details[role="tab"]>[role="tabpanel"] {
    /* The tab panels are after the summaries and take full-width so they are moved to the second line */
    order: 1; 
    width: 100%; 
}

[role="tablist"]>details[role="tab"][open]>summary {
    /** The click events on the active tab summary are disabled to prevent "closing it" and allow only to switch to another tab */
    pointer-events: none; 
}

[ouvreboite]

Looking at the details doc, it seems the only accepted role is "group"

Implicit ARIA role group
Permitted ARIA roles No role permitted

So this solution technically works, but would be against the role definition 😞

[ouvreboite]

Doing it with JS

I tried to make it work in pure CSS. This requires some kind of selectable input, like a checkbox or a radio. So I always end up having a "nasty" HTML.
The opposite direction is have a bit of JS. This gives us more flexibility for the HTML layout while ensuring a good accessibility (and keyboard navigation).

<div role="tablist">
    <button role="tab" aria-controls="tab1" aria-selected="true" autofocus>Tab 1</button>
    <button role="tab" aria-controls="tab2">Tab 2</button>
    <button role="tab" aria-controls="tab3">Tab 3</button>
</div>
<hr /> <!-- if you want an horizontal delimitation -->
<div role="tabpanel" id="tab1">tab1</div>
<div role="tabpanel" id="tab2">tab1</div>
<div role="tabpanel" id="tab3">tab1</div>

As the tabpanels do not need to be inside the tablist, this allow more flexibility: for example you can put the tabs in an article > header while the tabpanels are in the article itself. The tabs could even be under the panels, in the article > footer.

The JS add event listeners on the [role=tab], that react on click and ⬅️ / ➡️:

• it adds aria-selected=true on the tab, and clears it on the other tabs
• it adds aria-current=true on the corresponding tabpanel (via the aria-controls id), and clears it on the other tabpanels
  ⚠️ This would only work on the tabs that are present in the initial DOM. We should use a MutationObserver to ensure the logic is applied on tabs that would be injected via DOM manipulation (basically any frontend framework or even HTMX)

The CSS is mostly about hidding the :not(aria-current=true) tabpanels, plus styling the tabs look like a button group, with the aria-selected=true tab being more pronounced.

[role="tabpanel"]:not([aria-current="true"]) {
    display: none;
}

Prototype

link

[Yohn]

I like this concept and examples a lot, and would love to add it to my fork of Pico CSS.

I'd like to add the CSS only technique for those that don't want to mess with the JavaScript, but have the JavaScript option available for those that don't mind having the JavaScript, even with the mutation observer like you mentioned could be beneficial to some.

[Yohn]

I realized this solution worked in Firefox, but not in the chrome based browsers. There they have the details > div element going to the right side of the summary, and not under all the <summary> tags like it does in firefox 😞