Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/matthiasott/a11y-accordion-tabs

A script for an accessible accordion tabs component
https://github.com/matthiasott/a11y-accordion-tabs

a11y accessibility accordion aria component html javascript tabs ui-components

Last synced: 18 days ago
JSON representation

A script for an accessible accordion tabs component

Host: GitHub
URL: https://github.com/matthiasott/a11y-accordion-tabs
Owner: matthiasott
License: mit
Created: 2017-08-25T20:08:56.000Z (about 7 years ago)
Default Branch: master
Last Pushed: 2023-04-19T01:40:10.000Z (over 1 year ago)
Last Synced: 2024-10-12T14:44:44.186Z (about 1 month ago)
Topics: a11y, accessibility, accordion, aria, component, html, javascript, tabs, ui-components
Language: JavaScript
Size: 197 KB
Stars: 71
Watchers: 4
Forks: 6
Open Issues: 13
Metadata Files:
- Readme: README.md
- License: LICENSE

Awesome Lists containing this project

awesome-list - a11y-accordion-tabs

README

# a11y-accordion-tabs

[![npm version](https://badge.fury.io/js/a11y-accordion-tabs.svg)](https://badge.fury.io/js/a11y-accordion-tabs) [![Build Status](https://travis-ci.org/matthiasott/a11y-accordion-tabs.svg?branch=master)](https://travis-ci.org/matthiasott/a11y-accordion-tabs) [![devDependency Status](https://david-dm.org/matthiasott/a11y-accordion-tabs.svg)](https://david-dm.org/matthiasott/a11y-accordion-tabs#info=devDependencies)

A small script (less than 1.6 KB compressed and gzipped) with zero dependencies for creating accessible accordion tabs components.
Based on the [accessible tabs component by @stowball](https://codepen.io/stowball/pen/xVWwWe).

The component is an accordion on smaller screens and switches to a tab view on larger viewports.

## Demo

[See it in action here](https://matthiasott.github.io/a11y-accordion-tabs/).

## Installation

### Download or clone

Download the [latest](https://github.com/matthiasott/a11y-accordion-tabs/archive/master.zip) version or `git clone https://github.com/matthiasott/a11y-accordion-tabs.git`.

### npm

```sh
npm install a11y-accordion-tabs --save-dev
```

## Usage

First, include `a11y-accordion-tabs.js` (or the minified version) in your document:

```html

```

You can write your own styles from scratch or use [the CSS file in the docs folder](https://raw.githubusercontent.com/matthiasott/a11y-accordion-tabs/master/docs/styles.css) as a starting point and include it in your document, too.

```html

```

The basic HTML structure for the accordion tabs component reads as follows:

```html

Section 1

Section 2

Section 3

Section 1

abc

Section 2

def

Section 3

def

```

For an advanced version [have a look at the demo](https://matthiasott.github.io/a11y-accordion-tabs/).

By default, the script looks for all elements with the class `js-tabs` and turns them into an accordion tabs component automatically.
But you can also instantiate the component in your JavaScript like this:

```javascript
var tabs = document.getElementById("myTabs");

new AccordionTabs(tabs);
```

## Options

a11y-accordion-tabs comes with a few options to make the component more flexible. All options can be set via either a `data-` attribute or a JS property on the second argument of the constructor:

```javascript
new AccordionTabs(tabs, {
breakpoint: 800,
tabsAllowed: true,
selectedTab: 2,
startCollapsed: false
});
```

## Compatibility

The functions in the script are supported by all modern browsers, including IE10+.
If you need support for IE9, you might want to use [this polyfill](https://github.com/eligrey/classList.js) for `element.classList`.

## Changelog

### 0.5.0
- New option `startCollapsed`: Defines if the accordion should be collapsed on startup

### 0.4.1
- Fix CJS module export
– Update dependencies to fix vulnerabilities

### 0.4.0
- Data attributes now follow the W3C naming conventions (no uppercase letters)
– Improved default aria-roles in the demo HTML code
– Plus / minus symbols instead of chevrons in the demo code

### 0.3.2
- Update documentation

### 0.3.1
- Cleanup example HTML code

### 0.3.0
- Add support for multiple instances
- Update README with basic documentation

### 0.2.1
- Breakpoint min-width fix.

### 0.2.0
- Improved ARIA-roles for the accordion state.

### 0.1.0
- First basic version. Still a lot of cleanup to do. Please use with caution!

## License

Code released under [the MIT license](https://github.com/matthiasott/a11y-accordion-tabs/LICENSE).

## Author

Matthias Ott