aria-required-children 违规: 加载和空状态下,在 role="listbox" 中渲染非选项子元素

□ 总结

Axe报告,在选择反应时,Axe的 " aria-requid-Children " 违反规定,使Axe的加载/空置状态。 违规起源于内部反应 - 选择 的内部标记,而不是消费者代码。

□ 环境

• ** 反应选择版本**:最新版本(5.x)
• ** Axe规则**:[`aria-required-Children'](https://deque University.com/rules/axe/4.11-aria-required-Children)
• ** WCAG标准**: 1.3.1 信息和关系

□ 复制步骤

** 情景1——装载状态:**

1. 以isLoading'和menuIs Open'为代表,将Q'选择(或``Async Celect' /MultiSelect')
2. 以 " axe " 为标价
3. 违规行为:作用='列表框'包含一个状态/加载信息元素,没有任何作用='选择'的儿童

** 假设2——无选项/无结果说明:**

1. 以“菜单打开”和空的“选项”数组,或以不返回匹配的搜索查询,将 QQSelectQQQ 或多选择变量渲染
2. 以 " axe " 为标价
3. 违规:"作用="列表框"中包含"没有选项"/"找不到结果"信息,没有"作用="选项"的儿童.

□ 根源

ARIA spect要求"作用="列表框""必须拥有至少一个"作用="选择""(或"作用="群体"")"的孩子". 反应 - 选择使其装入自旋器和空态消息成为“ role=” 容器内直接装入的“ role= listbox” 元素。 Axe称这是违反儿童规定的行为。

□ 工作(目前适用)

Blockparty(美国第一设计系统)在受影响的组件(MultiSelection',MultiSearchSelection')的故事层面压制这一规则:

时间轴 : // multiSelect.stories.tsx — 无可选故事 无选项.参数={ a11y: { 时间轴 配置 : { 规则:[{ id:`aria-requid-Children',启用:假}], {\fn华文楷体\fs16\1cHE0E0E0} {\fn华文楷体\fs16\1cHE0E0E0}

• ;

//多搜索SearchSelection.stories.tsx — 残废和Loading States故事 已禁用和Loading States.参数={ a11y: { 时间轴 配置 : { 规则:[{ id:`aria-requid-Children',启用:假}], {\fn华文楷体\fs16\1cHE0E0E0} {\fn华文楷体\fs16\1cHE0E0E0}

• ;

//多搜索SearchSelection.stories.tsx-无成果故事. 无结果.参数={ a11y: { 时间轴 配置 : { 规则:[ { / 反应- 选择让“ 找不到结果 ” 角色内置=“ listbox” 不包含 //角色=没有匹配结果的"选择"孩子. // 上游轨道:https://GitHub.com/JedWatson/ react-select/issues/XXXX. id: 'aria-requid- children', 日语:"aria-requid- children" (日语:"aria-requid- children"), 日语:日语:日语:日语:日语:日语:日语:日语:日语:日语:日语:日语:日语:日语:日语:日语:日语:日语:日语:日语:日语:日出地:日出地:日出地出地出地出地出地出地出地出地出地出地出地出地出地出地出地出地出地出地出地出地出地出地出地出地出地出地出地出地出地出地出地出地出地出地出地出地出地出地出地出地出地出地出地出地出地出地出地出地出地出地出地出地出地出地出地出地出地出地出地出地出地出地出地出地出地 启用: 虚假, {\fn华文楷体\fs16\1cHE0E0E0} [ {\fn华文楷体\fs16\1cHE0E0E0} {\fn华文楷体\fs16\1cHE0E0E0}

• ;

□问

反应选择会考虑使用`作用='选项'将装入/空态消息与`aria-disable=' true'合并,还是将它们置于列表框之外的单独的`作用='状态'活区? 这两种方法都符合轴规则,并提供更好的屏幕阅读体验。

如果有固定的或建议的模式,我们将去除阻断方中的抑制.