DataGrid - The "aria-label" attribute value is "Show filter options f… (

#26436)
DevExpress · Jan 15, 2024 · d56f89f · d56f89f
1 parent 704a22f
commit d56f89f
Show file tree

Hide file tree

Showing 5 changed files with 50 additions and 5 deletions.
diff --git a/packages/devextreme/js/__internal/grids/grid_core/header_filter/m_header_filter.ts b/packages/devextreme/js/__internal/grids/grid_core/header_filter/m_header_filter.ts
@@ -448,6 +448,7 @@ const HeaderPanelHeaderFilterExtender = extend({}, headerFilterMixin, {
           alignment: getDefaultAlignment(that.option('rtlEnabled')),
           filterValues: groupColumn.filterValues,
           allowHeaderFiltering: true,
+          caption: groupColumn.caption,
         },
         showColumnLines: true,
       });

diff --git a/packages/devextreme/testing/testcafe/model/dataGrid/groupPanel.ts b/packages/devextreme/testing/testcafe/model/dataGrid/groupPanel.ts
@@ -1,10 +1,12 @@
+import { GroupPanelItem } from './groupPanelItem';
+
 const ITEM_SELECTOR = '.dx-group-panel-item';
 
 export class GroupPanel {
   constructor(private readonly selector: Selector) {}
 
-  getHeader(i: number): Selector {
-    return this.selector.find(ITEM_SELECTOR).nth(i);
+  getHeader(i: number): GroupPanelItem {
+    return new GroupPanelItem(this.selector.find(ITEM_SELECTOR).nth(i));
   }
 
   getHeadersCount(): Promise<number> {

diff --git a/packages/devextreme/testing/testcafe/model/dataGrid/groupPanelItem.ts b/packages/devextreme/testing/testcafe/model/dataGrid/groupPanelItem.ts
@@ -0,0 +1,15 @@
+const CLASS = {
+  filterButton: 'dx-header-filter',
+};
+
+export class GroupPanelItem {
+  element: Selector;
+
+  constructor(selector: Selector) {
+    this.element = selector;
+  }
+
+  getFilterButton(): Selector {
+    return this.element.find(`.${CLASS.filterButton}`);
+  }
+}
diff --git a/packages/devextreme/testing/testcafe/tests/dataGrid/accessibility/bugs.ts b/packages/devextreme/testing/testcafe/tests/dataGrid/accessibility/bugs.ts
@@ -21,3 +21,30 @@ test('T1187314 - DataGrid displays an incorrect row count in "aria-label" if the
   filterValue: ['id', '=', '1'],
   scrolling: { mode: 'infinite' },
 }));
+
+test('DataGrid - The \'aria-label\' attribute value is "Show filter options for column \'undefined\' for the header filter icon in grouped fields (T1205784)', async (t) => {
+  const dataGrid = new DataGrid('#container');
+
+  await t
+    .expect(dataGrid.getGroupPanel().getHeader(0).getFilterButton().getAttribute('aria-label'))
+    .eql('Show filter options for column \'Id\'');
+}).before(async () => createWidget('dxDataGrid', {
+  keyExpr: 'id',
+  dataSource: [{
+    id: 0,
+    data: 'A',
+  }],
+  groupPanel: {
+    visible: true,
+  },
+  headerFilter: {
+    visible: true,
+  },
+  columns: [
+    'data',
+    {
+      dataField: 'id',
+      groupIndex: 0,
+    },
+  ],
+}));
diff --git a/packages/devextreme/testing/testcafe/tests/dataGrid/columnReordering.ts b/packages/devextreme/testing/testcafe/tests/dataGrid/columnReordering.ts
@@ -137,7 +137,7 @@ test('column separator should work properly with expand columns', async (t) => {
   const dataGrid = new DataGrid('#container');
   await MouseUpEvents.disable(MouseAction.dragToOffset);
 
-  await t.drag(dataGrid.getGroupPanel().getHeader(0), 0, 30);
+  await t.drag(dataGrid.getGroupPanel().getHeader(0).element, 0, 30);
   await t
     .expect(await takeScreenshot('column-separator-with-expand-columns.png'))
     .ok()
@@ -180,7 +180,7 @@ test.skip('HeaderRow should be highlighted when dragging column with allowColumn
   const dataGrid = new DataGrid('#container');
   await MouseUpEvents.disable(MouseAction.dragToOffset);
 
-  await t.drag(dataGrid.getGroupPanel().getHeader(0), 0, 30);
+  await t.drag(dataGrid.getGroupPanel().getHeader(0).element, 0, 30);
   await t
     .expect(await takeScreenshot('headerRow-highlight-on-drag.png'))
     .ok()
@@ -224,7 +224,7 @@ test('Column without allowReordering should have same position after dragging to
   await t.drag(dataGrid.getHeaders().getHeaderRow(0).getHeaderCell(2).element, -30, -30);
   await t.expect(dataGrid.getGroupPanel().getHeadersCount()).eql(1);
 
-  await t.drag(dataGrid.getGroupPanel().getHeader(0), 0, 30);
+  await t.drag(dataGrid.getGroupPanel().getHeader(0).element, 0, 30);
 
   const headers = await Promise.all([0, 1, 2, 3].map(
     (i) => dataGrid.getHeaders().getHeaderRow(0).getHeaderCell(i).element.textContent,