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

packages/grafana-ui/src/components/EmptyState/EmptyState.mdx

@@ -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.

packages/grafana-ui/src/components/EmptyState/EmptyState.tsx

@@ -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">

public/app/features/browse-dashboards/components/SearchView.tsx

@@ -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>
     );

public/app/features/commandPalette/CommandPalette.tsx

@@ -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}