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#29581)

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

@@ -1,5 +1,6 @@
 import $ from '@js/core/renderer';
 import { extend } from '@js/core/utils/extend';
+import { isObject } from '@js/core/utils/type';
 import { isTouchEvent } from '@js/events/utils/index';
 import localizationMessage from '@js/localization/message';
 
@@ -209,7 +210,11 @@ const ListEdit = ListBase.inherit({
   _updateItemAriaLabel($itemFrame, itemData) {
     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

@@ -53,6 +53,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/ca.json

@@ -53,6 +53,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

@@ -53,6 +53,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í...",

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

@@ -53,6 +53,7 @@
         "dxList-selectAll-checked": "Checked",
         "dxList-selectAll-notChecked": "Not checked",
         "dxList-ariaRoleDescription": "List",
+        "dxList-listAriaLabel-itemContent": "List item content",
 
         "dxScrollView-pullingDownText": "Zum Aktualisieren nach unten ziehen",
         "dxScrollView-pulledDownText": "Zum Aktualisieren loslassen",