如何使 react-select 下拉列表中的选项可访问？

Question

我正在构建一个reactjs应用程序，我正在使用一个名为react-select的库作为可搜索的下拉列表。但我面临的问题是，使用箭头键时，NVDA 屏幕阅读器没有读出select 中的选项。并且无法设置焦点由于某种原因放在此下拉列表上。

我通过官方文档进行了尝试，但到目前为止还没有运气。

我正在使用的库： React-select

https://react-select.com/home

编码：

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>
    );
  }
}

这是 codeandbox 中的一个工作示例。 https://codesandbox.io/s/focused-clarke-euk0e

实际结果：当我进入页面时，下拉列表没有焦点。并且无法在 NVDA 屏幕阅读器中使用箭头键读出下拉列表中的选项。选项被读出为空白。

预期结果：当我进入页面时，下拉菜单应该有焦点。并且在 NVDA 屏幕阅读器打开时使用箭头键时应读出下拉列表中的选项。

Answer 1

我考虑过使用相同的库，但也遇到了可访问性问题。我最终构建了自定义选择元素并手动处理按键、焦点移动和标签公告。如果你坚持使用react-select，你可能需要自己修改它或等待 PR。

否则，如果您准备好迎接挑战，可以按照我的教程在 React 中创建可访问的选择组件。您也可以在codesandbox 上拆分代码。这也可能使移植到反应选择变得更容易。

当然，我还建议使用本机选择元素，因为这将最好地处理可访问性。