如何使 react-select 下拉菜单中的选项可访问？答案

【问题标题】：How to make the options in react-select dropdown accessible?如何使 react-select 下拉菜单中的选项可访问？
【发布时间】：2019-08-23 07:49:42
【问题描述】：

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

我通过官方文档尝试过，但目前没有运气。

我正在使用的库： 反应选择

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

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

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

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

【问题讨论】：

我想你可以关注这个未解决的问题并推动它github.com/JedWatson/react-select/issues/3691
我在 react-select 中的选项似乎读作“空白”，为 react-select 打开的可访问性错误似乎是为了自定义可访问性消息。所以它似乎是一个不同的错误。但感谢你让我注意到这个错误，劳拉
我在代码沙箱中尝试了一个演示，选项读出“空白”，然后读出为以选项为中心。但我不明白为什么我的项目中没有重点关注的选项。
我尝试过的任何 react-select 组件上的 Voice Over 应用程序都没有这个问题。所有选项都得到了很好的描述。我怀疑这与您如何在代码中使用您的代码有关，而不仅仅是您在上面声明它的方式。
海劳拉，感谢您的回复。我直接从上面的代码沙箱中复制粘贴的代码，它仍然无法正常工作。但在代码沙箱中它可以工作，（它读出“空白”，然后是选项集中）在 NVDA 中。但是当它在我的项目中时，它不会读出重点选项。它只是显示为空白。如果您知道为什么会出现此错误，请告诉我并再次感谢

标签： reactjs accessibility react-select

【解决方案1】：

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

否则，如果您准备好迎接挑战，可以按照我的教程创建accessible select component in React. 您可以在codesandbox as well 上拆开代码。这也可能使移植到 react-select 变得更容易。

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

【讨论】：

感谢 Taylor 回复此问题，但我想要一个可访问的可搜索下拉列表，如果您找到任何内容，请告诉我。再次感谢。

【解决方案2】：

Reach UI 具有可访问的组件。这个组合框可能有用https://reach.tech/combobox

【讨论】：