https://github.com/stereobooster/react-accessible-accordion

Accessible React accordion component
https://github.com/stereobooster/react-accessible-accordion

accessibility react

Last synced: 3 months ago
JSON representation

Accessible React accordion component

• Host: GitHub
• URL: https://github.com/stereobooster/react-accessible-accordion
• Owner: stereobooster
• Created: 2019-05-30T18:38:42.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2021-06-19T22:39:43.000Z (over 3 years ago)
• Last Synced: 2023-04-10T05:19:21.208Z (almost 2 years ago)
• Topics: accessibility, react
• Language: JavaScript
• Homepage: https://stereobooster.github.io/react-accessible-accordion/
• Size: 423 KB
• Stars: 15
• Watchers: 1
• Forks: 6
• Open Issues: 1
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Accessible React accordion component

[![Build Status](https://travis-ci.org/stereobooster/react-accessible-accordion.svg?branch=master)](https://travis-ci.org/stereobooster/react-accessible-accordion)

Read the blog post about this repo [here](https://dev.to/stereobooster/accessible-react-accordion-component-4p99).

## Accessibility

Component is implemented according to [WAI-ARIA Authoring Practices 1.1](https://www.w3.org/TR/wai-aria-practices/examples/accordion/accordion.html).

Keyboard Support:

- Space or Enter

  - When focus is on the accordion header of a collapsed section, expands the section.

- Tab

  - Moves focus to the next focusable element.

  - All focusable elements in the accordion are included in the page Tab sequence.

- Shift + Tab

  - Moves focus to the previous focusable element.

  - All focusable elements in the accordion are included in the page Tab sequence.

- Down Arrow

  - When focus is on an accordion header, moves focus to the next accordion header.

  - When focus is on last accordion header, moves focus to first accordion header.

- Up Arrow

  - When focus is on an accordion header, moves focus to the previous accordion header.

  - When focus is on first accordion header, moves focus to last accordion header.

- Home

  - When focus is on an accordion header, moves focus to the first accordion header.

- End

  - When focus is on an accordion header, moves focus to the last accordion header.

## Example of Usage

```js

import React from "react";

import { Accordion, AccordionSection } from "./components";

function App() {

  return (

    

      

        Lorem ipsum dolor sit amet

      

      

        Suspendisse lobortis diam quis magna faucibus

      

    

  );

}

```

## Available Scripts

In the project directory, you can run:

### `npm start`

Runs the app in the development mode.


Open [http://localhost:3000](http://localhost:3000) to view it in the browser.

The page will reload if you make edits.


You will also see any lint errors in the console.