patternfly / patternfly/patternfly-react
DescriptionList - heading level and heading element invalid in examples
还没有人认领这个 Issue。
- 主要语言
- TypeScript
- 星标
- 862
- 派生
- 392
- 平均合并
- 4 天 8 小时
- 30 天内合并 PR
- 9
描述
Describe the problem
This ranges from example code update to component update:
-
For the Popover that triggers when clicking the term help text, the heading level is not correct for where it is rendered in the DOM. Either the heading should be an
h1element, or the Popover needs to be appended in a way that the currenth6is correct. -
For the Popover that triggers when clicking the term help text, axe complains about multiple banner landmarks. This is due to the Popover being appended to the document body and outside the
mainelement; whenever aheaderis rendered outside of it, it becomes a banner landmark. Some ways to fix this could be:- update the element to a plain div
- change where the Popover is appended (could also help resolve the first issue above)
- since the Popover traps focus and has attributes similar to a Modal, all other content on the page gets set to aria-hidden="true", similar behavior to the Modal component. This might be an issue since we don't render a Backdrop for Popover like we do for Modal, though, so it may not be totally clear that content outside the Popover cannot be interacted with. Also, unlike Modal, you can click outside the Popover to close it, which may not make the
aria-modal="true"attribute totally correct.
How do you reproduce the problem?
Provide steps to reproduce. A codesandbox demonstrating the problem is appreciated.
Expected behavior
A clear and concise description of the expected behavior.
Is this issue blocking you?
List the workaround if there is one.
Screenshots
If applicable, add screenshots to help explain the issue.
What is your environment?
- OS: [e.g. iOS]
- Browser [e.g. chrome, safari]
- Version [e.g. 22]
What is your product and what release date are you targeting?
Any other information?
Jira Issue: PF-1132
贡献指南
从这里开始
- 先读完整个 Issue,再读项目的贡献指南。
- 在 Issue 下留言说明你要接手 —— 这能避免两个人做同样的事。
- Fork 仓库,在一个分支上完成修改。
- 提交 Pull Request,并在描述里引用这个 Issue 编号。
调研方向
从链接的 CodeSandbox 开始,检查 DescriptionList 示例以及根据 term 帮助文本渲染的 Popover。检查生成的 DOM 和 axe 检测结果,然后在保留 Popover 已记录行为的同时,解决标题级别和多个 banner landmark 的问题;更新受影响的示例,并验证可访问性检查通过。
由索引模型根据 Issue 内容生成。
评估
- 技术栈
- react, typescript
- 领域
- accessibility, frontend
- Issue 类型
- 缺陷
- 难度
- 4/5
- 预计耗时
- 3-5 天
- 活跃度
- 停滞
- 描述清晰度
- 需要澄清
- 新手友好度
- 35/100