PreviewTrigger: the preview dialog has no accessible name
维护者通常 1 天内回复
@therealemmanueloppong 已经在做这个了。
开始于 2026年11月5日。
评估
- 难度
- 2/5
- 预计耗时
- 1-3 小时
- 新手友好度
- 76/100
- Issue 类型
- 缺陷
- 描述清晰度
- 描述清楚
- 活跃度
- 活跃
- 技术栈
- react, typescript
调研方向
从usePreviewTrigger开始，issue指出popoverProps在此处组装，并将其标签行为与useDialog进行比较。检查PreviewTrigger的现有测试以及对话框无障碍功能的测试。完成标准是：预览对话框默认将其触发器的 id 设为aria-labelledby，而显式传入的aria-label或aria-labelledby props 优先，并且测试覆盖该行为。
由索引模型根据 Issue 内容生成。
描述
Provide a general summary of the issue here
The popover of a PreviewTrigger renders role="dialog" with no accessible name. axe reports aria-dialog-name (serious).
🤔 Expected Behavior?
The preview dialog is named by its trigger, as a Dialog inside a DialogTrigger is: aria-labelledby points to the trigger's id when the app gives no aria-label or aria-labelledby.
😯 Current Behavior
Popoversetsrole="dialog"whentrigger === 'PreviewTrigger'. It takes its name only from its ownaria-labelandaria-labelledbyprops.usePreviewTriggerreturnspopoverPropswithid,onFocusWithinandonBlurWithin: noaria-labelledby.- A screen reader that moves into the preview hears an unnamed dialog.
💁 Possible Solution
In usePreviewTrigger, give the trigger an id and return 'aria-labelledby': triggerId in popoverProps, overridden by an aria-label or aria-labelledby passed to the Popover. This is what useDialog does with the DialogTrigger id.
🔦 Context
We wrap PreviewTrigger as a hover card in a design system. Until then, our hover card makes aria-label required.
🖥️ Steps to Reproduce
- Render
<PreviewTrigger><Link href="/item">Item</Link><Popover><p>Summary</p></Popover></PreviewTrigger>. - Focus the link and wait for the preview.
- Run axe, or inspect the popover:
role="dialog", noaria-label, noaria-labelledby.
Version
react-aria-components 1.22.1
What browsers are you seeing the problem on?
Chrome
What operating system are you using?
macOS
- 主要语言
- TypeScript
- 星标
- 16k
- 派生
- 1.6k
- 平均合并
- 4 天 3 小时
- 30 天内合并 PR
- 39
环境准备
- 没有 Dockerfile 或 Docker Compose 文件
- 有 Pull Request 模板
- 阅读贡献指南
从这里开始
- 先读完整个 Issue，再读项目的贡献指南。
- 在 Issue 下留言说明你要接手 —— 这能避免两个人做同样的事。
- Fork 仓库，在一个分支上完成修改。
- 提交 Pull Request，并在描述里引用这个 Issue 编号。
adobe/react-spectrum 的其他 Issue
-
难度 2/5 1-3 小时 新手友好度 76/100
adobe/react-spectrum#10940 ·
维护者通常 1 天内回复
-
@internationalized/number: NumberParser misparses Arabic-digit numbers that use . , or ، (sd parses ١٬٢٣٤.٥ as 12345)可能已有人在做 @itsrayeedscodespace 于 1 天前认领。 未关闭
难度 2/5 1-3 小时 新手友好度 78/100
adobe/react-spectrum#10936 · 3 条评论 ·
维护者通常 1 天内回复
-
S2 quiet Picker menu is always 192px wide: its width calc() has no unit可能已有人在做 @darshpatel1052 于 6 天前认领。 未关闭waiting on author
难度 2/5 1 小时以内 新手友好度 88/100
adobe/react-spectrum#10909 · 3 条评论 ·
维护者通常 1 天内回复
-
DatePicker omits timezone for initially empty fields despite zoned placeholderValue可能已有人在做 @mrlexcoder 于 6 天前认领。 未关闭bug
难度 2/5 1-3 小时 新手友好度 68/100
adobe/react-spectrum#10900 · 2 条评论 ·
维护者通常 1 天内回复
-
Separator adds a redundant role="separator" to its default <hr>可能已有人在做 @Janani-bn 于 6 天前认领。 未关闭
难度 2/5 1-3 小时 新手友好度 74/100
adobe/react-spectrum#10894 · 2 条评论 ·
维护者通常 1 天内回复
查看 adobe/react-spectrum 的全部 Issue
相似的 Issue
-
area:models enhancement
难度 2/5 1-3 小时 新手友好度 76/100
维护者通常 1 天内回复
-
bug frontend ui
难度 2/5 1-3 小时 新手友好度 68/100
维护者通常 1 天内回复
-
Recording drops clicks on links, filters and checkboxes that share a form with a search field可能已有人在做 @columbia11 今天认领。 未关闭
难度 2/5 1-3 小时 新手友好度 75/100
Tencent/BrowserSkill#657 ·
维护者通常 1 天内回复
-
难度 2/5 1-3 小时 新手友好度 84/100
NousResearch/hermes-agent#151711 ·
维护者通常 1 天内回复
-
难度 1/5 1 小时以内 新手友好度 65/100
维护者通常 2 天内回复