Accessible Tabs Component – tab-container

tab-container is an easy, accessible tabs compont written in Vanilla JavaScript.

How to use it:

1. Install & download.

# NPM
$ npm install @github/tab-container-element --save

2. Include the tab-container from a CDN.

<script src="https://unpkg.com/@github/tab-container-element@latest/dist/index.js" type="module"></script>

3. The example markup to create a basic tabs UI.

<tab-container>
  <div role="tablist">
    <button type="button" role="tab" aria-selected="true">Tab 1</button>
    <button type="button" role="tab">Tab 2</button>
    <button type="button" role="tab">Tab 3</button>
  </div>
  <div role="tabpanel">
    Panel 1
  </div>
  <div role="tabpanel" hidden>
    Panel 2
  </div>
  <div role="tabpanel" hidden>
    Panel 3
  </div>
</tab-container>

4. Specify the tab to display on init.

<tab-container default-tab="1">
  ...
</tab-container>

5. Set the layout to ‘vertical’.

<tab-container vertical>
  ...
</tab-container>

Changelog:

v4.8.2 (06/20/2024)

• Return early if tab or panel are undefined

v4.8.1 (06/19/2024)

• Ensure tabs are available before selecting

v4.8.0 (05/09/2024)

• drop redundant role=presentation from slot element
• Tidy up manual slot assignment code
• Fixes tablist-tab-wrapper accessibility violation by reverting div->slot change

v4.7.0 (04/24/2024)

• Custom tablist-tab-wrapper
• Unmanaged slots

v4.6.0 (04/22/2024)

• Adds the ability to pass a custom tablist-tab-wrapper element.

v4.5.0 (03/12/2024)

• Add tab index to event object
• Register event types for better type inference

v4.4.0 (03/09/2024)

• Add property defaultTabIndex to access default-tab attribut

v4.3.0 (03/07/2024)

• Add onChange and onChanged alias

v4.2.0 (03/07/2024)

• add activeTab, selectedTabIndex props

v4.1.3 (02/29/2024)

• HTMLSlotElement needs SSR support

v4.1.2 (02/29/2024)

• No role or aria on slot element

v4.1.1 (02/22/2024)

• Ensure support for browsers without manual slot assignment

v4.1.0 (02/20/2024)

• Adds a new shadow part called tablist-wrapper which corresponds to the div element wrapping before-tabs, tablist and after-tabs parts.

v4.0.1 (02/19/2024)

• Fix set aria selected

v4.0.0 (02/17/2024)

• Simplify events
• Refactor code

v3.4.0 (02/15/2024)

• fall back HTMLElement in SSR contexts
• remove .to.be.accessible() checks
• add TabContainerChange event class