Accessible Tabs & Accordion Library – aria-tablist

Preview:

Description:

aria-tablist is a cross-browser, progressive enhancement, and fully accessible tabs & accordion library built with plain JavaScript.

How to use it:

1. Install and import the aria-tablist as an ES module.

# NPM
$ npm install aria-tablist --save

import AriaTablist from 'aria-tablist';

2. Or load the minified version of the aria-tablist library from a CDN.

<script src="https://cdn.jsdelivr.net/npm/aria-tablist/dist/aria-tablist.min.js"></script>

3. Create tabs pointing to their corresponding content using the aria-controls attribute:

<div id="languages">
  <div aria-controls="javascript">JavaScript</div>
  <div aria-controls="html">HTML</div>
  <div aria-controls="css">CSS</div>
</div>
<div id="javascript">JavaScript, often abbreviated as JS, is a high-level, just-in-time compiled, multi-paradigm programming language that conforms to the ECMAScript specification. JavaScript has curly-bracket syntax, dynamic typing, prototype-based object-orientation, and first-class functions.</div>
<div id="html">Hypertext Markup Language is the standard markup language for documents designed to be displayed in a web browser. It can be assisted by technologies such as Cascading Style Sheets and scripting languages such as JavaScript.</div>
<div id="css">Cascading Style Sheets is a style sheet language used for describing the presentation of a document written in a markup language like HTML. CSS is a cornerstone technology of the World Wide Web, alongside HTML and JavaScript.</div>

4. Initialize the aria-tablist and done.

new AriaTablist(document.getElementById('languages'));

5. To create an accordion (vertical tabs), just add the aria-orientation="vertical" attribute to the tabs container and done.

<div id="languages" aria-orientation="vertical">
  <div aria-controls="javascript">JavaScript</div>
  <div aria-controls="html">HTML</div>
  <div aria-controls="css">CSS</div>
</div>

6. Apply your own styles to the tabs.

[role='tablist'] {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}
[role='tablist'][aria-orientation='vertical'] {
  flex-direction: column;
}
[role='tab'], [role='tabpanel'] {
  border: 0.0625rem solid #ccc;
  box-shadow: 0 0.125rem 0.3125rem rgba(0, 0, 0, 0.1);
  margin-right: 0.625rem;
  margin-bottom: 0.625rem;
  padding: 0.4375rem 0.625rem;
  border-radius: 0.125rem;
}
[role='tab'] {
  float: left;
  cursor: pointer;
}
[role='tabpanel'] {
  width: 100%;
  clear: both;
  margin-right: 0;
  box-sizing: border-box;
}
[role='tab'][aria-selected='true'] {
  background: #f3f3f3;
  border-color: #606060;
  font-weight: bold;
  border-left-width: 0.25rem;
}
[role='tab'][aria-disabled='true'] {
  opacity: 0.65;
  font-weight: normal;
  cursor: not-allowed;
}

/* for accordion */
[aria-orientation='vertical'] [role='tab'] {
  float: none;
  margin-right: 0;
  background-size: 1.0625rem;
  background-repeat: no-repeat;
  background-position: right 0.625rem top 50%;
  background-image: url("data:image/svg+xml;
  charset=utf8,%3Csvg width='17' height='10' viewBox='0 0 17 10' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.023L8.488 8 16 1' stroke-width='1' stroke='%23434143' fill='none' fill-rule='evenodd'/%3E%3C/svg%3E");
}
[aria-orientation='vertical'] [role='tab'][aria-selected='true'] {
  background-image: url("data:image/svg+xml;
  charset=utf8,%3Csvg width='17' height='10' viewBox='0 0 17 10' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 8L8.488 1 16 8' stroke-width='1' stroke='%23434143' fill='none' fill-rule='evenodd'/%3E%3C/svg%3E");
}

7. Available options to config the tabs & accordion interface.

new AriaTablist(document.getElementById('languages'),{
    /**
     * @description delay in milliseconds before showing tab(s) from user interaction
     */
    delay: 0,
    /**
     * @description allow tab deletion - can be overridden per tab by setting data-deletable="false"
     */
    deletable: false,
    /**
     * @description make all tabs focusable in the normal tabbing order (by setting tabindex="0" on them), instead of just 1
     */
    focusableTabs: false,
    /**
     * @description make all panels focusable (by setting tabindex="0" on them)
     */
    focusablePanels: true,
    /**
     * @description activate a tab when it receives focus from using the arrow keys
     */
    arrowActivation: false,
    /**
     * @description value to use when setting tabs or panels to be part of the page's tabbing order
     */
    tabindex: 0
});

8. Callback functions.

new AriaTablist(document.getElementById('languages'),{
    /**
     * @description callback each time a tab opens
     * @type {Function}
     */
    onOpen: undefined,
    /**
     * @description callback each time a tab closes
     * @type {Function}
     */
    onClose: undefined,
    /**
     * @description callback when a tab is deleted
     * @type {Function}
     */
    onDelete: undefined,
    /**
     * @description callback once ready
     * @type {Function}
     */
    onReady: undefined
});

9. API methods.

// open a specific tab
instance.open(index: Number|Element, focusTab: Boolean = true);
// close a specific tab
instance.close(index: Number|Element, focusTab: Boolean = true);
// delete a tab and its corresponding content
instance.delete(index: Number|Element);
// destroy the instance
instance.destroy();