Remove announcement for empty in SelectPanel. It get handled in useAnnouncements

Author: pksjce

packages/react/src/FilteredActionList/FilteredActionListWithModernActionList.tsx

@@ -1,4 +1,4 @@
-import type React from 'react'
+import React from 'react'
 import {useCallback, useEffect, useRef, useState} from 'react'
 import styled from 'styled-components'
 import Box from '../Box'
@@ -252,8 +252,8 @@ export function FilteredActionList({
       </ActionListContainerContext.Provider>
     )
   }
-
-  useAnnouncements(items, listRef, inputRef, enableAnnouncements)
+  const emptyMessage = React.isValidElement(message) ? message.props?.title : undefined
+  useAnnouncements(items, listRef, inputRef, emptyMessage, enableAnnouncements)
   return (
     <Box
       display="flex"

packages/react/src/FilteredActionList/useAnnouncements.tsx

@@ -6,7 +6,7 @@ import {useCallback, useEffect, useRef} from 'react'
 import type {FilteredActionListProps} from './FilteredActionListEntry'
 
 // we add a delay so that it does not interrupt default screen reader announcement and queues after it
-const delayMs = 500
+const delayMs = 1000
 
 const useFirstRender = () => {
   const firstRender = useRef(true)
@@ -20,15 +20,17 @@ export const useAnnouncements = (
   items: FilteredActionListProps['items'],
   listContainerRef: React.RefObject<HTMLUListElement>,
   inputRef: React.RefObject<HTMLInputElement>,
+  emptyMessage: string | undefined = undefined,
   enabled: boolean = true,
 ) => {
   const liveRegion = document.querySelector('live-region')
 
   // Notify user of the number of items available
   const selectedItems = items.filter(item => item.selected).length
-  const announcementText = items.length
-    ? `${items.length} item${items.length > 1 ? 's' : ''} available, ${selectedItems} selected.`
-    : 'No matching items.'
+  const announcementText =
+    items.length > 0
+      ? `${items.length} item${items.length > 1 ? 's' : ''} available, ${selectedItems} selected.`
+      : emptyMessage || 'No matching items.'
 
   const announce = useCallback(
     (...args: Parameters<typeof liveRegionAnnounce>): ReturnType<typeof liveRegionAnnounce> | undefined => {

packages/react/src/SelectPanel/SelectPanel.tsx

@@ -41,7 +41,6 @@ async function announceText(text: string, delayMs = SHORT_DELAY_MS) {
   const liveRegion = document.querySelector('live-region')
 
   liveRegion?.clear() // clear previous announcements
-
   await announce(text, {
     delayMs,
     from: liveRegion ? liveRegion : undefined, // announce will create a liveRegion if it doesn't find one
@@ -350,7 +349,7 @@ function Panel({
     if (open) {
       if (items.length === 0 && !(isLoading || loading)) {
         // we need to wait for the listContainerElement to disappear before announcing no items, otherwise it will be interrupted
-        if (!listContainerElement || !usingModernActionList) {
+        if (!listContainerElement && !usingModernActionList) {
           announceNoItems(message?.title)
         } else {
           setNeedsNoItemsAnnouncement(true)