Lookup - Screen readers do not pick up NoDataText when Lookup is empty by dmlvr · Pull Request #35026 · DevExpress/DevExtreme

dmlvr · 2026-09-02T16:26:20Z

No description provided.

Copilot

🟢 Approval recommended

The change is narrowly scoped, includes targeted automated test coverage for the new accessibility behavior, and updates dependent assertions/snapshots accordingly.

Pull request overview

This PR improves List/Lookup accessibility by introducing a dedicated, visually hidden live region (role="status") in the List base implementation so screen readers reliably announce list state changes—particularly noDataText when a Lookup search yields no results.

Changes:

Added a persistent screen-reader-only live region to ListBase and updated its text based on loading state, item count, and noDataText.
Updated existing List QUnit tests that previously asserted element.text() (now affected by the live region text).
Added new QUnit coverage for announcements in both List and Lookup, and updated affected Jest snapshots.

File summaries

File	Description
packages/devextreme/testing/tests/DevExpress.ui.widgets/listParts/commonTests.js	Adjusts text assertions to ignore the new live-region text; adds QUnit accessibility tests for announcements.
packages/devextreme/testing/tests/DevExpress.ui.widgets.editors/lookup.tests.js	Adds QUnit tests verifying Lookup’s internal list announces item count / `noDataText` on search without recreating the live region.
packages/devextreme/js/__internal/ui/list/list.base.ts	Implements the live region container and announcement updates in `ListBase`.
packages/devextreme/js/__internal/grids/new/grid_core/filtering/header_filter/snapshots/view.integration.test.tsx.snap	Updates snapshots to include the newly rendered live region in lists used by header filter UI.
packages/devextreme/js/__internal/grids/new/grid_core/filtering/header_filter/snapshots/options.integration.test.ts.snap	Updates snapshots to include the newly rendered live region in lists used by header filter UI.

Review details

Files reviewed: 5/5 changed files
Comments generated: 0
Review effort level: Lite

💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.

Raushen · 2026-09-04T12:48:10Z

+    const itemsCount = this._editStrategy.itemsGetter().length;
+    const itemsLabel = messageLocalization.format('dxList-listAriaLabel');
+
+    this._$a11yStatusContainer?.text(itemsCount ? `${itemsLabel}: ${itemsCount}` : noDataText ?? '');


Check what we need to announce.

Raushen · 2026-09-04T12:51:43Z

+    const itemsCount = this._editStrategy.itemsGetter().length;
+    const itemsLabel = messageLocalization.format('dxList-listAriaLabel');
+
+    this._$a11yStatusContainer?.text(itemsCount ? `${itemsLabel}: ${itemsCount}` : noDataText ?? '');


Check ?? ''

noDataText from options

const { noDataText } = this.option()

can be undefined. But dxElementWrapper.text do not support undefined

dxElementWrapper.text(text: string | number | boolean).

So this is the best way to support typing

Raushen · 2026-09-04T12:52:26Z

 const LIST_SELECT_RADIOBUTTON = 'dx-list-select-radiobutton';
 const WRAP_ITEM_TEXT_CLASS = 'dx-wrap-item-text';
 const SELECT_ALL_ITEM_SELECTOR = '.dx-list-select-all';
+export const SCREEN_READER_ONLY_CLASS = 'dx-screen-reader-only';


Check if it can be imported.

we have two places where it's usable:

https://github.com/DevExpress/DevExtreme/blob/main/packages/devextreme/js/__internal/ui/validation_summary.ts#L20

https://github.com/DevExpress/DevExtreme/blob/main/packages/devextreme/js/__internal/ui/calendar/calendar.views.ts#L21

but I'm not sure import from this places right idea. What do you think?

Raushen · 2026-09-04T12:53:21Z

 const LIST_SELECT_RADIOBUTTON = 'dx-list-select-radiobutton';
 const WRAP_ITEM_TEXT_CLASS = 'dx-wrap-item-text';
 const SELECT_ALL_ITEM_SELECTOR = '.dx-list-select-all';
+export const SCREEN_READER_ONLY_CLASS = 'dx-screen-reader-only';


Check if we can reuse dx-gridbase-a11y-status-container

this class was created for similar cases

https://github.com/DevExpress/DevExtreme/blob/main/packages/devextreme-scss/scss/widgets/base/_ui.scss#L39

Raushen · 2026-09-04T12:54:57Z

+  _renderA11yStatusContainer(): void {
+    const isContainerExistingInDOM = this._$a11yStatusContainer?.parent().is(this.$element());
+
+    if (isContainerExistingInDOM) {


if(!!this._$a11yStatusContainer.get(0))

Raushen · 2026-09-04T12:57:49Z

@@ -85,6 +85,7 @@ const LIST_SELECT_CHECKBOX = 'dx-list-select-checkbox';
 const LIST_SELECT_RADIOBUTTON = 'dx-list-select-radiobutton';


Check previous solution.

Copilot

🔵 Needs a closer look

The new live-region announcement label is inconsistent with existing ARIA labeling behavior for deletable lists (allowItemDeleting), which should be aligned before merging.

Review details

Suppressed comments (1)

Previously missed (1) — in code that hasn't changed since the last review.

packages/devextreme/js/__internal/ui/list/list.base.ts:1030

_updateA11yStatusText always uses dxList-listAriaLabel for the announcement label, but _setListAria() switches to dxList-listAriaLabel-deletable when allowItemDeleting is enabled. This makes the live-region announcement inconsistent with the list’s own ARIA label in deletable mode (and may produce partially untranslated output in that configuration). Consider selecting the same label key here based on allowItemDeleting.

Files reviewed: 5/5 changed files
Comments generated: 0 new
Review effort level: Lite

Copilot

🟡 Changes recommended

The live-region element can be detached during widget refresh/clean but not recreated due to a stale cached reference, which can break announcements after rerender.

Once you've addressed the issues Copilot identified, you can request another Copilot review.

Review details

Files reviewed: 5/5 changed files
Comments generated: 1
Review effort level: Lite

+  _renderA11yStatusContainer(): void {
+    if (this._$a11yStatusContainer?.get(0)) {
+      return;
+    }
+
+    this._$a11yStatusContainer = $('<div>')
+      .addClass(SCREEN_READER_ONLY_CLASS)
+      .attr('role', 'status')
+      .appendTo(this.$element());
+  }


dmlvr self-assigned this Sep 2, 2026

dmlvr added the 26_2 label Sep 2, 2026

dmlvr force-pushed the T1334729_26_2 branch from 4577c97 to a7272c3 Compare September 3, 2026 12:05

dmlvr marked this pull request as ready for review September 3, 2026 13:40

dmlvr requested review from a team as code owners September 3, 2026 13:40

Copilot AI lite review requested due to automatic review settings September 3, 2026 13:40

Copilot started reviewing on behalf of dmlvr September 3, 2026 13:41 View session

Copilot AI reviewed Sep 3, 2026

View reviewed changes

Raushen reviewed Sep 4, 2026

View reviewed changes

Copilot AI review requested due to automatic review settings September 4, 2026 13:29

Copilot started reviewing on behalf of dmlvr September 4, 2026 13:30 View session

Copilot AI reviewed Sep 4, 2026

View reviewed changes

dmlvr added 3 commits September 4, 2026 16:49

fix and tests

6326d00

update snapshots

3fb3523

fix by review

8444b2c

dmlvr force-pushed the T1334729_26_2 branch from d6526e5 to 8444b2c Compare September 4, 2026 13:49

Copilot AI review requested due to automatic review settings September 4, 2026 13:49

Copilot started reviewing on behalf of dmlvr September 4, 2026 13:50 View session

Copilot AI reviewed Sep 4, 2026

View reviewed changes

		@@ -85,6 +85,7 @@ const LIST_SELECT_CHECKBOX = 'dx-list-select-checkbox';
		const LIST_SELECT_RADIOBUTTON = 'dx-list-select-radiobutton';

Uh oh!

Conversation

dmlvr commented Sep 2, 2026

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

🟢 Approval recommended

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

dmlvr Sep 4, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

dmlvr Sep 4, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

🔵 Needs a closer look

Suppressed comments (1)

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

🟡 Changes recommended

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

dmlvr Sep 4, 2026 •

edited

Loading

dmlvr Sep 4, 2026 •

edited

Loading