react-accessible-accordion

Accessible Accordion component for React. Inspired by rc-collapse and react-sanfona. 🔍👌

This is a work in progress. Feel free to contribute. Try a demo now.

Usage

First, grab the package from npm:

npm install --save react-accessible-accordion
# react-accessible-accordion's peerDependencies:
npm install --save react@^15.0.0 react-dom@^15.0.0

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';

import './node_modules/react-accessible-accordion/dist/react-accessible-accordion.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]'));

API

Accordion

props:

AccordionItem

props:

AccordionItemTitle

props:

AccordionItemBody

props:

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

Development

Install

Clone the project on your computer, and install Node. This project also uses nvm.

nvm install
# Then, install all project dependencies.
npm install
# Install the git hooks.
./.githooks/deploy
# Set up a `.env` file with the appropriate secrets.
touch .env

Working on the project

Everything mentioned in the installation process should already be done.

# Make sure you use the right node version.
nvm use
# Start the the development tools in watch mode.
npm run start
# Runs linting.
npm run lint
# Runs tests.
npm run test
# View other available commands with:
npm run

Run the demo

Everything mentioned in the installation process should already be done.

# Make sure you use the right node version.
nvm use
# Start the server and the development tools.
npm run start-demo

Publish

npm version [TYPE]
git push origin master --tags
npm publish

Browser support

Supported browser / device versions: