Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to make the options in react-select dropdown accessible?

Tags:

I am building a reactjs application and I am using a library called react-select for my dropdown which is searchable. but the problem I am facing is that the options inside the select are not being read out by NVDA screenreader when using arrow keys. and am not able to set focus on this dropdown as well for some reason.

I tried it via the official documentation but no luck as of now.

The library I am using: React-select

https://react-select.com/home

The code:


import React, { Component, Fragment } from "react";
import Select from "react-select";

export const flavourOptions = [
  { value: "vanilla", label: "Vanilla", rating: "safe" },
  { value: "chocolate", label: "Chocolate", rating: "good" },
  { value: "strawberry", label: "Strawberry", rating: "wild" },
  { value: "salted-caramel", label: "Salted Caramel", rating: "crazy" }
];

export default class SampleDropdown extends Component {
  state = {
    isClearable: true,
    isDisabled: false,
    isLoading: false,
    isRtl: false,
    isSearchable: true
  };
  componentDidMount() {
    document.getElementById("translate").focus();
  }

  render() {
    const {
      isClearable,
      isSearchable,
      isDisabled,
      isLoading,
      isRtl
    } = this.state;
    return (
      <Fragment>
        <Select
          className="basic-single"
          classNamePrefix="select"
          defaultValue={flavourOptions[0]}
          isDisabled={isDisabled}
          isLoading={isLoading}
          isClearable={isClearable}
          isRtl={isRtl}
          isSearchable={isSearchable}
          name="color"
          options={flavourOptions}
          id="translate"
        />
      </Fragment>
    );
  }
}

And here is a working example in codesandbox. https://codesandbox.io/s/focused-clarke-euk0e

Actual result: When I enter the page, the dropdown does not have the focus. and am not able to read out options in the dropdown using arrow keys in NVDA screenreader.the options are being read out as blank.

Expected result: When I enter the page, the dropdown should have the focus. and the options in the dropdown should be read out when using arrow keys when NVDA screenreader is switched on.

like image 826
Harry Avatar asked Aug 23 '19 07:08

Harry


2 Answers

I looked at using the same library but ran into accessibility issues as well. I ended up building my custom select element and manually handling the key presses, focus movement, and label announcements. If you're stuck on using react-select you'll probably need to amend it yourself or wait for a PR.

Otherwise, if you're up for the challenge, you can follow my tutorial on creating an accessible select component in React. You can pull apart the code on codesandbox as well. This might make it easier to port to the react-select as well.

And of course, I'd also recommend using the native select element, as that will handle accessibility best.

like image 101
Taylor N Avatar answered Oct 03 '22 22:10

Taylor N


Reach UI has accessible components. This Combobox could be of use https://reach.tech/combobox

like image 43
Peter Fields Avatar answered Oct 04 '22 00:10

Peter Fields