Search: Announce to screen reader when query returns no result (#87382)

* Add alert role to not-found variant

* Provide role prop and apply for two cases
This commit is contained in:
Tobias Skarhed 2024-05-22 14:15:56 +02:00 committed by GitHub
parent 38fdfe43f5
commit fb1acb45a2
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 15 additions and 3 deletions

View File

@ -66,6 +66,8 @@ import { EmptyState } from '@grafana/ui';
<EmptyState variant="not-found" message="No playlists found" />;
```
If the empty state is rendered as you are typing in a search box, use the `role="alert"` prop to announce the empty state to screen readers. Verify that the use case makes sense, as this approach may be very disruptive if used the wrong way.
### `variant="completed"`
For when a user has completed all tasks on a page, such as reading all their notifications.

View File

@ -1,5 +1,5 @@
import { css } from '@emotion/css';
import React, { ReactNode } from 'react';
import React, { AriaRole, ReactNode } from 'react';
import SVG from 'react-inlinesvg';
import { GrafanaTheme2 } from '@grafana/data';
@ -31,6 +31,10 @@ interface Props {
* Which variant to use. Affects the default image shown.
*/
variant: 'call-to-action' | 'not-found' | 'completed';
/**
* Use to set `alert` when needed. See documentation for the use case
*/
role?: AriaRole;
}
export const EmptyState = ({
@ -40,12 +44,13 @@ export const EmptyState = ({
message,
hideImage = false,
variant,
role,
}: React.PropsWithChildren<Props>) => {
const styles = useStyles2(getStyles);
const imageToShow = image ?? getDefaultImageForVariant(variant);
return (
<Box paddingY={4} display="flex" direction="column" alignItems="center">
<Box paddingY={4} display="flex" direction="column" alignItems="center" role={role}>
<div className={styles.container}>
{!hideImage && imageToShow}
<Stack direction="column" alignItems="center">

View File

@ -97,6 +97,7 @@ export function SearchView({ width, height, canSelect }: SearchViewProps) {
}
message={t('browse-dashboards.no-results.text', 'No results found for your query')}
variant="not-found"
role="alert"
/>
</div>
);

View File

@ -121,7 +121,11 @@ const RenderResults = ({ isFetchingSearchResults, searchResults }: RenderResults
const showEmptyState = !isFetchingSearchResults && items.length === 0;
return showEmptyState ? (
<EmptyState variant="not-found" message={t('command-palette.empty-state.message', 'No results found')} />
<EmptyState
variant="not-found"
role="alert"
message={t('command-palette.empty-state.message', 'No results found')}
/>
) : (
<KBarResults
items={items}