From 079b6b2ee692609845e833fb9cafda22ec641ab6 Mon Sep 17 00:00:00 2001
From: Dhaya <154633+dhayab@users.noreply.github.com>
Date: Thu, 4 Dec 2025 13:51:44 +0100
Subject: [PATCH] feat(dom): announce results updates with a live region

---
 packages/autocomplete-js/src/createAutocompleteDom.ts | 7 ++++++-
 packages/autocomplete-js/src/render.tsx               | 6 ++++++
 packages/autocomplete-js/src/types/AutocompleteDom.ts | 1 +
 3 files changed, 13 insertions(+), 1 deletion(-)

diff --git a/packages/autocomplete-js/src/createAutocompleteDom.ts b/packages/autocomplete-js/src/createAutocompleteDom.ts
index 258ba7169..6baf65f48 100644
--- a/packages/autocomplete-js/src/createAutocompleteDom.ts
+++ b/packages/autocomplete-js/src/createAutocompleteDom.ts
@@ -108,6 +108,10 @@ export function createAutocompleteDom<TItem extends BaseItem>({
     isDetached,
   });
 
+  const inputLiveRegion = createDomElement('div', {
+    ariaLive: 'assertive',
+    hidden: true,
+  });
   const inputWrapperPrefix = createDomElement('div', {
     class: classNames.inputWrapperPrefix,
     children: [label, loadingIndicator],
@@ -118,7 +122,7 @@ export function createAutocompleteDom<TItem extends BaseItem>({
   });
   const inputWrapper = createDomElement('div', {
     class: classNames.inputWrapper,
-    children: [input],
+    children: [input, inputLiveRegion],
   });
 
   const formProps = propGetters.getFormProps({
@@ -207,6 +211,7 @@ export function createAutocompleteDom<TItem extends BaseItem>({
     detachedOverlay,
     detachedSearchButtonQuery,
     detachedSearchButtonPlaceholder,
+    inputLiveRegion,
     inputWrapper,
     input,
     root,
diff --git a/packages/autocomplete-js/src/render.tsx b/packages/autocomplete-js/src/render.tsx
index 8d614c988..8e69bb19d 100644
--- a/packages/autocomplete-js/src/render.tsx
+++ b/packages/autocomplete-js/src/render.tsx
@@ -66,6 +66,12 @@ export function renderSearchBox<TItem extends BaseItem>({
   setProperties(dom.detachedSearchButtonPlaceholder, {
     hidden: Boolean(state.query),
   });
+
+  // FIXME: Should leverage `translations`
+  dom.inputLiveRegion.innerText = ((count) =>
+    count > 0 ? `${count} results available` : 'No results available')(
+    state.collections.reduce((count, { items }) => count + items.length, 0)
+  );
 }
 
 // Safari will animate the SVG even when it's hidden. We need to pause the
diff --git a/packages/autocomplete-js/src/types/AutocompleteDom.ts b/packages/autocomplete-js/src/types/AutocompleteDom.ts
index 71eb58ea1..d7ab9d184 100644
--- a/packages/autocomplete-js/src/types/AutocompleteDom.ts
+++ b/packages/autocomplete-js/src/types/AutocompleteDom.ts
@@ -1,4 +1,5 @@
 export type AutocompleteDom = {
+  inputLiveRegion: HTMLDivElement;
   inputWrapper: HTMLDivElement;
   input: HTMLInputElement;
   root: HTMLDivElement;