List: expose NoDataText to screen readers when empty (T1329047)

packages/devextreme/js/__internal/ui/collection/collection_widget.base.ts

@@ -1444,21 +1444,25 @@ class CollectionWidget<
     return this._itemContainer();
   }
 
-  _renderEmptyMessage(rootNodes?: TItem[]): void {
+  _shouldHideNoData(rootNodes?: TItem[]): boolean {
     const { items: userItems = [], noDataText } = this.option();
-
     const items = rootNodes ?? userItems;
     // @ts-expect-error ts-error
-    const hideNoData = !noDataText || items?.length || this._dataController.isLoading();
+    return Boolean(!noDataText || items?.length || this._dataController.isLoading());
+  }
+
+  _renderEmptyMessage(rootNodes?: TItem[]): void {
+    const { noDataText = '' } = this.option();
+
+    const hideNoDataMessage = this._shouldHideNoData(rootNodes);
 
-    if (hideNoData && this._$noData) {
+    if (hideNoDataMessage && this._$noData) {
       this._$noData.remove();
       // @ts-expect-error ts-error
       this._$noData = null;
-      this.setAria('label', undefined);
     }
 
-    if (!hideNoData) {
+    if (!hideNoDataMessage) {
       this._$noData = this._$noData ?? $('<div>').addClass('dx-empty-message');
       this._$noData.appendTo(this._emptyMessageContainer());
 
@@ -1470,7 +1474,7 @@ class CollectionWidget<
         this._$noData.html(noDataText);
       }
     }
-    this.$element().toggleClass(EMPTY_COLLECTION, !hideNoData);
+    this.$element().toggleClass(EMPTY_COLLECTION, !hideNoDataMessage);
   }
 
   _itemDXEventHandler(

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

@@ -996,7 +996,14 @@ export class ListBase extends CollectionWidget<ListBaseProperties, Item> {
     };
 
     this.setAria(elementAria, this.$element());
-    this.setAria({ role: 'application' }, this._focusTarget());
+
+    const showNoData = !this._shouldHideNoData();
+
+    if (showNoData) {
+      this._focusTarget().removeAttr('role');
+    } else {
+      this.setAria({ role: 'application' }, this._focusTarget());
+    }
 
     this._setListAria();
   }

packages/devextreme/testing/tests/DevExpress.ui.widgets.editors/lookup.tests.js

@@ -3734,7 +3734,6 @@ if(devices.real().deviceType === 'desktop') {
 
                 const listItemContainerAttributes = {
                     tabindex: searchEnabled ? '-1' : '0',
-                    role: 'application',
                 };
 
                 let fieldAttributes = {
@@ -3891,15 +3890,15 @@ if(devices.real().deviceType === 'desktop') {
                 const $scrollView = $list.find(`.${SCROLL_VIEW_CONTENT_CLASS}`);
                 const $itemsContainer = $list.find(`.${LIST_ITEMS_CLASS}`);
 
-                helper.checkAttributes($scrollView, { tabindex: '-1', role: 'application' });
+                helper.checkAttributes($scrollView, { tabindex: '-1' });
                 helper.checkAttributes($itemsContainer, { });
 
                 helper.widget.option(dataSourcePropertyName, [1, 2, 3]);
                 helper.checkAttributes($scrollView, { tabindex: '-1', role: 'application' });
                 helper.checkAttributes($itemsContainer, { 'aria-label': 'Items', role: 'listbox' });
 
                 helper.widget.option(dataSourcePropertyName, []);
-                helper.checkAttributes($scrollView, { tabindex: '-1', role: 'application' });
+                helper.checkAttributes($scrollView, { tabindex: '-1' });
                 helper.checkAttributes($itemsContainer, { });
             });
         });

packages/devextreme/testing/tests/DevExpress.ui.widgets.editors/selectBox.tests.js

@@ -6150,7 +6150,7 @@ if(devices.real().deviceType === 'desktop') {
                 helper.checkAttributes(helper.widget._list.$element(), listAttributes, localizedRoleDescription);
 
                 const $listItemContainer = helper.widget._list.$element().find(`.${SCROLLVIEW_CONTENT_CLASS}`);
-                helper.checkAttributes($listItemContainer, { role: 'application' }, 'scrollview content');
+                helper.checkAttributes($listItemContainer, { }, 'scrollview content');
 
                 const inputAttributes = {
                     autocomplete: 'off',
@@ -6183,7 +6183,7 @@ if(devices.real().deviceType === 'desktop') {
 
                 listAttributes.id = helper.widget._listId;
                 helper.checkAttributes(helper.widget._list.$element(), listAttributes, 'list');
-                helper.checkAttributes($listItemContainer, { role: 'application' }, 'scrollview content');
+                helper.checkAttributes($listItemContainer, { }, 'scrollview content');
 
                 inputAttributes['aria-controls'] = helper.widget._listId;
                 inputAttributes['aria-owns'] = helper.widget._popupContentId;

packages/devextreme/testing/tests/DevExpress.ui.widgets/listParts/commonTests.js

@@ -5342,4 +5342,45 @@ QUnit.module('Accessibility', () => {
             'checkbox aria-label updated after runtime change');
     });
 
+    QUnit.module('Empty list cannot have role on scrollview content (T1329047)', () => {
+        const ITEMS = ['Item 1'];
+
+        const createList = (options) => $('#list').dxList(options).dxList('instance');
+
+        const getScrollViewContent = (instance) =>
+            instance.$element().find(`.${SCROLLVIEW_CONTENT_CLASS}`).get(0);
+
+        const getScrollViewContentRole = (instance) =>
+            getScrollViewContent(instance).getAttribute('role');
+
+        QUnit.test('scrollview-content should not have role when list is empty on init', function(assert) {
+            const instance = createList({ items: [] });
+
+            assert.strictEqual(getScrollViewContentRole(instance), null);
+        });
+
+        QUnit.test('scrollview-content should have role="application" when list has items', function(assert) {
+            const instance = createList({ items: ITEMS });
+
+            assert.strictEqual(getScrollViewContentRole(instance), 'application');
+        });
+
+        QUnit.test('scrollview-content role should be removed when items are removed in realtime', function(assert) {
+            const instance = createList({ items: ITEMS });
+
+            instance.option('items', []);
+
+            assert.strictEqual(getScrollViewContentRole(instance), null);
+        });
+
+        QUnit.test('scrollview-content role should be restored when items are added in realtime', function(assert) {
+            const instance = createList({ items: [] });
+
+            instance.option('items', ITEMS);
+
+            assert.strictEqual(getScrollViewContentRole(instance), 'application');
+        });
+    });
+
+
 });