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

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.

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

To ensure that keyboard-only users can still read the that explains why the item is inactive, an icon indicating the inactive state is wrapped in a focusable button.

The button will show text explaining the inactive state in a tooltip when hovered. If a tooltip is not sufficient, a Dialog with even more information can be shown when clicking the button.

Inactive items cannot use a tooltip when rendered in a menu or listbox. See the ActionMenu documentation for more information.