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
- 平均マージ
- 3日 23時間
- マージ済み PR（30日）
- 43
環境構築
- Dockerfile・Docker Compose ファイルなし
- プルリクエストのテンプレートあり
- コントリビューションガイドを読む
はじめの一歩
- issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
- 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
- リポジトリをフォークし、ブランチを切って変更します。
- issue 番号を参照したプルリクエストを送ります。
adobe/react-spectrum のほかの issue
-
S2 quiet Picker menu is always 192px wide: its width calc() has no unit対応中かも @darshpatel1052 が 4 日前に担当しました。 オープン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 が 4 日前に担当しました。 オープン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 が 4 日前に担当しました。 オープン
難易度 2/5 1〜3時間 初心者へのやさしさ 74/100
adobe/react-spectrum#10894 · コメント 2 件 ·
メンテナーはふだん 1 日以内に返信
-
ComboBox with selectionMode="multiple": Cmd/Ctrl+A does nothing while the popover is open対応中かも @mangeshraut712 が 11 日前に担当しました。 オープン
難易度 2/5 1〜3時間 初心者へのやさしさ 76/100
adobe/react-spectrum#10866 ·
メンテナーはふだん 1 日以内に返信
-
useDateSegment crashes for locales whose 12-hour format has no dayPeriod part (e.g. fr-CM)対応中かも @mangeshraut712 が 15 日前に担当しました。 オープン
難易度 2/5 1〜3時間 初心者へのやさしさ 85/100
adobe/react-spectrum#10833 ·
メンテナーはふだん 1 日以内に返信
adobe/react-spectrum の issue をすべて見る
似ている issue
-
bug
難易度 2/5 1〜3時間 初心者へのやさしさ 88/100
メンテナーはふだん 1 日以内に返信
-
pending close triaging
難易度 2/5 1〜3時間 初心者へのやさしさ 78/100
anomalyco/opencode#62582 · コメント 1 件 ·
メンテナーはふだん 1 日以内に返信
-
feature request
難易度 2/5 1〜3時間 初心者へのやさしさ 72/100
callstack/react-native-paper#5189 ·
メンテナーはふだん 1 日以内に返信
-
難易度 2/5 1〜3時間 初心者へのやさしさ 68/100
live-codes/livecodes#1079 · コメント 1 件 ·
メンテナーはふだん 1 日以内に返信
-
Add: ESP 2 ROオープンapproved check:passed streams:add
難易度 2/5 1〜3時間 初心者へのやさしさ 66/100
メンテナーはふだん 1 日以内に返信