-
Notifications
You must be signed in to change notification settings - Fork 640
Closed
Labels
Description
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
KeybindingHintcomponent #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-labelledbyattribute 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-labelledbyattribute 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.