Patterns / tabs

tabs

Tier 2

The one pattern the platform still can't do accessibly without script. m-tabs enhances working markup — it never renders it.

Account settings panel.

Password panel. Try the arrow keys — roving tabindex, automatic activation.

Team panel.

<m-tabs>
  <nav>
    <button>Account</button>
    <button selected>Password</button>  <!-- optional initial -->
  </nav>
  <section>&#8230;account panel&#8230;</section>
  <section>&#8230;password panel&#8230;</section>
</m-tabs>

<script type="module" src="mica/tabs.js"></script>

Notes

Buttons pair with panels positionally, or explicitly via aria-controls="panel-id". The module wires tablist/tab/tabpanel roles, aria-selected, roving tabindex, and Arrow/Home/End keys. Without the module the nav is inert and every panel renders in order — complete, readable content, never a CSS-only fake (that is the Tier-2 line).

Overflow

Labels never wrap inside a tab. When the rail is narrower than its tabs, the nav scrolls horizontally — overscroll contained, a thin scrollbar where the platform shows one, and the clipped tab peeking at the edge as the affordance.

The rail is constrained to 16rem; tabs keep intrinsic width and the overflow scrolls.

Head-to-head panel.

Form panel.