@transferwise/components 0.0.0-experimental-76c1faf → 0.0.0-experimental-4409807

package/src/inputs/SelectInput.tsx

@@ -746,6 +746,7 @@ function SelectInputOptions<T = string>({
     }
     return undefined;
   }, [filterQuery, filterable]);
+
   useEffect(() => {
     if (needle) {
       // Ensure having an active option while filtering.
@@ -865,8 +866,33 @@ function SelectInputOptions<T = string>({
     setInitialRender(false);
   }, []);
 
+  const visibleOptionCount = useMemo(() => {
+    let count = 0;
+    for (const item of filteredItems) {
+      if (item.type === 'option') {
+        if (
+          item.value != null &&
+          (needle == null || selectInputOptionItemIncludesNeedle(item, needle))
+        ) {
+          count += 1;
+        }
+      } else if (item.type === 'group') {
+        for (const option of item.options) {
+          if (
+            option.value != null &&
+            (needle == null || selectInputOptionItemIncludesNeedle(option, needle))
+          ) {
+            count += 1;
+          }
+        }
+      }
+    }
+    return count;
+  }, [filteredItems, needle]);
+
   const showStatus = resultsEmpty;
   const statusId = useId();
+  const liveRegionId = useId();
   const listboxId = useId();
 
   const getItemNode = (index: number) => {
@@ -913,7 +939,7 @@ function SelectInputOptions<T = string>({
       className="np-select-input-options-container"
       onAriaActiveDescendantChange={(value: React.AriaAttributes['aria-activedescendant']) => {
         if (controllerRef.current != null) {
-          if (!initialRender && value != null) {
+          if (!initialRender && value != null && needle == null) {
             controllerRef.current.setAttribute('aria-activedescendant', value);
           } else {
             controllerRef.current.removeAttribute('aria-activedescendant');
@@ -936,7 +962,11 @@ function SelectInputOptions<T = string>({
             aria-autocomplete="list"
             aria-expanded
             aria-controls={listboxId}
-            aria-describedby={showStatus ? statusId : undefined}
+            aria-describedby={
+              [showStatus ? statusId : null, needle != null ? liveRegionId : null]
+                .filter(Boolean)
+                .join(' ') || undefined
+            }
             onKeyDown={(event) => {
               // Prevent interfering with the matcher of Headless UI
               // https://mathiasbynens.be/notes/javascript-unicode#regex
@@ -972,6 +1002,18 @@ function SelectInputOptions<T = string>({
         </div>
       ) : null}
 
+      <div
+        id={liveRegionId}
+        role="status"
+        aria-live="polite"
+        aria-atomic="true"
+        className="sr-only"
+      >
+        {needle != null
+          ? intl.formatMessage(messages.filteredResultsCount, { count: visibleOptionCount })
+          : null}
+      </div>
+
       <section
         ref={listboxContainerRef}
         tabIndex={-1}