fix: empty status message in Picker is not announced by screen readers (#3071)

Co-authored-by: Ivan Runets <ivan_runets@epam.com>

Author: i-runets

changelog.md

@@ -17,6 +17,7 @@
 
 
 **What's Fixed**
+* [DataPickerBody]: empty search results are announced via a **polite** off-screen `role="status"` region [#1506](https://github.com/epam/UUI/issues/1506) Case №9.
 * [VirtualList]: fixed loading `Blocker` not fully covering the visible area.
 * [FiltersPanel]: fixed filters being centered instead of left-aligned inside dropdown popups ([#3065](https://github.com/epam/UUI/issues/3065))
 * [DatePicker]: fixed value disappearing on blur when using formats with day name (e.g. `dddd, D MMMM YYYY`) ([#2560](https://github.com/epam/UUI/issues/2560))

test-utils/src/testObjects/Picker.ts

@@ -117,8 +117,9 @@ export class PickerTestObject {
     }
 
     static querySpinner(props: { editMode?: string } = {}) {
-        const dialog = within(this.getDialog(props.editMode));
-        return dialog.queryByRole('status', { busy: false }).querySelector('.uui-blocker');
+        const dialog = this.getDialog(props.editMode);
+        // VirtualList Blocker uses role="status"; DataPickerBody adds a separate empty-state announcer with the same role.
+        return dialog.querySelector<HTMLElement>('.uui-blocker-container .uui-blocker')!;
     }
 
     public static async waitForLoadingComplete(editMode?: string) {

uui/assets/styles/helpers.scss

@@ -1,4 +1,16 @@
 @mixin overflow-ellipsis() {
     overflow: hidden;
     text-overflow: ellipsis;
+}
+
+@mixin screen-reader-only() {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border: 0;
 }

uui/components/pickers/DataPickerBody.module.scss

@@ -32,3 +32,7 @@
     padding-top: var(--uui-data_picker_body-no-data-vertical-padding);
     padding-bottom: var(--uui-data_picker_body-no-data-vertical-padding);
 }
+
+.empty-status-announcer {
+    @include screen-reader-only();
+}

uui/components/pickers/DataPickerBody.tsx

@@ -43,6 +43,17 @@ export function DataPickerBody<TItem, TId>({ highlightSearchMatches = true, auto
     const prevProps = usePrevious(props);
     const showSearch = props.showSearch === 'auto' ? props.totalCount > 10 : Boolean(props.showSearch);
     const [isKeyboardNavigation, setIsKeyboardNavigation] = React.useState(false);
+    const [emptyMessage, setEmptyMessage] = React.useState('');
+
+    // We need to also ensure that topIndex === 0, because we can have state were there is no rows but topIndex > 0, in case when we scrolled lover than we have rows
+    // we fix this state on next render and shouldn't show empty state.
+    const isEmptyList = props.rows.length === 0 && props.value.topIndex === 0;
+
+    useEffect(() => {
+        if (!isEmptyList) {
+            setEmptyMessage('');
+        }
+    }, [isEmptyList]);
 
     useEffect(() => {
         if (props.rows.length !== prevProps?.rows.length || (!isEqual(prevProps?.value.checked, props.value.checked) && !props.fixedBodyPosition)) {
@@ -191,6 +202,14 @@ export function DataPickerBody<TItem, TId>({ highlightSearchMatches = true, auto
     const renderedDataRows = useMemo(() => props.rows.map((row) => renderRow(row, props.value)), [props.rows, props.value, isKeyboardNavigation]);
     return (
         <>
+            <div
+                className={ css.emptyStatusAnnouncer }
+                role="status"
+                aria-live="polite"
+                aria-atomic="true"
+            >
+                {emptyMessage}
+            </div>
             {showSearch && (
                 <div key="search" className={ cx(css.searchWrapper, 'uui-picker_input-body-search') }>
                     <FlexCell grow={ 1 }>
@@ -203,10 +222,12 @@ export function DataPickerBody<TItem, TId>({ highlightSearchMatches = true, auto
                 cx={ cx('uui-picker_input-body') }
                 rawProps={ { style: { maxHeight: props.maxHeight, maxWidth: props.maxWidth }, tabIndex: -1 } }
             >
-                { props.rows.length === 0 && props.value.topIndex === 0
-                    // We need to also ensure that topIndex === 0, because we can have state were there is no rows but topIndex > 0, in case when we scrolled lover than we have rows
-                    // we fix this state on next render and shouldn't show empty state.
-                    ? renderEmpty() : (
+                { isEmptyList
+                    ? (
+                        <div ref={ (el) => el && setEmptyMessage(el.textContent ?? '') }>
+                            {renderEmpty()}
+                        </div>
+                    ) : (
                         <VirtualList
                             value={ props.value }
                             onValueChange={ props.onValueChange }

uui/components/pickers/__tests__/DataPickerBody.test.tsx

@@ -1,7 +1,8 @@
 import React from 'react';
-import { renderHook, renderSnapshotWithContextAsync } from '@epam/uui-test-utils';
+import { renderHook, renderSnapshotWithContextAsync, renderWithContextAsync, waitFor, within } from '@epam/uui-test-utils';
 import { ArrayDataSource } from '@epam/uui-core';
 import { DataPickerBody, DataPickerBodyProps } from '../DataPickerBody';
+import { i18n } from '../../../i18n';
 
 type LanguageLevel = { id: number; level: string };
 const languageLevels = [
@@ -51,4 +52,58 @@ describe('DataPickerBody', () => {
         );
         expect(tree).toMatchSnapshot();
     });
+
+    it('should update announcer div when empty list shows default no-records message', async () => {
+        const { container } = await renderWithContextAsync(
+            <DataPickerBody
+                { ...requiredProps }
+                rows={ [] }
+                showSearch
+                rowsCount={ 0 }
+                value={ { topIndex: 0, search: 'no-match' } }
+            />,
+        );
+
+        await waitFor(() => {
+            expect(within(container).getByRole('status')).toHaveTextContent(i18n.dataPickerBody.noRecordsMessage);
+        });
+    });
+
+    it('should update announcer div to match custom renderEmpty text', async () => {
+        const { container } = await renderWithContextAsync(
+            <DataPickerBody
+                { ...requiredProps }
+                rows={ [] }
+                renderEmpty={ () => <div>Custom empty message</div> }
+            />,
+        );
+
+        await waitFor(() => {
+            expect(within(container).getByRole('status')).toHaveTextContent('Custom empty message');
+        });
+    });
+
+    it('should clear announcer when list has rows', async () => {
+        const { container, rerender } = await renderWithContextAsync(
+            <DataPickerBody
+                { ...requiredProps }
+                rows={ [] }
+                renderEmpty={ () => <div>Was empty</div> }
+            />,
+        );
+
+        const emptyStatusAnnouncer = within(container).getByRole('status');
+
+        await waitFor(() => {
+            expect(emptyStatusAnnouncer).toHaveTextContent('Was empty');
+        });
+
+        rerender(
+            <DataPickerBody { ...requiredProps } rows={ rows } />,
+        );
+
+        await waitFor(() => {
+            expect(emptyStatusAnnouncer).toHaveTextContent('');
+        });
+    });
 });

uui/components/pickers/__tests__/PickerInput.test.tsx

@@ -230,8 +230,8 @@ describe('PickerInput', () => {
             const dialog = await screen.findByRole('dialog');
             expect(dialog).toBeInTheDocument();
 
-            const dialogBody = dialog.firstElementChild?.firstElementChild;
-            expect(dialogBody).toHaveStyle('max-height: 100px');
+            const pickerBody = dialog.querySelector('.uui-picker_input-body');
+            expect(pickerBody).toHaveStyle('max-height: 100px');
         });
 
         it('should render custom not found', async () => {
@@ -307,15 +307,15 @@ describe('PickerInput', () => {
             expect(dialog).toBeInTheDocument();
 
             await waitFor(async () => {
-                const notFound = within(await screen.findByRole('dialog')).getByTestId(customTextForNotEnoughCharsInSearchId);
+                const notFound = within(dialog).getByTestId(customTextForNotEnoughCharsInSearchId);
                 expect(notFound).toHaveTextContent(customTextForNotEnoughCharsInSearch);
             });
 
             const bodyInput = within(dialog).getByPlaceholderText('Search');
             fireEvent.change(bodyInput, { target: { value: 'A11' } });
 
             await waitFor(async () => {
-                const notFound = within(await screen.findByRole('dialog')).getByTestId(customTextForNotFoundId);
+                const notFound = within(dialog).getByTestId(customTextForNotFoundId);
                 expect(notFound).toHaveTextContent(customTextForNotFound);
             });
         });
@@ -610,8 +610,8 @@ describe('PickerInput', () => {
             expect(dialog).toBeInTheDocument();
 
             await waitFor(async () => {
-                const notFound = within(await screen.findByRole('dialog'));
-                expect(notFound.getByText('Type search to load items')).toBeInTheDocument();
+                const body = dialog.querySelector<HTMLElement>('.uui-picker_input-body')!;
+                expect(within(body).getByText('Type search to load items')).toBeInTheDocument();
             });
 
             expect(apiMock).toBeCalledTimes(0);
@@ -626,8 +626,8 @@ describe('PickerInput', () => {
             jest.useRealTimers();
 
             await waitFor(async () => {
-                const notFound = within(await screen.findByRole('dialog'));
-                expect(notFound.getByText('No records found')).toBeInTheDocument();
+                const body = dialog.querySelector<HTMLElement>('.uui-picker_input-body')!;
+                expect(within(body).getByText('No records found')).toBeInTheDocument();
             });
 
             expect(apiMock).toBeCalledTimes(1);

uui/components/pickers/__tests__/__snapshots__/DataPickerBody.test.tsx.snap

@@ -2,6 +2,12 @@
 
 exports[`DataPickerBody should be rendered with maximum props 1`] = `
 <DocumentFragment>
+  <div
+    aria-atomic="true"
+    aria-live="polite"
+    class="emptyStatusAnnouncer"
+    role="status"
+  />
   <div
     class="searchWrapper uui-picker_input-body-search"
   >
@@ -559,6 +565,12 @@ exports[`DataPickerBody should be rendered with maximum props 1`] = `
 
 exports[`DataPickerBody should be rendered with minimum props 1`] = `
 <DocumentFragment>
+  <div
+    aria-atomic="true"
+    aria-live="polite"
+    class="emptyStatusAnnouncer"
+    role="status"
+  />
   <div
     class="root uui-flex-row uui-picker_input-body uui-size-36"
     tabindex="-1"
@@ -1078,12 +1090,22 @@ exports[`DataPickerBody should be rendered with minimum props 1`] = `
 
 exports[`DataPickerBody should be rendered without rows 1`] = `
 <DocumentFragment>
+  <div
+    aria-atomic="true"
+    aria-live="polite"
+    class="emptyStatusAnnouncer"
+    role="status"
+  >
+    Not found
+  </div>
   <div
     class="root uui-flex-row uui-picker_input-body uui-size-36"
     tabindex="-1"
   >
     <div>
-      Not found
+      <div>
+        Not found
+      </div>
     </div>
   </div>
 </DocumentFragment>

uui/components/pickers/__tests__/__snapshots__/PickerInput.test.tsx.snap

@@ -52,6 +52,12 @@ exports[`PickerInput Body Open/Close should open body 1`] = `
       style="min-width: 360px; max-width: 360px;"
       tabindex="-1"
     >
+      <div
+        aria-atomic="true"
+        aria-live="polite"
+        class="emptyStatusAnnouncer"
+        role="status"
+      />
       <div
         class="root uui-flex-row uui-picker_input-body uui-size-36"
         style="max-height: 300px;"

uui/components/pickers/__tests__/__snapshots__/PickerList.test.tsx.snap

@@ -225,6 +225,12 @@ exports[`PickerList should open body 1`] = `
             </div>
           </div>
         </div>
+        <div
+          aria-atomic="true"
+          aria-live="polite"
+          class="emptyStatusAnnouncer"
+          role="status"
+        />
         <div
           class="root uui-flex-row uui-picker_input-body uui-size-36"
           tabindex="-1"