0

我已经使用 React Suite创建了DateRangePicker ,并获得了有关Lighthouse 可访问性评分的以下信息。

[role]s do not have all required [aria-*] attributes

用法

import { DateRangePicker } from 'rsuite';
const instance = <DateRangePicker />;
ReactDOM.render(instance);

可运行片段

aria-*我缺少选择器的哪些必需属性?

在此处输入图像描述

4

1 回答 1

1

简答

它丢失了aria-expandedaria-owns

更长的答案

因为你有role="combobox"几个预期的aria属性来指示状态和关系。

咏叹调扩展

这需要让用户知道组合框当前是打开还是aria-expanded="true"关闭aria-expanded="false"

咏叹调拥有

我还希望看到 anaria-owns来指示<input>(这很棘手,因为他们实际上似乎不使用 an <input>,除非我遗漏了一些东西)和日期选择器模式/弹出/面板/无论你怎么称呼它!

其他事情

在示例中,他们没有给出任何键盘可访问的内容。您无法使用 等打开日期选择enterspace

整个日期选择器小部件应该可以通过键盘、updown、等进行控制,但事实并非如此leftright

也许我遗漏了一些东西,但我的直接反应是,这根本无法访问,你最好找到另一个组件,仅仅因为它“通过”自动化测试并不总是意味着它适合目的,用屏幕试试阅读器,看看你是否可以使用它。

于 2020-07-09T08:30:17.727 回答