@accessible-web-components/tabs

    0.2.0 • Public • Published

    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

    Install

    npm i @accessible-web-components/tabs

    DownloadsWeekly Downloads

    9

    Version

    0.2.0

    License

    MIT

    Unpacked Size

    18.7 kB

    Total Files

    10

    Last publish

    Collaborators

    • avatar