fix: preserve pending a11y status messages

src/hooks/utils/__tests__/useA11yMessageStatus.multiple.test.ts

@@ -0,0 +1,56 @@
+import {act, renderHook, screen} from '@testing-library/react'
+import {useA11yMessageStatus} from '../useA11yMessageStatus'
+
+jest.useFakeTimers()
+
+afterEach(() => {
+  act(() => jest.runOnlyPendingTimers())
+  document.body.innerHTML = ''
+})
+
+afterAll(() => jest.useRealTimers())
+
+test('empty status messages do not cancel pending non-empty status messages', () => {
+  const getA11yStatusMessage = ({message}: {message: string}) => message
+  const environment = {document}
+  const {rerender} = renderHook(
+    ({
+      firstMessage,
+      secondMessage,
+      updateCount,
+    }: {
+      firstMessage: string
+      secondMessage: string
+      updateCount: number
+    }) => {
+      useA11yMessageStatus(
+        getA11yStatusMessage,
+        {message: firstMessage},
+        [firstMessage, updateCount],
+        environment,
+      )
+      useA11yMessageStatus(
+        getA11yStatusMessage,
+        {message: secondMessage},
+        [secondMessage, updateCount],
+        environment,
+      )
+    },
+    {
+      initialProps: {
+        firstMessage: '',
+        secondMessage: '',
+        updateCount: 0,
+      },
+    },
+  )
+
+  rerender({
+    firstMessage: 'Item added.',
+    secondMessage: '',
+    updateCount: 1,
+  })
+  act(() => jest.advanceTimersByTime(200))
+
+  expect(screen.getByRole('status')).toHaveTextContent('Item added.')
+})

src/hooks/utils/useA11yMessageStatus.ts

@@ -35,6 +35,10 @@ export function useA11yMessageStatus<Options>(
 
     const status = getA11yStatusMessage(options)
 
+    if (!status) {
+      return
+    }
+
     updateA11yStatus(status, document)
 
     // eslint-disable-next-line react-hooks/exhaustive-deps