fix(react): ensure that no results get announced for NVDA (#1200)

dequelabs · Sep 25, 2023 · 2093334 · 2093334
1 parent 81c13f8
commit 2093334
Showing 1 changed file with 9 additions and 5 deletions.
diff --git a/packages/react/src/components/Combobox/Combobox.tsx b/packages/react/src/components/Combobox/Combobox.tsx
@@ -60,10 +60,14 @@ const defaultAutoCompleteMatches = (inputValue: string, value: string) => {
   return value.toLowerCase().includes(inputValue.toLowerCase());
 };
 
-const ComboboxNoResults = (): JSX.Element => {
+const ComboboxNoResults = ({
+  children
+}: {
+  children?: React.ReactNode;
+}): JSX.Element => {
   return (
-    <div className="ComboboxListbox__empty" aria-live="polite">
-      No results found.
+    <div className="ComboboxListbox__empty" role="alert" aria-live="polite">
+      {children || 'No results found.'}
     </div>
   );
 };
@@ -341,9 +345,9 @@ const Combobox = forwardRef<HTMLInputElement, ComboboxProps>(
     const NoMatchingOptions = React.useMemo(
       () =>
         React.isValidElement(renderNoResults)
-          ? () => renderNoResults
+          ? () => <ComboboxNoResults>{renderNoResults}</ComboboxNoResults>
           : typeof renderNoResults === 'function'
-          ? () => renderNoResults()
+          ? () => <ComboboxNoResults>{renderNoResults()}</ComboboxNoResults>
           : ComboboxNoResults,
       [renderNoResults]
     );