aria-invalid is not supported on handles
还没有人认领这个 Issue。
评估
- 难度
- 2/5
- 预计耗时
- 1-3 小时
- 新手友好度
- 90/100
- Issue 类型
- 功能
- 描述清晰度
- 描述清楚
- 活跃度
- 活跃
- 技术栈
- react, typescript
调研方向
首先追踪 Slider 如何将无障碍属性传递给各个滑块手柄，尤其是现有的 ariaRequired 和手柄专用的 ariaDescribedByForHandle 处理方式。添加一个布尔属性 ariaInvalid，使它在每个手柄上呈现 aria-invalid。完成意味着该属性能够传递到每个手柄，并且其预期类型、行为和无障碍测试覆盖均已验证。
由索引模型根据 Issue 内容生成。
描述
A handle (role="slider") can be given aria-label, aria-labelledby, aria-describedby (#1088), aria-required and aria-valuetext, but not aria-invalid. WAI-ARIA 1.2 supports aria-invalid on the slider role, and it is how a screen reader learns that a field's value failed validation. Without it, a form can show a slider's error only visually.
Slider drops the aria-* props it is given, and the handle takes nothing beyond its own props, so the only way to set it is to change the DOM after render, the workaround #1040 described for aria-describedby.
antd shows the gap. Form.Item passes aria-invalid, aria-describedby and aria-required to its child control. An Input gets all three, but Slider drops them (antd 6.6.6, @rc-component/slider 1.1.1):
<Form fields={[{ name: ['name'], errors: ['Too short'] }, { name: ['volume'], errors: ['Too quiet'] }]}>
<Form.Item name="name" label="Name" required extra="Your name">
<Input />
</Form.Item>
<Form.Item name="volume" label="Volume" required extra="How loud">
<Slider />
</Form.Item>
</Form>
renders, with class and style left out:
<input id="name" aria-describedby="name_help name_extra" aria-required="true" type="text" value="" aria-invalid="true">
<div tabindex="0" role="slider" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0" aria-disabled="false"
aria-orientation="horizontal"></div>
Could the slider take an ariaInvalid?: boolean prop alongside ariaRequired, rendered as aria-invalid on each handle? antd could then pass it through as it did ariaDescribedByForHandle (ant-design/ant-design#59110), and its Slider could give the handle the aria-invalid, aria-describedby and aria-required that Form.Item hands it.
We hit this in react-jsonschema-form's antd theme, which can't mark its slider invalid: rjsf-team/react-jsonschema-form#5560.
- 主要语言
- TypeScript
- 星标
- 3.1k
- 派生
- 766
- PR 合并指标
- 30 天内没有已合并 PR
环境准备
这个项目没有提供开发容器、Dockerfile 或贡献指南，环境需要你自己搭建：先看它的 README，通用步骤见我们的新手贡献指南。
从这里开始
- 先读完整个 Issue，再读项目的贡献指南。
- 在 Issue 下留言说明你要接手 —— 这能避免两个人做同样的事。
- Fork 仓库，在一个分支上完成修改。
- 提交 Pull Request，并在描述里引用这个 Issue 编号。
react-component/slider 的其他 Issue
-
难度 2/5 1-3 小时 新手友好度 68/100
react-component/slider#1067 · 1 条评论 ·
-
难度 4/5 3-5 天 新手友好度 30/100
react-component/slider#1064 ·
-
难度 3/5 1-2 天 新手友好度 35/100
react-component/slider#1061 ·
-
当Slider宽度超过外层容器时，点击Slider，滚动条位置异常可能已有人在做 @nrps9909 于 51 天前认领。 未关闭
难度 3/5 1-2 天 新手友好度 45/100
react-component/slider#1060 ·
-
难度 2/5 1-3 小时 新手友好度 42/100
react-component/slider#1058 · 1 条评论 ·
查看 react-component/slider 的全部 Issue
相似的 Issue
-
难度 2/5 1-3 小时 新手友好度 74/100
维护者通常 1 天内回复
-
难度 2/5 1-3 小时 新手友好度 65/100
OpenPetsHQ/openpets#273 ·
维护者通常 1 天内回复
-
难度 2/5 1-3 小时 新手友好度 76/100
fritzprix/libr-agent#2161 ·
维护者通常 1 天内回复
-
难度 2/5 1-3 小时 新手友好度 83/100
blackboardsh/electrobun#581 ·
-
backlog-skill effort:xs frontend infra ready-for-agent
难度 2/5 1-3 小时 新手友好度 74/100
LucasSantana-Dev/Lucky#2862 ·
维护者通常 1 天内回复