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({ 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({ }); const inputWrapper = createDomElement('div', { class: classNames.inputWrapper, - children: [input], + children: [input, inputLiveRegion], }); const formProps = propGetters.getFormProps({ @@ -207,6 +211,7 @@ export function createAutocompleteDom({ 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({ 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;