Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/grrr-amsterdam/accessible-tabs
Accessible tabs enhancer, providing tablist, tab and tabpanel roles and spec-compliant tab switching behaviour.
https://github.com/grrr-amsterdam/accessible-tabs
accessibility frontend hacktoberfest-accepted javascript
Last synced: about 2 months ago
JSON representation
Accessible tabs enhancer, providing tablist, tab and tabpanel roles and spec-compliant tab switching behaviour.
- Host: GitHub
- URL: https://github.com/grrr-amsterdam/accessible-tabs
- Owner: grrr-amsterdam
- License: mit
- Created: 2020-01-15T15:57:24.000Z (almost 5 years ago)
- Default Branch: master
- Last Pushed: 2023-07-18T20:38:07.000Z (over 1 year ago)
- Last Synced: 2024-10-14T13:18:00.382Z (3 months ago)
- Topics: accessibility, frontend, hacktoberfest-accepted, javascript
- Language: JavaScript
- Homepage:
- Size: 602 KB
- Stars: 6
- Watchers: 7
- Forks: 1
- Open Issues: 9
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Accessible Tabs
[](https://travis-ci.com/grrr-amsterdam/accessible-tabs)
### JavaScript utility library
- No dependencies
- Lightweight (1.1kB minified and gzipped)
- Spec-compliant semantics, based on [Tabbed Interfaces](https://inclusive-components.design/tabbed-interfaces/) by [ Heydon Pickering](https://twitter.com/heydonworks)
### Developed with ❤️ by [GRRR](https://grrr.nl)
- GRRR is a [B Corp](https://grrr.nl/en/b-corp/)
- GRRR has a [tech blog](https://grrr.tech/)
- GRRR is [hiring](https://grrr.nl/en/jobs/)
- [@GRRRTech](https://twitter.com/grrrtech) tweets
## Installation
```sh
$ npm install @grrr/accessible-tabs
```
Note: depending on your setup [additional configuration might be needed](https://github.com/grrr-amsterdam/accessible-tabs/wiki/Usage-with-build-tools). This package is published with untranspiled JavaScript, as EcmaScript Modules (ESM).
## Usage
Import the module, construct and initialize it. The tabs constructor accepts an options object as secondary argument. See the [Markup](#Markup) section below for the specific DOM it expects.
```js
import Tabs from '@grrr/accessible-tabs';
const tabs = Tabs(document.querySelector('.js-tablist'), { /* options */ });
tabs.init();
```
### Options
Options will fall back to their defaults, which are listed here:
```js
{
selectedTab: 0, // Zero-based index for the initially selected tab.
}
```
### Markup
The module enhances a basic list of anchors referencing sections:
```html
Section 1
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Section 2
Nullam at diam nec arcu suscipit auctor non a erat.
```
When fully enhanced, this will be the final markup:
```html
Section 1
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Section 2
Nullam at diam nec arcu suscipit auctor non a erat.
```
#### Pre-enhancing & layout shifts
It's possible to _pre-enhance_ the markup. Mainly to make semantic styling easier (e.g. `.tab-class [role="tab"]`), and to prevent layout shifts during page load (because of tabpanels being hidden and new styling being applied). However, this should be used with caution since it interferes with the semantics of the non-enhanced version.
To prevent layout shifts, one could use a styling strategy like this:
```css
.js section:not([role="tabpanel"]):not(:first-of-type) {
display: none;
}
```
Note: the `.js` class could come from a library like [Modernizr](https://github.com/Modernizr/Modernizr), and helps deciding which styling should be applied based on the availability of JavaScript.