Accessible Tabs Component – tab-container

Category: Javascript | May 8, 2024
Author:github
Views Total:5 views
Official Page:Go to website
Last Update:May 8, 2024
License:MIT

Preview:

Accessible Tabs Component – tab-container

Description:

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.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

You Might Be Interested In:


Leave a Reply