reactjs - 如何使 react 选择下拉菜单中的选项可访问？

Question

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

我通过官方文档尝试过，但目前还没有成功。

我正在使用的库: react 选择

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

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

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

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

Answer 1

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

否则，如果您愿意接受挑战，可以按照我的教程创建 accessible select component in React.您可以在 codesandbox as well 上拆解代码。这也可能使移植到 react 选择变得更容易。

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