patternfly / patternfly/patternfly-react
Tooltips for disabled radio and checkbox
还没有人认领这个 Issue。
- 主要语言
- TypeScript
- 星标
- 862
- 派生
- 392
- 平均合并
- 4 天 8 小时
- 30 天内合并 PR
- 9
描述
For a tooltip to be accessible for keyboard-only users, the element with the tooltip needs to be able to receive keyboard focus. Elements like <button> that support the disabled attribute cannot receive keyboard focus.
To continue to render these elements as disabled but enable keyboard focus, the following changes are needed:
-
Remove
disabled -
Add
aria-disabled="true" -
Make sure the
pf-m-disabledclass or similar is included on the element to apply the disabled styling. -
If the element is a link, remove
tabindex="-1"
We should update all interactive elements to include a prop that allows the consumer to make the element disabled but focusable so the element can be used with the Tooltip component. This prop should apply the appropriate attributes and classes for the given element.
Unless someone has a better suggestion, the prop could be named isDisabledFocusable (totally open to suggestions on this one)
Jira Issue: PF-208
贡献指南
从这里开始
- 先读完整个 Issue,再读项目的贡献指南。
- 在 Issue 下留言说明你要接手 —— 这能避免两个人做同样的事。
- Fork 仓库,在一个分支上完成修改。
- 提交 Pull Request,并在描述里引用这个 Issue 编号。
调研方向
首先检查渲染禁用控件的交互元素以及 Tooltip 组件。盘点受影响的按钮、链接、单选按钮和复选框,然后验证每个元素在视觉上保持禁用状态的同时仍能接收键盘焦点。当受影响的元素能够一致地提供所要求的 focusable-disabled 行为,且不丢失禁用样式时,即表示完成。
由索引模型根据 Issue 内容生成。
评估
- 技术栈
- react, typescript
- 领域
- accessibility, frontend
- Issue 类型
- 功能
- 难度
- 4/5
- 预计耗时
- 3-5 天
- 活跃度
- 冷清
- 描述清晰度
- 基本清楚
- 新手友好度
- 48/100