Tabs

Contract

Accessibility

Variants

Links or real tabs are two different cases, and their markup differs. The one chosen is the one that is truthful:

The styling catches both: the library's selector reacts to [aria-current]:not([aria-current="false"]) and to [aria-selected="true"] alike. So the question "which class to put" does not arise — the question that arises is "which markup is truthful".

Real tabs

A role="tablist" is set only if the tabs are real. The role promises a screen reader arrow navigation and a tie to a panel; an unbacked promise is worse than none.

<div class="inst-tabs" role="tablist" aria-label="Properties of the object">
  <button class="inst-tab" type="button" role="tab" id="t-geom"
          aria-selected="true" aria-controls="p-geom" tabindex="0">Geometry</button>
  <button class="inst-tab" type="button" role="tab" id="t-mat"
          aria-selected="false" aria-controls="p-mat" tabindex="-1">Material</button>
  <button class="inst-tab" type="button" role="tab" id="t-phys"
          aria-selected="false" aria-controls="p-phys" tabindex="-1">Physics</button>
</div>
<div id="p-geom" role="tabpanel" aria-labelledby="t-geom" tabindex="0">12 480 vertices, 6 240 polygons.</div>
<div id="p-mat" role="tabpanel" aria-labelledby="t-mat" tabindex="0" hidden>Standard PBR, two textures.</div>
<div id="p-phys" role="tabpanel" aria-labelledby="t-phys" tabindex="0" hidden>A convex hull, a mass of 4.2 kg.</div>

The arrows, Home, End and the roving tabindex are instrument.js's. Showing the right panel is the application's: the library does not know which panel is behind which tab.

States

<nav class="inst-tabs" aria-label="An example of an active tab">
  <a class="inst-tab" href="#" aria-current="page">Active</a>
  <a class="inst-tab" href="#">Ordinary</a>
  <a class="inst-tab" href="#">One more</a>
</nav>

The weight does not change on selection: it would change the width of the label, and a measurement on this reference gave neighbours shifting 2–3px — a choice by mouse would move what is being aimed at. Two carriers are left and neither is colour alone: an active tab differs from an ordinary one by the presence of the bar, and from a hovered one by tone.

The bar of a tab covers the line of the container by a negative margin of --hairline rather than by a shift of half a pixel: a browser does not draw a border thinner than a physical pixel, and the remainder would show at every joint.

JS

Include the module once per page.

<script type="module" src="instrument.js"></script>

What instrument.js does

Carries out the contract of role="tablist": ← and → between the tabs, Home, End, a traversal that wraps, one Tab for the whole strip. aria-selected moves on an arrow and on a click alike.

Events

inst:select bubbles from the chosen tab, and its detail is { value }: the data-value if there is one, otherwise the label.

tabs.addEventListener('inst:select', (e) => {
  for (const panel of panels) {
    panel.hidden = panel.id !== e.detail.value;
  }
});

What is left to the application

Showing the right panel and hiding the rest.

Composition

With an icon and a counter

<nav class="inst-tabs" aria-label="An example with a counter">
  <a class="inst-tab" href="#" aria-current="page">
    <svg class="inst-icon" aria-hidden="true"><use href="#i-list"/></svg>Queue
    <span class="inst-badge">7</span></a>
  <a class="inst-tab" href="#">History</a>
</nav>

The gap inside a tab is --space-3 and between tabs --space-6: the distance between neighbours has to be noticeably larger than the distance within one, otherwise the icon of the next reads as part of the previous.

Tabs as chips

A second kind of tab, and it is another job. A tab as a bar switches a section: there are few sections, they are set in advance and they do not close. A chip holds an open document: there are any number of them, they appear and close as work goes on, and each has a state of its own of being unsaved.

<div class="inst-tabs inst-tabs--chips" role="tablist" aria-label="Open files">
  <div class="inst-tab" role="tab" aria-selected="false" tabindex="-1">tokens.css
    <button class="inst-tab-close" type="button" aria-label="Close tokens.css">
      <svg class="inst-icon" aria-hidden="true"><use href="#i-close"/></svg></button></div>
  <div class="inst-tab" role="tab" aria-selected="true" tabindex="0" data-state="modified">layout.css
    <button class="inst-tab-close" type="button" aria-label="Close layout.css">
      <svg class="inst-icon" aria-hidden="true"><use href="#i-close"/></svg></button></div>
  <div class="inst-tab" role="tab" aria-selected="false" tabindex="-1">components.css
    <button class="inst-tab-close" type="button" aria-label="Close components.css">
      <svg class="inst-icon" aria-hidden="true"><use href="#i-close"/></svg></button></div>
</div>

A bar under such a row stops working: it draws one line under all of them, and at twenty tabs the chosen one has to be searched for. A fill reads at once and at any length of row.

The row is a recessed track and a chosen chip is raised on it. Raised alone is too close when the row lies on a raised surface — one step of lightness is almost nothing — so the row moves down rather than the chip up, and the two sit two steps apart. Depth is carried by the order of lightness, as everywhere else in the kit. The height comes from the control ladder (--control-h-sm) rather than from padding.

The cross is an overlay at the far edge rather than a place in the line — a name is read all the time and a tab is closed once. It appears from the keyboard too: an invisible button that Tab has reached is a trap. Room for the "unsaved" dot is reserved, because that state stands there permanently.

A chip is rounded on all four sides and lies on the strip rather than growing into the content below.

A closable tab is a <div role="tab"> rather than a <button>. The cross has to be a real button: tabs are closed from the keyboard, and the cross has a tap target of its own. And HTML does not let a button inside a button at all — interactive content is forbidden as a descendant of a <button> or an <a>. A tab as a bar stays a button or a link: there is nothing to close there.

API

Related

Segmented controlNavigationBreadcrumbsWizard stepsAccordion