Accessible Accordion component for React
Clone or download
ryami333 Revert "Merge pull request #154 from springload/chore/component-namin…
…g-changes"

This reverts commit 13b8a41, reversing
changes made to 1f6befc.
Latest commit f08d6a7 Jan 16, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.circleci Update CircleCI install step to use yarn instead of npm. Dec 17, 2018
demo Revert "Merge pull request #154 from springload/chore/component-namin… Jan 16, 2019
src Revert "Merge pull request #154 from springload/chore/component-namin… Jan 16, 2019
.browserslistrc Add .browserslistrc file Jun 11, 2018
.editorconfig Simplify editorconfig in favour of prettierrc Dec 17, 2018
.gitignore Replace npm with yarn and bump @babel deps Dec 17, 2018
.npmignore Add tsconfig/tslint.json to npm ignores. Jan 7, 2019
.nvmrc Bump node to latest LTS Dec 17, 2018
.prettierignore Add a bunch of files to prettierignore Dec 17, 2018
.prettierrc Fix prettierrc always enforcing flow as parser Dec 17, 2018
CHANGELOG.md Revert changelog.md changes to reflect names of components when chang… Jan 16, 2019
CONTRIBUTING.md Update CONTRIBUTING.md Jan 14, 2019
LICENSE Update 2017 -> 2018 Feb 20, 2018
README.md Revert "Merge pull request #154 from springload/chore/component-namin… Jan 16, 2019
babel.config.js Replace '@babel/preset-flow' with '@babel/preset-typescript' Jan 7, 2019
jest.config.js Configure jest to deal with TS tests Jan 7, 2019
package.json Bump rollup and deps Jan 7, 2019
rollup.config.js Configure TS extensions with rollup config Jan 7, 2019
tsconfig.declaration.json Install tslint-microsoft-contrib and refactor to fix all linting and … Jan 7, 2019
tsconfig.json Update webpack and typescript configuration to permit typescript in t… Jan 15, 2019
tslint.json Re-enable 'no-suspicious-comment' linting rule Jan 7, 2019
webpack.config.js Update webpack and typescript configuration to permit typescript in t… Jan 15, 2019
yarn.lock Bump rollup and deps Jan 7, 2019

README.md

react-accessible-accordion npm Build Status Coverage Status Dependency Status devDependency Status Accessibility status

Demo

Try a demo now.

Usage

First, grab the package from npm:

npm install --save react-accessible-accordion react react-dom

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

import React from 'react';
import ReactDOM from 'react-dom';

import {
    Accordion,
    AccordionItem,
    AccordionItemTitle,
    AccordionItemBody,
} from 'react-accessible-accordion';

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

const Example = () => (
    <Accordion>
        <AccordionItem>
            <AccordionItemTitle>
                <h3>Simple title</h3>
            </AccordionItemTitle>
            <AccordionItemBody>
                <p>Body content</p>
            </AccordionItemBody>
        </AccordionItem>
        <AccordionItem>
            <AccordionItemTitle>
                <h3>Complex title</h3>
                <div>With a bit of description</div>
            </AccordionItemTitle>
            <AccordionItemBody>
                <p>Body content</p>
            </AccordionItemBody>
        </AccordionItem>
    </Accordion>
);

ReactDOM.render(<Example />, document.querySelector('[data-mount]'));

Styles

We strongly encourage you to write your own styles for your accordions, but we've published these two starter stylesheets to help you get up and running:

// 'Minimal' theme - hide/show the AccordionBody component:
import 'react-accessible-accordion/dist/minimal-example.css';

// 'Fancy' theme - boilerplate styles for all components, as seen on our demo:
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.

API

Accordion

props:

name type default description
accordion Boolean true Open only one item at a time or not
onChange Function(keys) noop Triggered on change (open/close items)
className String accordion CSS class(es) applied to the component

AccordionItem

props:

name type default description
expanded Boolean false Expands this item on first render
className String accordion__item CSS class(es) applied to the component
hideBodyClassName String null Class name for hidden body state
uuid String null Custom uuid to be passed to Accordion - onChange. Has to be unique.

AccordionItemTitle

props:

name type default description
className String accordion__title CSS class(es) applied to the component
hideBodyClassName String null Class name for hidden body state

AccordionItemBody

props:

name type default description
className String accordion__body CSS class(es) applied to the component
hideBodyClassName String accordion__body--hidden Class name for hidden body state

resetNextUuid

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

Accessibility

What this project is doing accessibility-wise?

This project manages two types of Accordions, with single or multiple items open.

Single item

Use this with with props accordion set to true on Accordion.

For this type of Accordion, you will get the following role set up on your elements:

  • Accordion: tablist
  • AccordionItem: no specific role
  • AccordionItemTitle: tab
  • AccordionItemBody: tabpanel

Multiple items

For this type of Accordion, you will get the following role set up on your elements:

Use this with with props accordion set to false on Accordion.

  • Accordion: no specific role
  • AccordionItem: no specific role
  • AccordionItemTitle: button
  • AccordionItemBody: no specific role

Browser support

Supported browser / device versions:

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