Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
iansan5653 opened this issue Sep 3, 2024 · 2 comments
Open

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

iansan5653 opened this issue Sep 3, 2024 · 2 comments
Assignees

Comments

@iansan5653
Copy link
Contributor

iansan5653 commented Sep 3, 2024

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:

  • A keyboard shortcut (ref Add KeybindingHint component #4750 (comment))
  • A link vs an action
  • Links that open in new tabs
  • Links to external sites
  • Actions that initiate downloads
  • Favorited / emphasized items
  • The state of an item
  • An item count

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

Possible solutions

  • Add the leading and trailing visuals to the aria-labelledby attribute so they are included in the label. If they are unlabeled icons this should have no effect.
  • Build a fully custom label string with the leading and trailing visuals, allowing us to include a separator for punctuation
  • Remove the aria-labelledby attribute entirely so the button label is built from its contents as normal, automatically accounting for any text in the visuals

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
Copy link
Member

siddharthkp commented Sep 16, 2024

Leaving notes for triage

@iansan5653
Copy link
Contributor Author

👍 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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

3 participants