ActionList

ActionList is a vertical list of interactive actions or options. It's composed of items presented in a consistent, single-column format, with room for icons, descriptions, side information, and other rich visuals.

Page navigation navigation

Conveying filter results to assistive technologies

If an ActionList is being used to display a filtered list of options, a screen reader should announce when filtering is completed.

For more information, see the conveying status (filter results) section of the loading state pattern guidelines.

Tooltips and Dialogs on inactive items

If an ActionList item is inactive, it will no longer be an <a> or <button>, so it will not be focusable.

Having a tooltip on the leading visual is the only way to distinguish between the inactive items, and for keyboard-only screen reader users, it's the only way to see these are inactive.

The tooltip and optional Dialog should be triggered by a button element that wraps the leading visual.

An ActionList with the first item in an inactive state. There is an annotation with HTML markup showing an SVG element wrapped in a button element.Edit in Figma