@accessible-web-components/tabs

An accessible tabs web component

Usage no npm install needed!

<script type="module">
  import accessibleWebComponentsTabs from 'https://cdn.skypack.dev/@accessible-web-components/tabs';
</script>

README

Tabs

Published on npm

Demo

https://v505e.csb.app/

Browser Support

Browser Assistive Technology
: macOS :
Safari 13.0.4 ✅ : VoiceOver ✅
Firefox 79 ✅ :
Chrome ✅ :
Edge ✅ :

Usage

import { AwcTabs, AwcTab, AwcPanel } from '@accessible-web-components/tabs';

window.customElements.define('awc-tabs', AwcTabs);
window.customElements.define('awc-tab', AwcTab);
window.customElements.define('awc-panel', AwcPanel);
<awc-tabs>
  <awc-tab role="heading" slot="tab" id="my-first-tab" >Tab 1</awc-tab>
  <awc-panel role="region" slot="panel" id="my-first-panel">
    <h2>My first tab</h2>
    <p>Here is some text…</p>
    <ul>
      <li>…and a list</p>
    </ul>

    <button type="button">I am a focusable element within the tab</button>
  </awc-panel>

  <awc-tab role="heading" slot="tab">Tab 2</awc-tab>
  <awc-panel role="region" slot="panel">Content 2</awc-panel>

  <awc-tab role="heading" slot="tab">Tab 3</awc-tab>
  <awc-panel role="region" slot="panel">Content 3</awc-panel>
</awc-tabs>
  • The roles of heading and region are replaced by tab and tabpanel respectively at runtime. They provide some level of redundancy to the new elements should there be a runtime error.

Requirements

Per https://www.w3.org/TR/wai-aria-practices-1.2/#tabpanel:

Keyboard

  • Focus on active tab element
  • Left arrow: previous
  • Right arrow: next
  • Space/Enter: activate
  • Home: first
  • End: last

Roles

  • Container has a role of tablist
  • tablist should be labelledby active tab
  • Each element representing a tab has the role tab and is contained within the tablist
  • Each element representing tab content has the role of tabpanel