diff --git a/content/components/action-list.mdx b/content/components/action-list.mdx index 9bb87294e..8073a35ed 100644 --- a/content/components/action-list.mdx +++ b/content/components/action-list.mdx @@ -283,6 +283,12 @@ A nav list organizes navigation links for the user's current context and indicat ## Accessibility +### Conveying filter results to assistive technologies + +If an action list 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)](/ui-patterns/loading#filter-results) section of the loading state pattern guidelines. + ### Tooltips and dialogs on inactive items + +
+ +If the user needs to wait for filtering to complete, a screen reader should announce how many results were returned from filtering. For example: "No items match the filter", or "5 items match the filter". + +To ensure that assistive technology is informed about the filter update, put the message in an element that has a `role` of `"status"`. The element with `role="status"` must always be rendered, not just when the message should be announced. + +Implementations of this pattern can be seen in the following examples: +- [Lookbook - Autocomplete](https://view-components-storybook.eastus.cloudapp.azure.com/view-components/lookbook/inspect/primer/alpha/auto_complete/playground) +- [Storybook - ActionList](https://primer.style/react/storybook/?path=/story/components-actionlist-examples--async-list-with-spinner) + +
+ + +
+ ### Preventing partially loaded content from being announced If an `aria-live` region of a page is being updated, set `aria-busy="true"` on the live region until the updates are complete. Then, set `aria-busy="false"`. This prevent assistive technologies from announcing updates until the updates are complete.