TreeList: Replace 'treegrid' role to 'group' of the root container

js/__internal/grids/grid_core/views/m_columns_view.ts

@@ -176,6 +176,8 @@ export class ColumnsView extends viewWithColumnStateMixin {
 
   _dataController!: DataController;
 
+  protected setTableRole($tableElement: dxElementWrapper): void {}
+
   _createScrollableOptions() {
     const that = this;
     const scrollingOptions = that.option('scrolling');
@@ -263,20 +265,20 @@ export class ColumnsView extends viewWithColumnStateMixin {
   }
 
   _createTable(columns, isAppend) {
-    const that = this;
     const $table = $('<table>')
-      .addClass(that.addWidgetPrefix(TABLE_CLASS))
-      .addClass(that.addWidgetPrefix(TABLE_FIXED_CLASS));
+      .addClass(this.addWidgetPrefix(TABLE_CLASS))
+      .addClass(this.addWidgetPrefix(TABLE_FIXED_CLASS));
 
     if (columns && !isAppend) {
-      $table.append(that._createColGroup(columns));
+      $table.append(this._createColGroup(columns));
       if (browser.safari) {
         // T198380, T809552
         // @ts-expect-error
         $table.append($('<thead>').append('<tr>'));
       }
+      this.setTableRole($table);
     } else {
-      that.setAria('hidden', true, $table);
+      this.setAria('hidden', true, $table);
     }
 
     this.setAria('role', 'presentation', $('<tbody>').appendTo($table));
@@ -294,13 +296,13 @@ export class ColumnsView extends viewWithColumnStateMixin {
       });
     }
 
-    if (that.option('cellHintEnabled')) {
+    if (this.option('cellHintEnabled')) {
       eventsEngine.on($table, 'mousemove', '.dx-row > td', this.createAction((args) => {
         const e = args.event;
         const $element = $(e.target);
         const $cell = $(e.currentTarget);
         const $row = $cell.parent();
-        const visibleColumns = that._columnsController.getVisibleColumns();
+        const visibleColumns = this._columnsController.getVisibleColumns();
         const rowOptions: any = $row.data('options');
         const columnIndex = $cell.index();
         // eslint-disable-next-line @typescript-eslint/prefer-optional-chain
@@ -311,7 +313,7 @@ export class ColumnsView extends viewWithColumnStateMixin {
         const isDataRow = $row.hasClass('dx-data-row');
         const isMasterDetailRow = $row.hasClass(DETAIL_ROW_CLASS);
         const isGroupRow = $row.hasClass(GROUP_ROW_CLASS);
-        const isFilterRow = $row.hasClass(that.addWidgetPrefix(FILTER_ROW_CLASS));
+        const isFilterRow = $row.hasClass(this.addWidgetPrefix(FILTER_ROW_CLASS));
 
         const isDataRowWithTemplate = isDataRow && (!column || column.cellTemplate);
         const isEditorShown = isDataRow && cellOptions && (rowOptions.isEditing || cellOptions.isEditing || column?.showEditorAlways);
@@ -340,7 +342,7 @@ export class ColumnsView extends viewWithColumnStateMixin {
       }));
     }
 
-    const getOptions = function (event) {
+    const getOptions = (event) => {
       const $cell = $(event.currentTarget);
       const $fieldItemContent = $(event.target).closest(`.${FORM_FIELD_ITEM_CONTENT_CLASS}`);
       const $row = $cell.parent();
@@ -355,13 +357,13 @@ export class ColumnsView extends viewWithColumnStateMixin {
         eventType: event.type,
       });
 
-      resultOptions.rowIndex = that.getRowIndex($row);
+      resultOptions.rowIndex = this.getRowIndex($row);
 
       if ($fieldItemContent.length) {
         const formItemOptions: any = $fieldItemContent.data('dx-form-item');
         if (formItemOptions.column) {
           resultOptions.column = formItemOptions.column;
-          resultOptions.columnIndex = that._columnsController.getVisibleIndex(resultOptions.column.index);
+          resultOptions.columnIndex = this._columnsController.getVisibleIndex(resultOptions.column.index);
         }
       }
 
@@ -370,25 +372,25 @@ export class ColumnsView extends viewWithColumnStateMixin {
 
     eventsEngine.on($table, 'mouseover', '.dx-row > td', (e) => {
       const options = getOptions(e);
-      options && that.executeAction('onCellHoverChanged', options);
+      options && this.executeAction('onCellHoverChanged', options);
     });
 
     eventsEngine.on($table, 'mouseout', '.dx-row > td', (e) => {
       const options = getOptions(e);
-      options && that.executeAction('onCellHoverChanged', options);
+      options && this.executeAction('onCellHoverChanged', options);
     });
 
     eventsEngine.on($table, clickEventName, '.dx-row > td', (e) => {
       const options = getOptions(e);
-      options && that.executeAction('onCellClick', options);
+      options && this.executeAction('onCellClick', options);
     });
 
     eventsEngine.on($table, dblclickEvent, '.dx-row > td', (e) => {
       const options = getOptions(e);
-      options && that.executeAction('onCellDblClick', options);
+      options && this.executeAction('onCellDblClick', options);
     });
 
-    subscribeToRowEvents(that, $table);
+    subscribeToRowEvents(this, $table);
 
     return $table;
   }

js/__internal/grids/tree_list/column_headers/m_column_headers.ts

@@ -0,0 +1,16 @@
+import { columnHeadersModule } from '@ts/grids/grid_core/column_headers/m_column_headers';
+
+import treeListCore from '../m_core';
+
+const ColumnHeadersView = columnHeadersModule.views.columnHeadersView.inherit({
+  setTableRole($tableElement) {
+    this.setAria('role', 'treegrid', $tableElement);
+  },
+});
+
+treeListCore.registerModule('columnHeaders', {
+  defaultOptions: columnHeadersModule.defaultOptions,
+  views: {
+    columnHeadersView: ColumnHeadersView,
+  },
+});

js/__internal/grids/tree_list/m_grid_view.ts

@@ -2,33 +2,24 @@ import { gridViewModule } from '@ts/grids/grid_core/views/m_grid_view';
 
 import treeListCore from './m_core';
 
-const GridView = gridViewModule.views.gridView.inherit((function () {
-  return {
-    _getWidgetAriaLabel() {
-      return 'dxTreeList-ariaTreeList';
-    },
-    _getTableRoleName() {
-      return 'treegrid';
-    },
-  };
-})());
+const ResizingController = gridViewModule.controllers.resizing.inherit({
+  _getWidgetAriaLabel() {
+    return 'dxTreeList-ariaTreeList';
+  },
 
-treeListCore.registerModule('gridView', {
-  defaultOptions: gridViewModule.defaultOptions,
-  controllers: gridViewModule.controllers,
-  views: {
-    gridView: GridView,
+  _toggleBestFitMode(isBestFit) {
+    this.callBase(isBestFit);
+
+    const $rowsTable = this._rowsView.getTableElement();
+    $rowsTable.find('.dx-treelist-cell-expandable').toggleClass(this.addWidgetPrefix('best-fit'), isBestFit);
   },
-  extenders: {
-    controllers: {
-      resizing: {
-        _toggleBestFitMode(isBestFit) {
-          this.callBase(isBestFit);
+});
 
-          const $rowsTable = this._rowsView.getTableElement();
-          $rowsTable.find('.dx-treelist-cell-expandable').toggleClass(this.addWidgetPrefix('best-fit'), isBestFit);
-        },
-      },
-    },
+treeListCore.registerModule('gridView', {
+  defaultOptions: gridViewModule.defaultOptions,
+  controllers: {
+    ...gridViewModule.controllers,
+    resizing: ResizingController,
   },
+  views: gridViewModule.views,
 });

js/__internal/grids/tree_list/m_widget_base.ts

@@ -1,4 +1,4 @@
-import './module_not_extended/column_headers';
+import './column_headers/m_column_headers';
 import './m_columns_controller';
 import './data_controller/m_data_controller';
 import './module_not_extended/sorting';

js/__internal/grids/tree_list/rows/m_rows.ts

@@ -124,6 +124,10 @@ export const RowsView = rowsModule.views.rowsView.inherit((function () {
     isExpandIcon($targetElement) {
       return !!$targetElement.closest(`.${TREELIST_EXPANDED_CLASS}, .${TREELIST_COLLAPSED_CLASS}`).length;
     },
+
+    setTableRole($tableElement) {
+      this.setAria('role', 'treegrid', $tableElement);
+    },
   };
 })());
 

js/localization/messages/ar.json

@@ -168,7 +168,7 @@
         "dxDataGrid-filterPanelClearFilter": "مسح",
         "dxDataGrid-filterPanelFilterEnabledHint": "تمكين عامل التصفية",
 
-        "dxTreeList-ariaTreeList": "قائمة الشجرة",
+        "dxTreeList-ariaTreeList": "Tree list with {0} rows and {1} columns",
         "dxTreeList-ariaSearchInGrid": "Search in the tree list",
         "dxTreeList-ariaToolbar": "Tree list toolbar",
         "dxTreeList-editingAddRowToNode": "اضافة",

js/localization/messages/ca.json

@@ -168,7 +168,7 @@
         "dxDataGrid-filterPanelClearFilter": "Clar",
         "dxDataGrid-filterPanelFilterEnabledHint": "Activa el filtre",
 
-        "dxTreeList-ariaTreeList": "Llista",
+        "dxTreeList-ariaTreeList": "Tree list with {0} rows and {1} columns",
         "dxTreeList-ariaSearchInGrid": "Cerqueu a la llista d’arbres",
         "dxTreeList-ariaToolbar": "Barra d’eines de llista d’arbres",
         "dxTreeList-editingAddRowToNode": "Addiccionar",

js/localization/messages/cs.json

@@ -168,7 +168,7 @@
         "dxDataGrid-filterPanelClearFilter": "Smazat",
         "dxDataGrid-filterPanelFilterEnabledHint": "Povolit Filtr",
 
-        "dxTreeList-ariaTreeList": "Hierarchické zobrazení",
+        "dxTreeList-ariaTreeList": "Tree list with {0} rows and {1} columns",
         "dxTreeList-ariaSearchInGrid": "Search in the tree list",
         "dxTreeList-ariaToolbar": "Tree list toolbar",
         "dxTreeList-editingAddRowToNode": "Přidat",

js/localization/messages/de.json

@@ -168,7 +168,7 @@
         "dxDataGrid-filterPanelClearFilter": "Zurücksetzen",
         "dxDataGrid-filterPanelFilterEnabledHint": "Filter aktivieren",
 
-        "dxTreeList-ariaTreeList": "Strukturliste",
+        "dxTreeList-ariaTreeList": "TreeList mit {0} Zeilen und {1} Spalten",
         "dxTreeList-ariaSearchInGrid": "Suchen in der Strukturliste",
         "dxTreeList-ariaToolbar": "Symbolleiste der Strukturliste",
         "dxTreeList-editingAddRowToNode": "Hinzufügen",

js/localization/messages/el.json

@@ -168,7 +168,7 @@
         "dxDataGrid-filterPanelClearFilter": "Εκκαθάριση",
         "dxDataGrid-filterPanelFilterEnabledHint": "Ενεργοποιήστε το φίλτρο",
 
-        "dxTreeList-ariaTreeList": "Λίστα δένδρων",
+        "dxTreeList-ariaTreeList": "Tree list with {0} rows and {1} columns",
         "dxTreeList-ariaSearchInGrid": "Search in the tree list",
         "dxTreeList-ariaToolbar": "Tree list toolbar",
         "dxTreeList-editingAddRowToNode": "Προσθέτω",

js/localization/messages/en.json

@@ -168,7 +168,7 @@
         "dxDataGrid-filterPanelClearFilter": "Clear",
         "dxDataGrid-filterPanelFilterEnabledHint": "Enable the filter",
 
-        "dxTreeList-ariaTreeList": "Tree list",
+        "dxTreeList-ariaTreeList": "Tree list with {0} rows and {1} columns",
         "dxTreeList-ariaSearchInGrid": "Search in the tree list",
         "dxTreeList-ariaToolbar": "Tree list toolbar",
         "dxTreeList-editingAddRowToNode": "Add",

js/localization/messages/es.json

@@ -168,7 +168,7 @@
         "dxDataGrid-filterPanelClearFilter": "Limpiar filtro",
         "dxDataGrid-filterPanelFilterEnabledHint": "Habilitar filtro",
 
-        "dxTreeList-ariaTreeList": "Lista de árbol",
+        "dxTreeList-ariaTreeList": "Tree list with {0} rows and {1} columns",
         "dxTreeList-ariaSearchInGrid": "Search in the tree list",
         "dxTreeList-ariaToolbar": "Tree list toolbar",
         "dxTreeList-editingAddRowToNode": "Añadir",

js/localization/messages/fi.json

@@ -168,7 +168,7 @@
         "dxDataGrid-filterPanelClearFilter": "Tyhjennä",
         "dxDataGrid-filterPanelFilterEnabledHint": "Ota suodatin käyttöön",
 
-        "dxTreeList-ariaTreeList": "Puu",
+        "dxTreeList-ariaTreeList": "Tree list with {0} rows and {1} columns",
         "dxTreeList-ariaSearchInGrid": "Search in the tree list",
         "dxTreeList-ariaToolbar": "Tree list toolbar",
         "dxTreeList-editingAddRowToNode": "Lisää",

js/localization/messages/fr.json

@@ -168,7 +168,7 @@
         "dxDataGrid-filterPanelClearFilter": "Supprimer",
         "dxDataGrid-filterPanelFilterEnabledHint": "Activer le filtre",
 
-        "dxTreeList-ariaTreeList": "Liste arborescente",
+        "dxTreeList-ariaTreeList": "Tree list with {0} rows and {1} columns",
         "dxTreeList-ariaSearchInGrid": "Rechercher dans l'arborescence",
         "dxTreeList-ariaToolbar": "Barre d'outils de la liste arborescente",
         "dxTreeList-editingAddRowToNode": "Ajouter",

js/localization/messages/hu.json

@@ -168,7 +168,7 @@
         "dxDataGrid-filterPanelClearFilter": "Törlés",
         "dxDataGrid-filterPanelFilterEnabledHint": "Szűrő engedélyezése",
 
-        "dxTreeList-ariaTreeList": "Fa lista",
+        "dxTreeList-ariaTreeList": "Tree list with {0} rows and {1} columns",
         "dxTreeList-ariaSearchInGrid": "Search in the tree list",
         "dxTreeList-ariaToolbar": "Tree list toolbar",
         "dxTreeList-editingAddRowToNode": "Hozzáadás",

js/localization/messages/it.json

@@ -168,7 +168,7 @@
         "dxDataGrid-filterPanelClearFilter": "Cancella",
         "dxDataGrid-filterPanelFilterEnabledHint": "Attiva il filtro",
 
-        "dxTreeList-ariaTreeList": "Albero",
+        "dxTreeList-ariaTreeList": "Tree list with {0} rows and {1} columns",
         "dxTreeList-ariaSearchInGrid": "Ricerca nell'albero",
         "dxTreeList-ariaToolbar": "Barra degli strumenti albero",
         "dxTreeList-editingAddRowToNode": "Aggiungi",

js/localization/messages/ja.json

@@ -168,7 +168,7 @@
         "dxDataGrid-filterPanelClearFilter": "クリア",
         "dxDataGrid-filterPanelFilterEnabledHint": "フィルターの有効化",
 
-        "dxTreeList-ariaTreeList": "ツリー リスト",
+        "dxTreeList-ariaTreeList": "{0} 行と {1} 列のツリー リスト",
         "dxTreeList-ariaSearchInGrid": "ツリー リスト内を検索する",
         "dxTreeList-ariaToolbar": "ツリー リストのツール バー",
         "dxTreeList-editingAddRowToNode": "追加",

js/localization/messages/lt.json

@@ -168,7 +168,7 @@
         "dxDataGrid-filterPanelClearFilter": "Išvalyti",
         "dxDataGrid-filterPanelFilterEnabledHint": "Aktyvuoti filtrą",
 
-        "dxTreeList-ariaTreeList": "Duomenų medis",
+        "dxTreeList-ariaTreeList": "Tree list with {0} rows and {1} columns",
         "dxTreeList-ariaSearchInGrid": "Ieškoti duomenų medyje",
         "dxTreeList-ariaToolbar": "Duomenų medžio įrankių juosta",
         "dxTreeList-editingAddRowToNode": "Pridėti",

js/localization/messages/nb.json

@@ -168,7 +168,7 @@
         "dxDataGrid-filterPanelClearFilter": "Slett",
         "dxDataGrid-filterPanelFilterEnabledHint": "Aktivér filter",
 
-        "dxTreeList-ariaTreeList": "Treliste",
+        "dxTreeList-ariaTreeList": "Tree list with {0} rows and {1} columns",
         "dxTreeList-ariaSearchInGrid": "Search in the tree list",
         "dxTreeList-ariaToolbar": "Tree list toolbar",
         "dxTreeList-editingAddRowToNode": "Legg til",

js/localization/messages/nl.json

@@ -168,7 +168,7 @@
         "dxDataGrid-filterPanelClearFilter": "Wissen",
         "dxDataGrid-filterPanelFilterEnabledHint": "Filter activeren",
 
-        "dxTreeList-ariaTreeList": "Boomstructuur",
+        "dxTreeList-ariaTreeList": "Tree list with {0} rows and {1} columns",
         "dxTreeList-ariaSearchInGrid": "Search in the tree list",
         "dxTreeList-ariaToolbar": "Tree list toolbar",
         "dxTreeList-editingAddRowToNode": "Toevoegen",

js/localization/messages/pt.json

@@ -168,7 +168,7 @@
         "dxDataGrid-filterPanelClearFilter": "Limpar",
         "dxDataGrid-filterPanelFilterEnabledHint": "Habilitar o filtro",
 
-        "dxTreeList-ariaTreeList": "Lista em árvore",
+        "dxTreeList-ariaTreeList": "Tree list with {0} rows and {1} columns",
         "dxTreeList-ariaSearchInGrid": "Search in the tree list",
         "dxTreeList-ariaToolbar": "Tree list toolbar",
         "dxTreeList-editingAddRowToNode": "Adicionar",

js/localization/messages/ro.json

@@ -168,7 +168,7 @@
         "dxDataGrid-filterPanelClearFilter": "Curăță",
         "dxDataGrid-filterPanelFilterEnabledHint": "Activați filtrul",
 
-        "dxTreeList-ariaTreeList": "Structură arboreșcentă",
+        "dxTreeList-ariaTreeList": "Tree list with {0} rows and {1} columns",
         "dxTreeList-ariaSearchInGrid": "Search in the tree list",
         "dxTreeList-ariaToolbar": "Tree list toolbar",
         "dxTreeList-editingAddRowToNode": "Adaugă",

js/localization/messages/ru.json

@@ -168,7 +168,7 @@
         "dxDataGrid-filterPanelClearFilter": "Очистить",
         "dxDataGrid-filterPanelFilterEnabledHint": "Активировать фильтр",
 
-        "dxTreeList-ariaTreeList": "Иерархическая таблица данных",
+        "dxTreeList-ariaTreeList": "Иерархическая таблица данных с {0} строками и {1} колонками",
         "dxTreeList-ariaSearchInGrid": "Искать в иерархической таблице данных",
         "dxTreeList-ariaToolbar": "Панель инструментов иерархической таблицы данных",
         "dxTreeList-editingAddRowToNode": "Добавить",

js/localization/messages/sl.json

@@ -168,7 +168,7 @@
         "dxDataGrid-filterPanelClearFilter": "Pobriši",
         "dxDataGrid-filterPanelFilterEnabledHint": "Omogoči filtriranje",
 
-        "dxTreeList-ariaTreeList": "Drevesni seznam",
+        "dxTreeList-ariaTreeList": "Tree list with {0} rows and {1} columns",
         "dxTreeList-ariaSearchInGrid": "Search in the tree list",
         "dxTreeList-ariaToolbar": "Tree list toolbar",
         "dxTreeList-editingAddRowToNode": "Dodaj",

js/localization/messages/sv.json

@@ -168,7 +168,7 @@
         "dxDataGrid-filterPanelClearFilter": "Rensa",
         "dxDataGrid-filterPanelFilterEnabledHint": "Aktivera filter",
 
-        "dxTreeList-ariaTreeList": "Trädlista",
+        "dxTreeList-ariaTreeList": "Tree list with {0} rows and {1} columns",
         "dxTreeList-ariaSearchInGrid": "Search in the tree list",
         "dxTreeList-ariaToolbar": "Tree list toolbar",
         "dxTreeList-editingAddRowToNode": "Lägg till",

js/localization/messages/tr.json

@@ -168,7 +168,7 @@
         "dxDataGrid-filterPanelClearFilter": "Temizle",
         "dxDataGrid-filterPanelFilterEnabledHint": "Filtreyi etkinleştir",
 
-        "dxTreeList-ariaTreeList": "Ağaç listesi",
+        "dxTreeList-ariaTreeList": "Tree list with {0} rows and {1} columns",
         "dxTreeList-ariaSearchInGrid": "Search in the tree list",
         "dxTreeList-ariaToolbar": "Tree list toolbar",
         "dxTreeList-editingAddRowToNode": "Ekle",