Tabs - State and A11y errors
@fermarinsanchez 已经在做这个了。
开始于 2025年6月17日。
评估
这个 Issue 还没有评估数据。
描述
Describe the bug
-
A11y Error: The hardcoded tab-index value at the tabcontent level is causing accessibility issues because it is automatically taking focus when tabbing through the content. Focus delegation should occur at the child level. For example, when there is a list of buttons as children, the focus currently lands on the tabcontent itself on the first tab press, instead of on the first focusable element, which should be the first button.
-
State Error: The activeKey is not reactive to changes; it always takes the first value on component mount and only responds to clicks. You cannot change the activeKey from outside the component and have it activate the corresponding tab passed via props. The internal state causes the component to take a value only during initialization, and it can only be changed either by forcing a component unmount or through a click event. This behavior is problematic because, in order to achieve the desired functionality, we are forced to unmount the component, which results in losing the scroll position of the tabs, for example.
To Reproduce
Steps to reproduce the behavior:
A11y Error:
- Go to Tabs component
- Click on tab keyboard
- you can see that the content is focus
State Error:
- Go to Tabs component
- Change the activeKey in code
- you can see the selected tab not change
Expected behavior
A11y Error: The tab content should not have a hardcoded tabindex; instead, it should allow its children to control focus behavior.
State Error:We should be able to change the activeKey reactively without having to force a component unmount.
Screenshots
A11y Error:
-Code screenshot:
-Issue screenshot:
State Error:
Desktop (please complete the following information):
- OS: All
- Browser All
- Version All
Smartphone (please complete the following information):
- Device: All
- OS: All
- Browser All
- Version All
Additional context
Add any other context about the problem here.
git checkout release/1.1.0
git pull
git checkout -b 'fix/tabs-state-a11y'
- 主要语言
- TypeScript
- 星标
- 120
- 派生
- 6
- PR 合并指标
- 30 天内没有已合并 PR
环境准备
- 没有 Dockerfile 或 Docker Compose 文件
- 没有 Pull Request 模板
- 阅读贡献指南
从这里开始
- 先读完整个 Issue，再读项目的贡献指南。
- 在 Issue 下留言说明你要接手 —— 这能避免两个人做同样的事。
- Fork 仓库，在一个分支上完成修改。
- 提交 Pull Request，并在描述里引用这个 Issue 编号。
Capgemini/dcx-react-library 的其他 Issue
-
`Autocomplete` — hardcoded inline styles cannot be overridden by external CSS可能重新可做 @Ibabalola 于 125 天前认领，目前没有进行中的 PR。 未关闭enhancement
Capgemini/dcx-react-library#707 · 已指派 1 人 ·
-
design-system
难度 5/5 一周以上 新手友好度 10/100
Capgemini/dcx-react-library#686 ·
-
Tabs - Design System可能重新可做 @jgonza16 于 806 天前认领，目前没有进行中的 PR。 未关闭design-system
Capgemini/dcx-react-library#685 · 已指派 1 人 ·
-
design-system
难度 4/5 3-5 天 新手友好度 35/100
Capgemini/dcx-react-library#684 ·
-
Breadcrumb - Design System可能重新可做 @fermarinsanchez 于 513 天前认领，目前没有进行中的 PR。 未关闭design-system
Capgemini/dcx-react-library#683 · 已指派 1 人 ·
查看 Capgemini/dcx-react-library 的全部 Issue
相似的 Issue
-
难度 2/5 1-3 小时 新手友好度 66/100
riverqueue/river#1576 ·
维护者通常 1 天内回复
-
[bug] A prompt queued during a run is assessed without its text可能已有人在做 @jwiegley 今天认领。 未关闭
难度 2/5 1-3 小时 新手友好度 72/100
DevMortimer/pi-warden#211 ·
维护者通常 1 天内回复
-
enhancement
难度 1/5 1 小时以内 新手友好度 84/100
mattermost/compass-design#191 ·
维护者通常 1 天内回复
-
Add unit tests for the organization admin role check可能已有人在做 @SaffuSafwan 今天认领。 未关闭area/core good first issue help wanted
难度 1/5 1 小时以内 新手友好度 90/100
维护者通常 1 天内回复
-
难度 2/5 1-3 小时 新手友好度 62/100
HorusGoul/trizum#559 · 1 条评论 ·
维护者通常 1 天内回复