Actually accessible react switch

A fully WCAG2.1 compliant switch 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-switch --save

Usage

import ReactDOM from 'react-dom';
import React from 'react';
import Switch from 'actually-accessible-react-switch';

ReactDOM.render(
  <Switch
    id="demo1"
    label="Select an option"
    onChange={o => console.log(o)}
  />,
  window.document.getElementById('demo')
);

Props

id required - Unique control identifier

label required - Not visible by set as aria-label attribute

value optional - Boolean for the initial state of the control

className optional - A string for a custom CSS class name

readonly optional - Defaults to false. Pass true to make the field readonly

onChange required - A function called when a the switch state is toggled

Accessibility

Keyboard interaction

TAB Moves keyboard focus to, and between, switches. Read-only object will still receive focus.

SPACE ENTER Toggles the switch option either true (on) or false (off).