docs: fix annoucement for icon search

dequelabs · Jan 29, 2025 · 5fc0ba8 · 5fc0ba8
1 parent 518bee9
commit 5fc0ba8
Showing 1 changed file with 21 additions and 4 deletions.
diff --git a/docs/components/IconGrid.tsx b/docs/components/IconGrid.tsx
@@ -1,7 +1,8 @@
-import React, { useState, useRef } from 'react';
+import React, { useState, useRef, useEffect } from 'react';
 import {
   Icon,
   iconTypes,
+  IconType,
   TextField,
   Panel,
   Button
@@ -11,6 +12,7 @@ import './IconGrid.css';
 export default function IconGrid() {
   const inputRef = useRef<HTMLInputElement>(null);
   const [searchValue, setSearchValue] = useState('');
+  const [showDelayedAnnouncement, setShowDelayedAnnouncement] = useState(false);
   const filteredTypes = searchValue.trim().length
     ? iconTypes.filter((type: string) =>
         type.includes(searchValue.trim().toLowerCase())
@@ -26,6 +28,17 @@ export default function IconGrid() {
     inputRef.current?.focus();
   };
 
+  const noMatchesFound = filteredTypes.length;
+
+  useEffect(() => {
+    if (noMatchesFound) {
+      // according to the aria spec, status is a live region and only dynamic
+      // changes to content should be announced. We're artificially delaying the
+      // status content in order to ensure this gets announced for AT users
+      setShowDelayedAnnouncement(true);
+    }
+  }, [noMatchesFound]);
+
   return (
     <>
       <TextField
@@ -37,19 +50,23 @@ export default function IconGrid() {
         onChange={handleChange}
       />
       <div className="IconGrid">
-        {filteredTypes.length ? (
+        {!noMatchesFound ? (
           <ul>
             {filteredTypes.map((type: string) => (
               <li className="Panel" key={type}>
-                <Icon type={type} />
+                <Icon type={type as IconType} />
                 <div className="IconGrid__label">{type}</div>
               </li>
             ))}
           </ul>
         ) : (
           <Panel className="IconGrid__NoResults">
             <p role="status">
-              No icon types found matching <strong>"{searchValue}"</strong>.
+              {showDelayedAnnouncement ? (
+                <>
+                  No icon types found matching <strong>"{searchValue}"</strong>.
+                </>
+              ) : null}
             </p>
             <Button variant="secondary" onClick={handleClick}>
               Clear Search