Enable Tablist Web Component

This webcomponent follows the open-wc recommendations.

Preamble

Enable webcomponents are very opinionated components for a reason. They were developed for 2 reasons:

1. To be accessible
2. To help developers learn how to code with accessibility in mind.

It's important to match the example implementations and only deviate when the component allows it. If you don't follow the examples, there's a good chance it won't work :)

Installation

npm i enable-wc-tablist

Note - You must be using a local server that can resolve node_modules internally. We recommend using web-dev-server (https://modern-web.dev/docs/dev-server/overview/) which jas a flag --node-resolve that will resolve the imports automatically. When you're ready to deply to production, you can bundle it with the project compiler.

When javascript isn't enabled the entire content will be visible. But the anchor links will still function in order to scroll the browser to the panel content.

Usage

<enable-tablist instructions="Use arrow keys to choose tabs. Content for the chosen tab will be revealed below.">
    <ul class="enable-tablist">
        <li>
            <a href="#tabpanel__jamaican-ska">
            Jamaican Ska
            </a>
        </li>
        <li>
            <a href="#tabpanel__two-tone">
            2 Tone
            </a>
        </li>
        <li>
            <a href="#tabpanel__third-wave">
            Third Wave
            </a>
        </li>
    </ul>
    <div class="tabpanels">
        <div id="tabpanel__jamaican-ska">
            <h2>Jamaican Ska</h2>
            <div class="tab__content">
                Content here
            </div>
        </div>
        <div id="tabpanel__two-tone">
            <h2>2 Tone Ska</h2>
            <div class="tab__content">
                Content here
            </div>
        </div>
        <div id="tabpanel__third-wave">
            <h2>Third Wave</h2>
            <div class="tab__content">
                Content here
            </div>
        </div>
    </div>
</enable-tablist>

<script type="module">
    import { Tablist } from 'enable-wc-tablist';
</script>

Props

These props can be added/changes on the web component.

instructions - This is the text instructions that appear when a keyboard user is withtin the component.

The components use 'parts' to style individual elements. The accordion supports the following parts:

tab / active - The default tab when it's not selected. The 'active' attribute is added when it is active.

tabpanel - The panel content of the tablist.

instructions - The instructions that appear for keyboard users.

list - The container for all the tab elements.

Example

enable-tablist::part(<part-name>) {
    /* add styles here */
}