Ant Design Select 下拉列表 aria 标签可访问性

Question

我正在尝试为我的下拉列表实现可访问性。我使用了 antd 的 Select 组件。但我的问题是，当我使用键盘向上和向下箭头键在列表框（下拉列表）中导航时，计算机没有读取我传入的 aria 标签，实际上我什至无法通过 aria 标签和 tabIndex进入选项。你知道我该如何解决这个问题吗？

<Select
    showSearch
    style={{ width: 200 }}
    placeholder="Select a person"
    optionFilterProp="children"
    onChange={onChange}
    onFocus={onFocus}
    onBlur={onBlur}
    onSearch={onSearch}
    filterOption={(input, option) =>
      option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
    }
  >
    <div aria-label={"jack"} tabIndex={0}><Option aria-label={"jack"} tabIndex={0} value="jack">Jack</Option>
    <Select.Option aria-label={"lucy"} tabIndex={0} value="lucy">
      Lucy
    </Select.Option>
    <Select.Option aria-label={"tom"} tabIndex={0} value="tom">
      Tom
    </Select.Option>
  </Select>

谢谢

Answer 1

我可能有误解，但在我看来你的解决方案有效。我在以下CodeSandbox 链接中复制了您的组件。

您可以检查下拉列表，aria-labels 确实存在（请参见下面的开发工具图片），并且在我的 Mac 上，VoiceOver 确实会说出每个菜单项的名称。