Skip to content

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

@iansan5653

Description

@iansan5653

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.

Metadata

Metadata

Assignees

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions