@planningcenter/topbar 12.4.1-qa-981.0 → 12.4.1-qa-983.0

package/dist/topbar.js

@@ -3362,6 +3362,25 @@ function SearchButton({
   }));
 }
 
+// With the search's own debounce, about 1.4 seconds after the last keystroke,
+// as in GOV.UK's accessible-autocomplete.
+const ANNOUNCEMENT_DELAY_MS = 1100;
+// Screen readers echo typing themselves, as each person has set them to, so
+// the message waits until typing settles instead of talking over it. Waiting
+// also lets VoiceOver finish what focus had to say, since it often skips a
+// change made as focus moves, as when a tab with cached results is selected,
+// and only the tab someone stops on when arrowing through them is announced.
+// The region empties at once, so a message that comes back is read again.
+function useAnnouncement(message) {
+  const [announcement, setAnnouncement] = React.useState(null);
+  React.useEffect(() => {
+    setAnnouncement(null);
+    const timeout = setTimeout(() => setAnnouncement(message), ANNOUNCEMENT_DELAY_MS);
+    return () => clearTimeout(timeout);
+  }, [message]);
+  return announcement;
+}
+
 // useId isn't available on React 17, which our peer range still supports.
 let instanceCount$1 = 0;
 function useInstanceId(prefix) {
@@ -4962,7 +4981,6 @@ function ProductTabs({
     role: "tablist"
   }, products.map(product => (/*#__PURE__*/React.createElement(Tab, {
     "aria-controls": `${id}-panel`,
-    "aria-describedby": `${tabId(product.slug)}-description`,
     "aria-selected": product === selected,
     id: tabId(product.slug),
     key: product.slug,
@@ -4980,11 +4998,6 @@ function ProductTabs({
   }), showAllNames || product === selected ? product.appName : (/*#__PURE__*/React.createElement("span", {
     className: styles$k.visuallyHidden
   }, product.appName)))))), /*#__PURE__*/React.createElement("div", {
-    className: styles$k.visuallyHidden
-  }, products.map(product => (/*#__PURE__*/React.createElement("span", {
-    id: `${tabId(product.slug)}-description`,
-    key: product.slug
-  }, "Planning Center ", product.appName)))), /*#__PURE__*/React.createElement("div", {
     "aria-labelledby": tabId(selected.slug),
     className: styles$k.panel,
     id: `${id}-panel`,
@@ -6079,9 +6092,9 @@ function SearchResults({
       });
     case "done":
       if (sections.length === 0) {
+        // The panel's result count announces this, so it isn't read twice.
         return /*#__PURE__*/React.createElement(BlankState$1, {
           image: /*#__PURE__*/React.createElement(BlankStateNoResults, null),
-          role: "status",
           subtitle: "Clear search and try again.",
           title: `No results for “${term.trim()}”`
         });
@@ -6135,6 +6148,7 @@ function SearchPanel({
     highlightedIndex
   } = navigation;
   const inputRef = React.useRef(null);
+  const resultCount = useAnnouncement(hasTerm && search.status === "done" ? `${items.length === 0 ? "No results" : `${items.length} ${items.length === 1 ? "result" : "results"}`} for “${term.trim()}” in ${product.appName}` : null);
   const [announceHighlight, setAnnounceHighlight] = React.useState(false);
   // The tabs keep focus while arrowing through results, but only the focused
   // input can point screen readers at the highlight, so from the tabs it's
@@ -6193,7 +6207,7 @@ function SearchPanel({
     "aria-live": "polite",
     className: styles$k.visuallyHidden,
     "data-testid": "result-count"
-  }, hasTerm && search.status === "done" && items.length > 0 ? `${items.length} ${items.length === 1 ? "result" : "results"} for “${term.trim()}” in ${product.appName}` : null), mobile ? null : /*#__PURE__*/React.createElement(KeyboardHints, {
+  }, resultCount), mobile ? null : /*#__PURE__*/React.createElement(KeyboardHints, {
     copied: navigation.copied
   }));
 }