[preview card] Support accessible preview content for screen readers
- Dominant language
- TypeScript
- Stars
- 10.9k
- Forks
- 543
- Avg merge
- 1d 20h
- Merged PRs (30d)
- 101
Description
## Summary
> [!Note]
> This has been raised again in the a11y Slack so adding ticket to discuss
`PreviewCard` opens visually when its link is hovered or receives keyboard focus, but the preview is deliberately unavailable to screen reader users. The [current usage guidance](https://base-ui.com/react/components/preview-card#usage-guidelines) describes it as an enhancement for sighted users only.
[React Aria's `PreviewTrigger`](https://react-aria.adobe.com/PreviewTrigger) demonstrates an interaction model for the same pattern which we could use as a behavioral reference.
Related: #4170 documented the limitation and treated the existing behavior as expected. This issue revisits that conclusion.
Contributor guide
Research direction
Start with the PreviewCard usage guidance and related issue #4170 to understand the existing accessibility limitation, then compare the interaction model in React Aria's PreviewTrigger. Done means PreviewCard content is available to screen reader users while retaining the documented hover and keyboard-focus behavior.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- accessibility, frontend
- Issue type
- Feature
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Active
- Clarity
- Mostly clear
- Newbie friendliness
- 52/100