Scheduler: fix area-label for pivot grid header filter (T1287521) (DevExpress#29686)

Ambrozy · web-flow · commit 4c5825aef742 · 2025-04-25T08:50:25.000+02:00
Co-authored-by: Vladimir Bushmanov &lt;vladimir.bushmanov@devexpress.com&gt;
diff --git a/e2e/testcafe-devextreme/tests/pivotGrid/fieldPanel/T1287521_fields_aria_label.ts b/e2e/testcafe-devextreme/tests/pivotGrid/fieldPanel/T1287521_fields_aria_label.ts
@@ -0,0 +1,53 @@
+import PivotGrid from 'devextreme-testcafe-models/pivotGrid';
+import { createWidget } from '../../../helpers/createWidget';
+import url from '../../../helpers/getPageUrl';
+
+fixture.disablePageReloads`pivotGrid_fieldPanel_aria_label`
+  .page(url(__dirname, '../../container.html'));
+
+const PIVOT_GRID_SELECTOR = '#container';
+
+test('Header fields should have correct aria-label', async (t) => {
+  const pivotGrid = new PivotGrid(PIVOT_GRID_SELECTOR);
+  const rowHeader = pivotGrid.getRowHeaderArea();
+  const columnHeader = pivotGrid.getColumnHeaderArea();
+  const filterHeader = pivotGrid.getFilterHeaderArea();
+
+  await t
+    .expect(rowHeader.getHeaderFilterIcon(0).ariaLabel)
+    .eql('Show filter options for column \'Row1\'')
+    .expect(rowHeader.getHeaderFilterIcon(1).ariaLabel)
+    .eql('Show filter options for column \'Row2\'')
+    .expect(columnHeader.getHeaderFilterIcon(0).ariaLabel)
+    .eql('Show filter options for column \'Column1\'')
+    .expect(columnHeader.getHeaderFilterIcon(1).ariaLabel)
+    .eql('Show filter options for column \'Column2\'')
+    .expect(filterHeader.getHeaderFilterIcon(0).ariaLabel)
+    .eql('Show filter options for column \'Column3\'');
+}).before(async () => {
+  await createWidget('dxPivotGrid', {
+    allowFiltering: true,
+    fieldPanel: {
+      visible: true,
+    },
+    dataSource: {
+      fields: [{
+        dataField: 'row1',
+        area: 'row',
+      }, {
+        dataField: 'row2',
+        area: 'row',
+      }, {
+        dataField: 'column1',
+        area: 'column',
+      }, {
+        dataField: 'column2',
+        area: 'column',
+      }, {
+        dataField: 'column3',
+        area: 'filter',
+      }],
+      store: [],
+    },
+  });
+});
diff --git a/e2e/testcafe-devextreme/tests/pivotGrid/fieldPanel/dragAndDropFieldItems.ts b/e2e/testcafe-devextreme/tests/pivotGrid/fieldPanel/dragAndDropFieldItems.ts
@@ -16,9 +16,9 @@ test('Field panel items markup in the middle of the drag-n-drop', async (t) => {
   const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
 
   const pivotGrid = new PivotGrid(PIVOT_GRID_SELECTOR);
-  const columnFirstAction = pivotGrid.getColumnHeaderArea().getAction();
-  const rowFirstAction = pivotGrid.getRowHeaderArea().getAction();
-  const dataFirstAction = pivotGrid.getDataHeaderArea().getAction();
+  const columnFirstAction = pivotGrid.getColumnHeaderArea().getField();
+  const rowFirstAction = pivotGrid.getRowHeaderArea().getField();
+  const dataFirstAction = pivotGrid.getDataHeaderArea().getField();
 
   await MouseUpEvents.disable(MouseAction.dragToOffset);
 
diff --git a/e2e/testcafe-devextreme/tests/pivotGrid/headerFilter.ts b/e2e/testcafe-devextreme/tests/pivotGrid/headerFilter.ts
@@ -15,7 +15,7 @@ test.meta({ unstable: true })('Header filter popup', async (t) => {
   const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
   const pivotGrid = new PivotGrid(PIVOT_GRID_SELECTOR);
 
-  await t.click(pivotGrid.getColumnHeaderArea().getHeaderFilterIcon());
+  await t.click(pivotGrid.getColumnHeaderArea().getHeaderFilterIcon().element);
 
   await testScreenshot(t, takeScreenshot, 'headerFilter - before scroll.png');
 
@@ -59,7 +59,7 @@ test.meta({ unstable: true })('Header filter popup', async (t) => {
 test('[T1284200] Should handle dxList "selectAll" when has unselected items on the second page', async (t) => {
   const pivotGrid = new PivotGrid(PIVOT_GRID_SELECTOR);
 
-  const filterIconElement = pivotGrid.getColumnHeaderArea().getHeaderFilterIcon();
+  const filterIconElement = pivotGrid.getColumnHeaderArea().getHeaderFilterIcon().element;
   const headerFilter = new HeaderFilter();
   const list = headerFilter.getList();
 
diff --git a/e2e/testcafe-devextreme/tests/pivotGrid/sort/localSort_T1150523.ts b/e2e/testcafe-devextreme/tests/pivotGrid/sort/localSort_T1150523.ts
@@ -53,7 +53,7 @@ test('Should sort without DataSource reload if scrolling mode isn\'t virtual', a
   await t.addRequestHooks(requestLogger);
   const initialRequestCount = await requestLogger.count(() => true);
 
-  await t.click(pivotGrid.getColumnHeaderArea().getAction());
+  await t.click(pivotGrid.getColumnHeaderArea().getField());
 
   const afterSortRequestCount = await requestLogger.count(() => true);
   const requestCount = afterSortRequestCount - initialRequestCount;
@@ -94,7 +94,7 @@ test.meta({ unstable: true })('Should sort with DataSource reload if scrolling m
   await t.addRequestHooks(requestLogger);
   const initialRequestCount = await requestLogger.count(() => true);
 
-  await t.click(pivotGrid.getColumnHeaderArea().getAction());
+  await t.click(pivotGrid.getColumnHeaderArea().getField());
 
   const afterSortRequestCount = await requestLogger.count(() => true);
   const requestCount = afterSortRequestCount - initialRequestCount;
diff --git a/e2e/testcafe-devextreme/tests/pivotGrid/sort/sortWithSummaryDisplayMode_T1173442.ts b/e2e/testcafe-devextreme/tests/pivotGrid/sort/sortWithSummaryDisplayMode_T1173442.ts
@@ -17,8 +17,8 @@ test('Should apply sort changes to the markup if the "summaryDisplayMode" is set
     'T1173442_before_sort_with_summary_display_mode.png',
     { element: pivotGrid.element },
   );
-  await t.click(pivotGrid.getColumnHeaderArea().getAction());
-  await t.click(pivotGrid.getRowHeaderArea().getAction());
+  await t.click(pivotGrid.getColumnHeaderArea().getField());
+  await t.click(pivotGrid.getRowHeaderArea().getField());
   await testScreenshot(
     t,
     takeScreenshot,
diff --git a/packages/devextreme/js/__internal/grids/pivot_grid/field_chooser/m_field_chooser_base.ts b/packages/devextreme/js/__internal/grids/pivot_grid/field_chooser/m_field_chooser_base.ts
@@ -43,7 +43,7 @@ const processItems = function (groupItems, field) {
 
   if (field.filterValues) {
     each(field.filterValues, (_, filterValue) => {
-      filterValues.push(Array.isArray(filterValue) ? filterValue.join('/') : filterValue && filterValue.valueOf());
+      filterValues.push(Array.isArray(filterValue) ? filterValue.join('/') : filterValue?.valueOf());
     });
   }
 
@@ -53,7 +53,7 @@ const processItems = function (groupItems, field) {
     const preparedFilterValueByText = isTree ? map(items, (item) => item.text).reverse().join('/') : item.text;
 
     item.value = isTree ? path.slice(0) : item.key || item.value;
-    const preparedFilterValue = isTree ? path.join('/') : item.value && item.value.valueOf();
+    const preparedFilterValue = isTree ? path.join('/') : item.value?.valueOf();
 
     if (item.children) {
       item.items = item.children;
@@ -133,8 +133,7 @@ export class FieldChooserBase extends mixinWidget {
   _refreshDataSource() {
     const dataSource = this.option('dataSource');
 
-    if (dataSource
-        && dataSource.fields && dataSource.load/* instanceof DX.ui.dxPivotGrid.DataSource */) {
+    if (dataSource?.fields && dataSource.load/* instanceof DX.ui.dxPivotGrid.DataSource */) {
       this._dataSource = dataSource;
     }
   }
@@ -189,6 +188,7 @@ export class FieldChooserBase extends mixinWidget {
             alignment: that.option('rtlEnabled') ? 'right' : 'left',
             sortOrder: field.sortOrder === 'desc' ? 'desc' : 'asc',
             allowSorting: field.allowSorting,
+            caption: field.caption || field.dataField,
           },
           showColumnLines,
         });
@@ -202,6 +202,7 @@ export class FieldChooserBase extends mixinWidget {
           filterValues: mainGroupField.filterValues,
           allowFiltering: mainGroupField.allowFiltering && !field.groupIndex,
           allowSorting: field.allowSorting,
+          caption: field.caption || field.dataField,
         },
         showColumnLines,
       });
diff --git a/packages/testcafe-models/pivotGrid/columnHeaderArea.ts b/packages/testcafe-models/pivotGrid/columnHeaderArea.ts
@@ -1,8 +1,9 @@
 import { Selector } from 'testcafe';
+import HeaderFilter from './headerFilter';
 
 const CLASSES = {
   columnHeader: 'dx-column-header',
-  action: 'dx-pivotgrid-action',
+  field: 'dx-area-field',
   columnIndicators: 'dx-column-indicators',
   headerFilter: {
     icon: 'dx-header-filter',
@@ -19,8 +20,8 @@ export default class ColumnHeaderArea {
     this.element = selector.find(`.${CLASSES.columnHeader}`);
   }
 
-  getAction(idx = 0): Selector {
-    return this.element.find(`.${CLASSES.action}`).nth(idx);
+  getField(idx = 0): Selector {
+    return this.element.find(`.${CLASSES.field}`).nth(idx);
   }
 
   // todo: move header filter to seperate file
@@ -31,8 +32,8 @@ export default class ColumnHeaderArea {
     return Selector(`.${CLASSES.headerFilter.menu}`);
   }
 
-  getHeaderFilterIcon(idx = 0): Selector {
-    return this.getAction(idx).find(`.${CLASSES.headerFilter.icon}`);
+  getHeaderFilterIcon(idx = 0): HeaderFilter {
+    return new HeaderFilter(this.getField(idx));
   }
 
   getHeaderFilterScrollable(): Selector {
diff --git a/packages/testcafe-models/pivotGrid/dataHeaderArea.ts b/packages/testcafe-models/pivotGrid/dataHeaderArea.ts
@@ -11,7 +11,7 @@ export default class DataHeaderArea {
     this.element = selector.find(`.${CLASSES.dataHeader}`);
   }
 
-  getAction(idx = 0): Selector {
+  getField(idx = 0): Selector {
     return this.element.find(`.${CLASSES.field}.${CLASSES.box}`).nth(idx);
   }
 }
diff --git a/packages/testcafe-models/pivotGrid/filterHeaderArea.ts b/packages/testcafe-models/pivotGrid/filterHeaderArea.ts
@@ -0,0 +1,23 @@
+import HeaderFilter from './headerFilter';
+
+const CLASSES = {
+  header: 'dx-pivotgrid-fields-area',
+  field: 'dx-area-field',
+  fieldButton: 'dx-header-filter',
+};
+
+export default class FilterHeaderArea {
+  private readonly element: Selector;
+
+  constructor(selector: Selector) {
+    this.element = selector.find(`.${CLASSES.header}`);
+  }
+
+  getField(idx = 0): Selector {
+    return this.element.find(`.${CLASSES.field}`).nth(idx);
+  }
+
+  getHeaderFilterIcon(idx = 0): HeaderFilter {
+    return new HeaderFilter(this.getField(idx));
+  }
+}
diff --git a/packages/testcafe-models/pivotGrid/headerFilter.ts b/packages/testcafe-models/pivotGrid/headerFilter.ts
@@ -0,0 +1,14 @@
+const CLASSES = {
+  icon: 'dx-header-filter',
+};
+
+export default class HeaderFilter {
+  public readonly element: Selector;
+
+  public readonly ariaLabel: Promise<string | null>;
+
+  constructor(selector: Selector) {
+    this.element = selector.find(`.${CLASSES.icon}`);
+    this.ariaLabel = this.element.getAttribute('aria-label');
+  }
+}
diff --git a/packages/testcafe-models/pivotGrid/index.ts b/packages/testcafe-models/pivotGrid/index.ts
@@ -1,10 +1,11 @@
 import { ClientFunction, Selector } from 'testcafe';
 import type { WidgetName } from '../types';
 import Widget from '../internal/widget';
+import Popup from '../popup';
 import ColumnHeaderArea from './columnHeaderArea';
 import DataHeaderArea from './dataHeaderArea';
 import FieldChooser from './fieldChooser';
-import Popup from '../popup';
+import FilterHeaderArea from './filterHeaderArea';
 import Overlay from './overlay';
 import RowHeaderArea from './rowHeaderArea';
 import RowsArea from './rowsArea';
@@ -65,6 +66,10 @@ export default class PivotGrid extends Widget {
     return new ColumnHeaderArea(this.element);
   }
 
+  getFilterHeaderArea():FilterHeaderArea {
+    return new FilterHeaderArea(this.element);
+  }
+
   getRowHeaderArea(): RowHeaderArea {
     return new RowHeaderArea(this.element);
   }
diff --git a/packages/testcafe-models/pivotGrid/rowHeaderArea.ts b/packages/testcafe-models/pivotGrid/rowHeaderArea.ts
@@ -1,6 +1,7 @@
+import HeaderFilter from './headerFilter';
+
 const CLASSES = {
   rowHeader: 'dx-area-description-cell',
-  action: 'dx-pivotgrid-action',
   field: 'dx-area-field',
 };
 
@@ -11,11 +12,11 @@ export default class RowHeaderArea {
     this.element = selector.find(`.${CLASSES.rowHeader}`);
   }
 
-  getAction(idx = 0): Selector {
-    return this.element.find(`.${CLASSES.action}`).nth(idx);
-  }
-
   getField(idx = 0): Selector {
     return this.element.find(`.${CLASSES.field}`).nth(idx);
   }
+
+  getHeaderFilterIcon(idx = 0): HeaderFilter {
+    return new HeaderFilter(this.getField(idx));
+  }
 }

Original file line number	Diff line number	Diff line change
`@@ -11,7 +11,7 @@ export default class DataHeaderArea {`
`11`	`11`	this.element = selector.find(`.${CLASSES.dataHeader}`);
`12`	`12`	`}`
`13`	`13`
`14`		`- getAction(idx = 0): Selector {`
	`14`	`+ getField(idx = 0): Selector {`
`15`	`15`	return this.element.find(`.${CLASSES.field}.${CLASSES.box}`).nth(idx);
`16`	`16`	`}`
`17`	`17`	`}`