Actually accessible react dropdown

A fully WCAG2.1 compliant dropdown component.

This includes full keyboard support and will work with the following screen reader pairings:

• Chrome/Windows + Jaws
• Safari/OSX + Voice over

The behaviour in other pairings is not catered for so may or may not function as expected. In general however, testing with NVDA has also yielded good results.

Installation

npm i actually-accessible-react-dropdown --save

Usage

import ReactDOM from 'react-dom';
import React from 'react';
import Dropdown from 'actually-accessible-react-dropdown';

const options = [
    {label: 'Argentina', value: 0},
    {label: 'Australia', value: 1},
    {label: 'Brazil', value: 2},
    {label: 'Bolivia', value: 3, isActive: true},
    {label: 'Botswana', value: 4},
    {label: 'Germany', value: 5},
    {label: 'Italy', value: 6},
    {label: 'Spain', value: 7},
    {label: 'San Marino', value: 8},
    {label: 'Uruguay', value: 9},
    {label: 'The United States of America', value: 10},
    {label: 'Venezuela', value: 11}
];

ReactDOM.render(
  <Dropdown
    id="demo1"
    label="Select an option"
    placeholder="Please choose a country"
    options={options}
    onSelect={o => console.log(o)}
  />,
  document.getElementById('dropdown')
);

Props

id required - Unique control identifier

label optional - Control label

placeholder optional - Display when there is no active selection

options required - An array or label/value pairs. One item may have an isActive key to identify a selected value

onSelect required - A function called when a selection is made. The label/value will be passed back as the only parameter

Accessibility

Keyboard interaction

TAB Moves keyboard focus to drop-down.

UP DOWN Navigates between different menu items. Opens menu if closed.

ENTER Closes menu and selects menu item highlighted.

ESCAPE Menu closes without modifying selection.

HOME If menu is open, moves focus to and selects the first option.

END If menu is open, moves focus to and selects the last option.