primer / react

An implementation of GitHub's Primer Design System using React
https://primer.style/guides/react
MIT License
3.15k stars 536 forks source link

`ActionList.Leading/TrailingVisual` is invisible to screen readers #4908

Open iansan5653 opened 2 months ago

iansan5653 commented 2 months ago

ActionList renders items as a listitem with a button child. That button is labelled (via aria-labelledby) by the main content of the item.

This means that leading & trailing visuals are totally hidden from screen readers. That's fine when the visuals are purely decorative, but this is not always the case. A visual (particularly a trailing one) can indicate important information, such as:

Hiding this information from screen readers provides users of these tools with a limited experience compared to sighted users.

Possible solutions

Risks

There is a risk here that consumers will have worked around the suppression by adding the context to the main content as visually-hidden text. Shipping a fix for this issue might then cause the context to be read twice.

siddharthkp commented 1 month ago

Leaving notes for triage

iansan5653 commented 1 month ago

👍 LeadingVisual is nearly always decorative and I can't think of any counterexamples. It's theoretically possible it could have useful content (maybe an unread indicator?) but probably not a priority to worry about.