Tabs

Single-page tabs use data-mr-tab and data-mr-panelas behavior relationships. Put role="tablist" on the authored container and give separate tab sets different data-mr-tabs-groupvalues.

The enhancement applies tab/panel roles, aria-selected, rovingtabindex, aria-controls/aria-labelledby, and native hidden state. Arrow keys plus Home and End move and activate tabs.

Without JavaScript all panels remain visible, so content is still reachable; only the tab-switching interaction is absent.

Example

<nav class="mr-nav-tabs" role="tablist" aria-label="Account sections">
  <button data-mr-tab="profile" data-mr-tabs-group="account">Profile</button>
  <button data-mr-tab="security" data-mr-tabs-group="account">Security</button>
</nav>

<section data-mr-panel="profile" data-mr-tabs-group="account" data-mr-tabs-default>
  Profile content
</section>
<section data-mr-panel="security" data-mr-tabs-group="account">
  Security content
</section>