List should not display "[object Object]" in the aria-label attribute in multiple selection mode, especially when displayExpr and default text field are missed (T1285078) (DevExpress#29580)

Author: EugeniyKiyashko

apps/demos/Demos/List/ItemTemplate/Angular/app/app.component.html

@@ -1,5 +1,5 @@
 <div class="list-container">
-  <dx-list [dataSource]="products" height="100%">
+  <dx-list [dataSource]="products" height="100%" displayExpr="Name">
     <div *dxTemplate="let item of 'item'">
       <div class="product">
         <img alt="{{ item.Name }}" src="{{ item.ImageSrc }}" />

apps/demos/Demos/List/ItemTemplate/React/App.tsx

@@ -8,6 +8,7 @@ const App = () => (
     <List
       dataSource={products}
       height="100%"
+      displayExpr="Name"
       itemRender={ProductInfo} />
   </div>
 );

apps/demos/Demos/List/ItemTemplate/ReactJs/App.js

@@ -8,6 +8,7 @@ const App = () => (
     <List
       dataSource={products}
       height="100%"
+      displayExpr="Name"
       itemRender={ProductInfo}
     />
   </div>

apps/demos/Demos/List/ItemTemplate/Vue/App.vue

@@ -3,6 +3,7 @@
     <DxList
       :data-source="dataSource"
       height="100%"
+      display-expr="Name"
     >
       <template #item="{ data: item }">
         <ProductInfo :item="item"/>

apps/demos/Demos/List/ItemTemplate/jQuery/index.js

@@ -9,6 +9,7 @@ $(() => {
   $('#listWidget').dxList({
     dataSource: products,
     height: '100%',
+    displayExpr: 'Name',
     itemTemplate(data) {
       const result = $('<div>').addClass('product');
 

packages/devextreme/js/__internal/ui/list/m_list.edit.ts

@@ -4,7 +4,7 @@ import type { dxElementWrapper } from '@js/core/renderer';
 import $ from '@js/core/renderer';
 import { extend } from '@js/core/utils/extend';
 import type { Item } from '@js/ui/list';
-import { isNumeric } from '@ts/core/utils/m_type';
+import { isNumeric, isObject } from '@ts/core/utils/m_type';
 import type { OptionChanged } from '@ts/core/widget/types';
 
 import type { ListBaseProperties } from './m_list.base';
@@ -229,11 +229,15 @@ class ListEdit extends ListBase {
     return $itemFrame;
   }
 
-  _updateItemAriaLabel($itemFrame, itemData) {
+  _updateItemAriaLabel($itemFrame: dxElementWrapper, itemData: Item): void {
     // @ts-expect-error ts-error
     const label = this._displayGetter?.(itemData) ?? itemData?.text ?? itemData;
 
-    this.setAria('label', label, $itemFrame);
+    this.setAria(
+      'label',
+      isObject(label) ? localizationMessage.format('dxList-listAriaLabel-itemContent') : label,
+      $itemFrame,
+    );
   }
 
   _selectedItemClass() {

packages/devextreme/js/localization/messages/ar.json

@@ -55,6 +55,7 @@
         "dxList-selectAll-checked": "Checked",
         "dxList-selectAll-notChecked": "Not checked",
         "dxList-ariaRoleDescription": "List",
+        "dxList-listAriaLabel-itemContent": "List item content",
 
         "dxScrollView-pullingDownText": "للتحديث اسحب للأسفل...",
         "dxScrollView-pulledDownText": "حرر للتحديث ...",

packages/devextreme/js/localization/messages/bg.json

@@ -55,6 +55,7 @@
         "dxList-selectAll-checked": "Checked",
         "dxList-selectAll-notChecked": "Not checked",
         "dxList-ariaRoleDescription": "List",
+        "dxList-listAriaLabel-itemContent": "List item content",
 
         "dxScrollView-pullingDownText": "Pull down to refresh...",
         "dxScrollView-pulledDownText": "Release to refresh...",

packages/devextreme/js/localization/messages/ca.json

@@ -55,6 +55,7 @@
         "dxList-selectAll-checked": "Checked",
         "dxList-selectAll-notChecked": "Not checked",
         "dxList-ariaRoleDescription": "List",
+        "dxList-listAriaLabel-itemContent": "List item content",
 
         "dxScrollView-pullingDownText": "Tireu cap avall per refrescar -se ...",
         "dxScrollView-pulledDownText": "Allibereu a refresc ...",

packages/devextreme/js/localization/messages/cs.json

@@ -55,6 +55,7 @@
         "dxList-selectAll-checked": "Checked",
         "dxList-selectAll-notChecked": "Not checked",
         "dxList-ariaRoleDescription": "List",
+        "dxList-listAriaLabel-itemContent": "List item content",
 
         "dxScrollView-pullingDownText": "Stáhněte dolů pro obnovení...",
         "dxScrollView-pulledDownText": "Uvolněte pro obnovení...",