• Stars
    star
    785
  • Rank 57,957 (Top 2 %)
  • Language
    TypeScript
  • License
    MIT License
  • Created over 7 years ago
  • Updated about 1 year ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Accessible Accordion component for React

react-accessible-accordion npm Accessibility status

Demo

Try a demo now.

Usage

First, grab the package from npm:

npm install --save react-accessible-accordion

Then, import the editor and use it in your code. Here is a basic example:

import React from 'react';

import {
    Accordion,
    AccordionItem,
    AccordionItemHeading,
    AccordionItemButton,
    AccordionItemPanel,
} from 'react-accessible-accordion';

// Demo styles, see 'Styles' section below for some notes on use.
import 'react-accessible-accordion/dist/fancy-example.css';

export default function Example() {
    return (
        <Accordion>
            <AccordionItem>
                <AccordionItemHeading>
                    <AccordionItemButton>
                        What harsh truths do you prefer to ignore?
                    </AccordionItemButton>
                </AccordionItemHeading>
                <AccordionItemPanel>
                    <p>
                        Exercitation in fugiat est ut ad ea cupidatat ut in
                        cupidatat occaecat ut occaecat consequat est minim minim
                        esse tempor laborum consequat esse adipisicing eu
                        reprehenderit enim.
                    </p>
                </AccordionItemPanel>
            </AccordionItem>
            <AccordionItem>
                <AccordionItemHeading>
                    <AccordionItemButton>
                        Is free will real or just an illusion?
                    </AccordionItemButton>
                </AccordionItemHeading>
                <AccordionItemPanel>
                    <p>
                        In ad velit in ex nostrud dolore cupidatat consectetur
                        ea in ut nostrud velit in irure cillum tempor laboris
                        sed adipisicing eu esse duis nulla non.
                    </p>
                </AccordionItemPanel>
            </AccordionItem>
        </Accordion>
    );
}

Styles

We strongly encourage you to write your own styles for your accordions, but we've published the styles used on our demo page to help you get up and running:

import 'react-accessible-accordion/dist/fancy-example.css';

We recommend that you copy them into your own app and modify them to suit your needs, particularly if you're using your own classNames.

Component API

Accordion

allowMultipleExpanded : boolean [optional, default: false]

Don't autocollapse items when expanding other items.

allowZeroExpanded : boolean [optional, default: false]

Allow the only remaining expanded item to be collapsed.

preExpanded: string[] [optional, default: []]

Accepts an array of strings and any AccordionItem whose uuid prop matches any one of these strings will be expanded on mount.

className : string [optional, default: 'accordion']

Class(es) to apply to element.

onChange : (string[]) => void [optional]

Callback which is invoked when items are expanded or collapsed. Gets passed uuids of the currently expanded AccordionItems.


AccordionItem

className : string [optional, default: accordion__item]

Class(es) to apply to element.

uuid : string|number [optional]

Recommended for use with onChange. Will be auto-generated if not provided.

dangerouslySetExpanded: boolean [optional]

Enables external control of the expansion.

Warning: This may impact accessibility negatively, use at your own risk


AccordionItemHeading

className : string [optional, default: 'accordion__heading']

Class(es) to apply to the 'heading' element.

aria-level : number [optional, default: 3]

Semantics to apply to the 'heading' element. A value of 1 would make your heading element hierarchically equivalent to an <h1> tag, and likewise a value of 6 would make it equivalent to an <h6> tag.

AccordionItemButton

className : string [optional, default: 'accordion__button']

Class(es) to apply to the 'button' element.


AccordionItemPanel

className : string [optional, default: 'accordion__panel']

Class(es) to apply to element.

region: boolean

Make the element have a region role.


AccordionItemState

children : ({ expanded: boolean, disabled: boolean }): JSX.Element [required]


Helpers

resetNextUuid : (): void

Resets the internal counter for Accordion items' identifiers (including id attributes). For use in test suites and isomorphic frameworks.


Accessibility Best-Practice

Authoring an 'accordion' component to the WAI ARIA spec can be complex, but React Accessible Accordion does most of the heavy lifting for you, including:

  • Applying appropriate aria attributes (aria-expanded, aria-controls, aria-disabled, aria-hidden and aria-labelledby).
  • Applying appropriate role attributes (button, heading, region).
  • Applying appropriate tabindex attributes.
  • Applying keyboard interactivity ('space', 'end', 'tab', 'up', 'down', 'home' and 'end' keys).

However, there's still a couple of things you need to keep in mind to remain spec-compliant:

  • Only ever use phrasing content inside of your AccordionItemHeading component. If in doubt, use text only.
  • Always provide an aria-level prop to your AccordionItemHeading component, especially if you are nesting accordions. This attribute is a signal used by assistive technologies (eg. screenreaders) to determine which heading level (ie. h1-h6) to treat your heading as.

If you have any questions about your implementation, then please don't be afraid to get in touch via our issues.

FAQs

React 18?

RAA supports React 18, and the new out-of-order streaming feature. See the CHANGELOG for details.

Which design patterns does this component aim to solve?

Those described by the WAI ARIA spec's description of an 'accordion':

An accordion is a vertically stacked set of interactive headings that each contain a title, content snippet, or thumbnail representing a section of content. The headings function as controls that enable users to reveal or hide their associated sections of content. Accordions are commonly used to reduce the need to scroll when presenting multiple sections of content on a single page.

Which design patterns does this component NOT aim to solve?

Components which are "accordion-like" but do not match the WAI ARIA spec's description, as written above. By "accordion-like", we mean components which have collapsible items but require bespoke interactive mechanisms in order to expand, collapse and 'disable' them. This includes (but is not limited to) multi-step forms, like those seen in many cart/checkout flows, which we believe require (other) complex markup in order to be considered 'accessible'. This also includes disclosure widgets.

How do I disable an item?

See "Which design patterns does this component NOT aim to solve?".

Browser Support

Supported browser / device versions:

Browser Device/OS Version
Mobile Safari iOS latest
Chrome Android latest
IE Windows 11
MS Edge Windows latest
Chrome Desktop latest
Firefox Desktop latest
Safari OSX latest

More Repositories

1

awesome-wagtail

A curated list of awesome packages, articles, and other cool resources from the Wagtail community.
1,983
star
2

draftail

📝🍸 A configurable rich text editor built with Draft.js
TypeScript
612
star
3

css-reporter

It's analytics for your stylesheet
JavaScript
126
star
4

madewithwagtail

A showcase of sites and apps made with Wagtail CMS, the easy to use, open source Django content management system
Python
85
star
5

wagtailgmaps

Simple Google Maps address formatter for Wagtail fields
Python
83
star
6

draftjs_exporter

Convert Draft.js ContentState to HTML
Python
81
star
7

wagtail-django-recaptcha

A simple recaptcha field for Wagtail Form Pages
Python
56
star
8

ssm-parent

Docker entrypoint that gets parameters from AWS SSM Parameter Store
Go
50
star
9

react-redux-exercise

Exercise to understand better react-redux, how it works and how to use it.
JavaScript
49
star
10

wagtailenforcer

The Wagtail arm of the law - enforce security protocols on your Wagtail site
Python
45
star
11

wagtailcommonblocks

Common StreamField blocks for Wagtail
Python
40
star
12

wagtailembedder

Snippets embedder for Wagtail richtext fields
Python
37
star
13

metacomponent

MetaComponent makes React, Django, Vue, Mustache/Handlebars, Angular, etc. REPL:
TypeScript
36
star
14

react-accessible-headings

Makes it easier to keep heading levels semantic and accessible (WCAG)
TypeScript
35
star
15

reusable-d3-charts

Reusable charts built with D3. Built on Web standards, fully customisable.
JavaScript
33
star
16

metatemplate

Project renamed to MetaComponent see https://github.com/springload/metacomponent
31
star
17

pattern-book

Renamed to react-patterns
29
star
18

wagtailmodelchoosers

A Wagtail app to pick generic models (rather than snippets or pages)
Python
24
star
19

wagtaildraftail

🐦📝🍸 Draft.js editor for Wagtail, built upon Draftail and draftjs_exporter
Python
24
star
20

dotfiles

Software Installation, Configuration and Preferences for Springload
Vim Script
24
star
21

react-portal-popover

A popover library for React, using Portals for better positioning.
JavaScript
21
star
22

Wrangler.py

A Python static site generator
Python
19
star
23

springtunes

Control your Spotify client remotely from your browser
JavaScript
19
star
24

react-accessible-modal

Accessible modal dialog component for React
JavaScript
17
star
25

react-search-example

📉📈 An example of using React with D3, Lunr.js and an autocomplete UI to build an accessible keyboard-centric search experience. Also – service workers for offline caching, and desktop app with Electron.
CSS
17
star
26

segmented-control

A simple, CSS-driven way to create a segmented control using a list of radio buttons and labels.
CSS
15
star
27

react-svg-icon

Accessible SVG icon component for React
JavaScript
15
star
28

react-iframe-click

Detect clicks on iframe (but not within)
TypeScript
14
star
29

react-d3-integration

An example on how to integrate D3 into React
HTML
14
star
30

react-simpler-select

React component that renders a select. Supports optgroups, multiple selections.
JavaScript
12
star
31

wagtailfacelift

WARNING: This repo isn't maintained anymore! Drop-in CSS enhancements for Wagtail's Streamfield
CSS
11
star
32

form-validation-problem

A task for potential Springload developers.
11
star
33

springload-analytics.js

Google Analytics event tracking helper
JavaScript
10
star
34

react-accessible-ellipsis

Truncate multiline with an ellipsis... without causing accessibility problems!
10
star
35

ecs-tool

A tool to work with Amazon ECS. Allows easy deployments and running commands.
Go
9
star
36

quicktube

A lightweight embed video player, with support for YouTube and Vimeo
JavaScript
9
star
37

mocha-chai-to-jest

How to migrate unit tests from Mocha and Chai to Jest
JavaScript
8
star
38

aws-ssh

Creates ssh config to connect to your AWS ec2 instances
Go
7
star
39

screenshotron

The most aptly-named way to take screenshots of pages with Electron.
JavaScript
7
star
40

wunderlist-to-todoist

Wunderlist to Todoist
PHP
6
star
41

lp-aws-saml

Go
6
star
42

wagtailgists

Useful snippets for Wagtail
JavaScript
5
star
43

devops-challenge

Shell
5
star
44

tagman-watcher

Tiny (1kb) utility for effiently watching browser events and sending them to Google Tag Manager
JavaScript
4
star
45

slack-harvest

Integrations between slack and harvest, such as the timesheet nagger.
JavaScript
4
star
46

wagtailimagecaption

WARNING: This repo isn't maintained anymore! Images captions for Wagtail
Python
4
star
47

grunticon-pigment

Fork of filamentgroup grunt-grunticon. Creates colourised versions of SVG icons.
JavaScript
4
star
48

rikki-patterns

🎽⚡️ Living pattern library generator. Move fast and don't break your patterns.
JavaScript
3
star
49

react-patterns

A pattern library designed to be easier to maintain
JavaScript
3
star
50

springload-analytics

TypeScript
3
star
51

frontend-starter-styles

The building blocks of CSS at Springload
SCSS
3
star
52

SporeJS

⛔️ DEPRECATED
JavaScript
3
star
53

set-alias-on-host

Pure bash script to set docker network alias on host machine
Shell
3
star
54

workshops

🎆👷🔧 Training workshops at Springload
JavaScript
3
star
55

ansible_aws_inventory

Ansible AWS dynamic inventory script. Can also be used with ssh.
Python
3
star
56

site-url-scraper

Multithreaded Python application to search a string pattern or find all internal links from a url or CSV list of urls
Python
3
star
57

pattern-library

WIP: Pattern library in django.
Python
3
star
58

terraform-aws-ecs-cluster

terraform >=0.12 module for AWS ECS cluster
HCL
3
star
59

eway-rapid-python

Python client implementation for eWAY Rapid API v3
Python
3
star
60

wagtailclasssetter

WARNING: This repo isn't maintained anymore! Class setter for link tags in Hallo.js editor
Python
3
star
61

wagtailvideoposter

WARNING: This repo isn't maintained anymore! Poster images for Wagtail Video Embeds
Python
3
star
62

springload.github.io

Springload’s hub for open source
CSS
3
star
63

springtunes-native

Native iOS/Android client for Springtunes
JavaScript
2
star
64

FadeSlide.js

fadeSlide.js is a different kind of jQuery carousel. The previous and next items are slightly visible, giving a cool graphical effect. Great for impressive looking home pages!
JavaScript
2
star
65

email-starter-kit

Email starter kit
HTML
2
star
66

FancyInputs.js

Pretty selects, checkboxes, and conditionals for work and pleasure.
CSS
2
star
67

HoverState.js

A handy jQuery plugin that preloads your images hover state, then displays it "onHover".
JavaScript
2
star
68

python-static-analysis

Dockerfile
2
star
69

redux-form-exercise

Exercises to understand better redux-form, how it works and how to use it.
JavaScript
2
star
70

pulumi-tf-provider-ec

Go
2
star
71

springtunes-webextension

Browser extension for springtunes
JavaScript
2
star
72

eslint-plugin-springload

Springload's ESLint shareable configurations, as a plugin.
JavaScript
2
star
73

ShowHide.js

ShowHide: Toggle content based on data attr hooks.
JavaScript
2
star
74

jobs

Springload Jobs experimental mini-site
HTML
1
star
75

public-keys

1
star
76

labels

Files to populate GitHub labels usable in Huboard
1
star
77

typed_environment_configuration

Typed environment configuration for Python
Python
1
star
78

Browser.js

JavaScript
1
star
79

lodash-function-finder

Helps find Lodash functions based on input/output. App: https://springload.github.io/lodash-function-finder/
TypeScript
1
star
80

eslint-config-springload

Springload's ESLint shareable configuration
JavaScript
1
star
81

prettier-config-springload

Importable configuration object for standardised Prettier config
JavaScript
1
star