<tab-container> Custom Element — An Accessible Tab Container Element with Keyboard Support

Built by GitHub is <tab-container>, a Custom Element that defines an accessible tab container element with keyboard support and that also follows the ARIA best practices guide on tabs.

Upon importing the package it will register the Custom Element, so you can use it immediately:

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

Installation possible per NPM:

npm install @github/tab-container-element

… or import it directly off of Skypack

import "https://cdn.skypack.dev/@github/tab-container-element";

<tab-container> Source →
<tab-container> Demo →

Published by Bramus!

Bramus is a Freelance Web Developer from Belgium. From the moment he discovered view-source at the age of 14 (way back in 1997), he fell in love with the web and has been tinkering with it ever since (more …)

Leave a comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.