https://github.com/azinasili/a11ytab
A fully accessible and customizable tabs front-end component
https://github.com/azinasili/a11ytab
accessibility accessible component customizable front-end tabs
Last synced: 4 months ago
JSON representation
A fully accessible and customizable tabs front-end component
- Host: GitHub
- URL: https://github.com/azinasili/a11ytab
- Owner: azinasili
- License: mit
- Created: 2017-04-02T18:18:01.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2022-12-30T00:43:38.000Z (over 3 years ago)
- Last Synced: 2026-01-26T12:17:34.428Z (5 months ago)
- Topics: accessibility, accessible, component, customizable, front-end, tabs
- Language: JavaScript
- Homepage:
- Size: 371 KB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# A11yTab
A fully accessible and customizable front-end component for tabs. A11yTab has minimal markup requirements so it can be used however your project demands.
[DEMO](https://codepen.io/azinasili/pen/MKGwgX?editors=0100)
## Installation
A11yTab is available at the:
| Source | |
|:-------|:-|
| NPM | `npm install a11ytab --save` |
| Yarn | `yarn add a11ytab` |
| unpkg | [`https://unpkg.com/a11ytab`](https://unpkg.com/a11ytab) |
## Usage
A11yTab does require minimal amount of markup to function:
```html
...
...
...
```
```javascript
// Import A11yTab if utilizing JS modules
import A11yTab from 'a11ytab';
// Create a new instance of A11yTab
// See all the A11yTab options below
const tabs = new A11yTab({
selector: document.querySelector('#a11ytab-list'),
});
// Initialize your new tabs
tabs.init();
```
A11yTab will handle all ARIA roles/attributes, focus management, and events, which transform the original HTML into the following:
```html
...
...
...
```
## A11yTab API
### Options
| Property | Type | Default | Description |
|:------------------- |:----------- |:-------------------- |:----------- |
| selector | HTMLElement | `null` | Containing element for tabs |
| tabFocus | String | `null` | Class to add to tabs when focused |
| tabBlur | String | `null` | Class to add to tabs when not focused |
| tabPanelFocus | String | `null` | Class to add to panel when active |
| tabPanelBlur | String | `null` | Class to add to panel when not active |
| focusOnLoad | Boolean | `false` | Move users focus to tab component on page load |
| afterFocusFunction | Function | `null` | Function to run after focusing on tab |
| beforeFocusFunction | Function | `null` | Function to run before focusing on tab |
| addEvents | Boolean | `false` | Add custom A11yTab events |
| eventAfterFocus | String | `a11ytab:afterFocus` | Name of custom event to fire after focusing on tab |
| eventBeforeBlur | String | `a11ytab:beforeBlur` | Name of custom event to fire before leaving focus on tab |
| hashNavigation | Boolean | `false` | Append focused tab id to URL |
| tabToFocus | HTMLElement | `null` | Tab element to initially make active |
### Methods
| Name | Description |
|:------- |:----------- |
| init | Initializes instance of A11yTab |
| destroy | Kills instance of A11yTab |
| prev | Focus on previously focusable tab |
| next | Focus on following focusable tab |
| focus | Focus on given tab |
## License
MIT License