Skip to content

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

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.

Activity

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

Metadata

Metadata

Assignees

Type

No type

Projects

No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions