Skip to main content

Installation

Package installation

NPM

npm install a11y-tabs

Yarn

yarn add a11y-tabs

Usage

The following are some various ways you can use A11yTabs in your projects.

ES Modules

If you've installed via package manager mentioned above, and have your project setup for es modules, then you can use import as you would with any install npm package:

import A11yTabs from 'a11y-tabs'

// The following assumes DOM loaded — this is something
// you will have to determine in your own environment
new A11yTabs('.tab-list', '[role="tabpanel"]', 0);

CDN

If you would like to load a11y-tabs from a CDN, add a defer attribute to your script tag. Then, be sure DOMContentLoaded has complete before you interact with the A11yTabs global.

<script defer src="https://unpkg.com/a11y-tabs@0.1.0/dist/a11y-tabs.min.js"></script>
<script>
window.addEventListener('DOMContentLoaded', () => {
  new A11yTabs('.tab-list', '[role="tabpanel"]', 0);
});
</script>

ES Modules in HTML

You should also be able to use ES modules in HTML by supplying the type="module" attribute. You'll want to ensure you're pointed to the CDN with the esm built script:

<script type="module">
  import A11yTabs from 'https://unpkg.com/a11y-tabs@0.1.0/dist/a11y-tabs.esm.min.js'
  // The following assumes DOM loaded — this is something
  // you will have to determine in your own environment
  new A11yTabs('.tab-list', '[role="tabpanel"]', 0)
</script>