PreviewTrigger: the preview dialog has no accessible name

Đang mở Phù hợp với người mới
  • Có gì không ổn?
#10,917 3 bình luận 0 reaction 0 người được giao Xem trên GitHub

Maintainer thường phản hồi trong vòng 1 ngày

@therealemmanueloppong đang làm issue này rồi.

Từ ngày 5/11/2026.

Đánh giá

Độ khó
2/5
Thời gian dự kiến
1-3 giờ
Mức phù hợp với người mới
76/100
Loại issue
Lỗi
Độ rõ ràng
Đặc tả rõ ràng
Mức độ hoạt động
Sôi nổi
Công nghệ
react, typescript
Lĩnh vực
accessibility, frontend

Hướng nghiên cứu

Bắt đầu ở usePreviewTrigger, nơi issue cho biết popoverProps được tập hợp, và so sánh hành vi gắn nhãn của nó với useDialog. Kiểm tra các bài kiểm thử hiện có cho PreviewTrigger và khả năng truy cập của hộp thoại. Công việc hoàn tất khi hộp thoại xem trước mặc định nhận id của nút kích hoạt làm aria-labelledby, trong khi các props aria-label hoặc aria-labelledby được chỉ định rõ sẽ được ưu tiên, và các bài kiểm thử bao quát hành vi này.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.

Mô tả

accessibility bug PreviewTrigger
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
  • Popover sets role="dialog" when trigger === 'PreviewTrigger'. It takes its name only from its own aria-label and aria-labelledby props.
  • usePreviewTrigger returns popoverProps with id, onFocusWithin and onBlurWithin: no aria-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
  1. Render <PreviewTrigger><Link href="/item">Item</Link><Popover><p>Summary</p></Popover></PreviewTrigger>.
  2. Focus the link and wait for the preview.
  3. Run axe, or inspect the popover: role="dialog", no aria-label, no aria-labelledby.
Version

react-aria-components 1.22.1

What browsers are you seeing the problem on?

Chrome

What operating system are you using?

macOS

Ngôn ngữ chính
TypeScript
Star
16k
Fork
1.6k
Merge trung bình
4 ngày 3 giờ
Pull request đã merge (30 ngày)
39

Chuẩn bị môi trường

Bắt đầu từ đâu

  1. Đọc hết issue, rồi đọc hướng dẫn đóng góp của dự án.
  2. Bình luận trên issue rằng bạn sẽ nhận — tránh hai người làm cùng một việc.
  3. Fork repository và làm thay đổi trên một nhánh.
  4. Mở pull request có tham chiếu số hiệu của issue.

Issue khác của adobe/react-spectrum

Tất cả issue của adobe/react-spectrum

Issue tương tự

Thêm issue về TypeScript

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.