DevExpress · aleksei-semikozov · Jul 16, 2026 · Jul 16, 2026 · Jul 17, 2026 · Jul 17, 2026
diff --git a/e2e/testcafe-devextreme/tests/accessibility/pivotGrid.ts b/e2e/testcafe-devextreme/tests/accessibility/pivotGrid.ts
@@ -0,0 +1,116 @@
+import PivotGrid from 'devextreme-testcafe-models/pivotGrid';
+import { Selector } from 'testcafe';
+import url from '../../helpers/getPageUrl';
+import { createWidget } from '../../helpers/createWidget';
+import { a11yCheck } from '../../helpers/accessibility/utils';
+
+fixture.disablePageReloads`PivotGrid - Accessibility`
+  .page(url(__dirname, '../container.html'));
+
+const PIVOT_GRID_SELECTOR = '#container';
+
+const createConfig = () => ({
+  width: 1000,
+  allowSorting: true,
+  allowSortingBySummary: true,
+  allowFiltering: true,
+  allowExpandAll: true,
+  showBorders: true,
+  fieldPanel: {
+    visible: true,
+  },
+  fieldChooser: {
+    enabled: true,
+    height: 500,
+  },
+  dataSource: {
+    fields: [{
+      dataField: 'country',
+      area: 'filter',
+    }, {
+      caption: 'Region',
+      width: 120,
+      dataField: 'region',
+      area: 'row',
+    }, {
+      caption: 'City',
+      dataField: 'city',
+      width: 150,
+      area: 'row',
+    }, {
+      caption: 'Country',
+      dataField: 'country',
+      area: 'column',
+    }, {
+      dataField: 'date',
+      dataType: 'date',
+      area: 'column',
+    }, {
+      groupName: 'date',
+      groupInterval: 'year',
+      expanded: true,
+      area: 'column',
+    }, {
+      caption: 'Sales',
+      dataField: 'amount',
+      dataType: 'number',
+      summaryType: 'sum',
+      area: 'data',
+    }],
+    store: [{
+      region: 'Africa',
+      country: 'Egypt',
+      city: 'Cairo',
+      amount: 500,
+      date: new Date('2015-05-26'),
+    }, {
+      region: 'South America',
+      country: 'Argentina',
+      city: 'Buenos Aires',
+      amount: 780,
+      date: new Date('2015-05-07'),
+    }],
+  },
+});
+
+test('grid with field panel', async (t) => {
+  await a11yCheck(t, {}, PIVOT_GRID_SELECTOR);
+}).before(async () => createWidget('dxPivotGrid', createConfig()));
+
+// The popup/menu widgets are portaled to <body>, outside the harness page
+// landmarks, so the best-practice 'region' rule fires on them regardless of
+// the widget's own accessibility (same convention as dataGrid/cardView a11y
+// tests). It is disabled for the overlay scenarios.
+const overlayA11yOptions = { rules: { region: { enabled: false } } };
+
+test('field chooser popup', async (t) => {
+  const pivotGrid = new PivotGrid(PIVOT_GRID_SELECTOR);
+
+  await t.click(pivotGrid.getFieldChooserButton());
+
+  await a11yCheck(t, overlayA11yOptions);
+}).before(async () => createWidget('dxPivotGrid', createConfig()));
+
+test('header filter popup', async (t) => {
+  const pivotGrid = new PivotGrid(PIVOT_GRID_SELECTOR);
+  const filterIcon = pivotGrid
+    .getColumnHeaderArea()
+    .getHeaderFilterIcon()
+    .element;
+
+  await t.click(filterIcon);
+
+  await t.expect(Selector('.dx-header-filter-menu .dx-list-item').visible).ok();
+
+  await a11yCheck(t, overlayA11yOptions);
+}).before(async () => createWidget('dxPivotGrid', createConfig()));
+
+test('cell context menu', async (t) => {
+  const columnHeaderCell = Selector('.dx-pivotgrid-horizontal-headers td[tabindex]');
+
+  await t.rightClick(columnHeaderCell);
+
+  await t.expect(Selector('.dx-context-menu .dx-menu-item').visible).ok();
+
+  await a11yCheck(t, overlayA11yOptions);
+}).before(async () => createWidget('dxPivotGrid', createConfig()));
diff --git a/e2e/testcafe-devextreme/tests/common/pivotGrid/kbn/fields.ts b/e2e/testcafe-devextreme/tests/common/pivotGrid/kbn/fields.ts
@@ -405,3 +405,56 @@ test('FieldChooser: Should traverse fields in all areas by tab', async (t) => {
     .expect(dataFirstField.focused)
     .ok('first field in data area is focused');
 }).before(async () => createWidget('dxPivotGrid', createConfig()));
+
+// TestCafe's pressKey does not support function keys (F1-F12), so the Shift+F10
+// shortcut is reproduced by dispatching the keydown event on the focused field.
+const SHIFT_F10_KEYDOWN = {
+  key: 'F10', code: 'F10', shiftKey: true, bubbles: true, cancelable: true,
+};
+
+test('PivotGrid: Should open the context menu by Shift+F10 on a field', async (t) => {
+  const pivotGrid = new PivotGrid(PIVOT_GRID_SELECTOR);
+  const firstField = pivotGrid.getRowHeaderArea().getField(0);
+  const contextMenuItem = Selector('.dx-context-menu .dx-menu-item-text').withText('Show Field Chooser');
+
+  await t
+    .click(firstField)
+    .expect(firstField.focused)
+    .ok('field is focused after click')
+    .dispatchEvent(firstField, 'keydown', SHIFT_F10_KEYDOWN)
+    .expect(contextMenuItem.visible)
+    .ok('the field context menu is shown after Shift+F10');
+}).before(async () => createWidget('dxPivotGrid', createConfig()));
+
+test('PivotGrid: Field should have focus after the context menu is closed', async (t) => {
+  const pivotGrid = new PivotGrid(PIVOT_GRID_SELECTOR);
+  const firstField = pivotGrid.getRowHeaderArea().getField(0);
+  const contextMenuItem = Selector('.dx-context-menu .dx-menu-item-text').withText('Show Field Chooser');
+
+  await t
+    .click(firstField)
+    .dispatchEvent(firstField, 'keydown', SHIFT_F10_KEYDOWN)
+    .expect(contextMenuItem.visible)
+    .ok('the field context menu is shown after Shift+F10');
+
+  await t
+    .pressKey('esc')
+    .expect(firstField.focused)
+    .ok('the field is focused after the context menu is closed');
+}).before(async () => createWidget('dxPivotGrid', createConfig()));
+
+test('FieldChooser: Shift+F10 on a popup field should not open the grid context menu', async (t) => {
+  const pivotGrid = new PivotGrid(PIVOT_GRID_SELECTOR);
+  const fieldChooser = pivotGrid.getFieldChooser();
+  const contextMenu = Selector('.dx-context-menu .dx-menu-item-text');
+
+  await t.click(pivotGrid.getFieldChooserButton());
+
+  const firstField = fieldChooser.getRowAreaItem(0);
+
+  await t
+    .click(firstField)
+    .dispatchEvent(firstField, 'keydown', SHIFT_F10_KEYDOWN)
+    .expect(contextMenu.visible)
+    .notOk('the grid context menu is not shown for a field chooser popup field');
+}).before(async () => createWidget('dxPivotGrid', createConfig()));
diff --git a/packages/devextreme/js/__internal/grids/pivot_grid/area_item/m_area_item.ts b/packages/devextreme/js/__internal/grids/pivot_grid/area_item/m_area_item.ts
@@ -287,8 +287,8 @@ abstract class AreaItem {
             div.setAttribute('aria-expanded', String(cell.expanded));
             div.setAttribute('tabindex', isCellNavigationEnabled ? '-1' : '0');
 
-            // With cell navigation the cell itself is the focus target, so it
-            // must expose the expanded state to assistive technologies.
+            span.setAttribute('aria-hidden', 'true');
+
             if (isCellNavigationEnabled) {
               td.setAttribute('aria-expanded', String(cell.expanded));
             }

diff --git a/packages/devextreme/js/__internal/grids/pivot_grid/field_chooser/a11y.test.ts b/packages/devextreme/js/__internal/grids/pivot_grid/field_chooser/a11y.test.ts
@@ -3,21 +3,24 @@ import {
 } from '@jest/globals';
 import messageLocalization from '@js/common/core/localization/message';
 
-import { getFieldItemA11yLabel } from './a11y';
+import { getFieldItemA11yLabel, getFieldsHotkeysA11yDescription, getFieldsHotkeysA11yLabel } from './a11y';
 
-describe('getFieldItemA11yLabel', () => {
-  beforeAll(() => {
-    // @ts-expect-error load is not declared on the localization typing
-    messageLocalization.load({
-      en: {
-        'dxPivotGrid-ariaFieldLabel': 'Field: {0}',
-        'dxPivotGrid-ariaFieldHeaderFilterLabel': 'Header filter applied',
-        'dxPivotGrid-ariaFieldSortAscLabel': 'Sort order: ascending',
-        'dxPivotGrid-ariaFieldSortDescLabel': 'Sort order: descending',
-      },
-    });
+const AREA_DESCRIPTION = 'Press Enter or Space to sort by the field, Alt + Down arrow to open the header filter, Shift + F10 to open the context menu';
+
+beforeAll(() => {
+  // @ts-expect-error load is not declared on the localization typing
+  messageLocalization.load({
+    en: {
+      'dxPivotGrid-ariaFieldLabel': 'Field: {0}',
+      'dxPivotGrid-ariaFieldHeaderFilterLabel': 'Header filter applied',
+      'dxPivotGrid-ariaFieldSortAscLabel': 'Sort order: ascending',
+      'dxPivotGrid-ariaFieldSortDescLabel': 'Sort order: descending',
+      'dxPivotGrid-ariaFieldsAreaDescription': AREA_DESCRIPTION,
+    },
   });
+});
 
+describe('getFieldItemA11yLabel', () => {
   it('should contain only the field name by default', () => {
     expect(getFieldItemA11yLabel('Region', {})).toBe('Field: Region');
   });
@@ -42,3 +45,20 @@ describe('getFieldItemA11yLabel', () => {
       .toBe('Field: Region, Header filter applied, Sort order: ascending');
   });
 });
+
+describe('getFieldsHotkeysA11yDescription', () => {
+  it('should return the localized interaction description', () => {
+    expect(getFieldsHotkeysA11yDescription()).toBe(AREA_DESCRIPTION);
+  });
+});
+
+describe('getFieldsHotkeysA11yLabel', () => {
+  it('should compose the base label with the interaction description', () => {
+    expect(getFieldsHotkeysA11yLabel('Pivot grid')).toBe(`Pivot grid. ${AREA_DESCRIPTION}`);
+  });
+
+  it('should fall back to the description alone when the base label is empty', () => {
+    expect(getFieldsHotkeysA11yLabel(undefined)).toBe(AREA_DESCRIPTION);
+    expect(getFieldsHotkeysA11yLabel('')).toBe(AREA_DESCRIPTION);
+  });
+});
diff --git a/packages/devextreme/js/__internal/grids/pivot_grid/field_chooser/a11y.ts b/packages/devextreme/js/__internal/grids/pivot_grid/field_chooser/a11y.ts
@@ -8,6 +8,7 @@ const I18N_KEYS = {
   hasHeaderFilter: 'dxPivotGrid-ariaFieldHeaderFilterLabel',
   sortingAsc: 'dxPivotGrid-ariaFieldSortAscLabel',
   sortingDesc: 'dxPivotGrid-ariaFieldSortDescLabel',
+  fieldsAreaDescription: 'dxPivotGrid-ariaFieldsAreaDescription',
 };
 
 const I18N_MESSAGE_SEPARATOR = ', ';
@@ -28,6 +29,14 @@ const getSortingLabel = (sortOrder?: SortOrderType): string | null => {
   }
 };
 
+export const getFieldsHotkeysA11yDescription = (): string => messageLocalization
+  .format(I18N_KEYS.fieldsAreaDescription);
+
+export const getFieldsHotkeysA11yLabel = (baseLabel?: string): string => {
+  const description = getFieldsHotkeysA11yDescription();
+  return baseLabel ? `${baseLabel}. ${description}` : description;
+};
+
 export const getFieldItemA11yLabel = (
   caption: string,
   { sortOrder, hasHeaderFilterValue }: FieldItemA11yOptions,

diff --git a/packages/devextreme/js/__internal/grids/pivot_grid/field_chooser/m_field_chooser.ts b/packages/devextreme/js/__internal/grids/pivot_grid/field_chooser/m_field_chooser.ts
@@ -12,6 +12,7 @@ import ContextMenu from '@js/ui/context_menu';
 import TreeView from '@js/ui/tree_view';
 
 import { foreachDataLevel, getCompareFunction } from '../m_widget_utils';
+import { getFieldsHotkeysA11yLabel } from './a11y';
 import { ATTRIBUTES, CLASSES, ICONS } from './const';
 import { FieldChooserBase } from './m_field_chooser_base';
 
@@ -261,7 +262,9 @@ export class FieldChooser extends FieldChooserBase {
 
     $element
       .addClass(CLASSES.fieldChooser.self)
-      .addClass(CLASSES.pivotGrid.fieldsContainer);
+      .addClass(CLASSES.pivotGrid.fieldsContainer)
+      .attr('role', 'group')
+      .attr('aria-label', getFieldsHotkeysA11yLabel(localizationMessage.format('dxPivotGrid-fieldChooserTitle')));
 
     that._dataChangedHandlers = [];
 

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
@@ -48,6 +48,12 @@ function isFieldNavigationEvent(e): boolean {
     && !e.altKey && !e.ctrlKey && !e.metaKey && !e.shiftKey;
 }
 
+function isContextMenuKeyEvent(e): boolean {
+  return e.type === 'keydown'
+    && !e.repeat
+    && (e.key === 'ContextMenu' || (e.shiftKey && e.key === 'F10'));
+}
+
 class HeaderFilterView extends HeaderFilterViewBase {
   _getSearchExpr(options, headerFilterOptions) {
     options.useDefaultSearchExpr = true;
@@ -127,6 +133,7 @@ export class FieldChooserBase extends mixinWidget {
         allowFieldDragging: true,
         applyChangesMode: 'instantly',
         state: undefined,
+        onFieldContextMenuKeyDown: null,
         headerFilter: {
           width: 252,
           height: 325,
@@ -187,6 +194,7 @@ export class FieldChooserBase extends mixinWidget {
         break;
       case 'applyChangesMode':
       case 'remoteSort':
+      case 'onFieldContextMenuKeyDown':
         break;
       case 'state':
         if (this._skipStateChange || !this._dataSource) {
@@ -424,6 +432,11 @@ export class FieldChooserBase extends mixinWidget {
         return;
       }
 
+      if (isContextMenuKeyEvent(e)) {
+        this._handleFieldContextMenuKey(e, field);
+        return;
+      }
+
       if (!isClick) {
         return;
       }
@@ -555,6 +568,24 @@ export class FieldChooserBase extends mixinWidget {
     return FIELD_NAVIGATION_DELTAS[key];
   }
 
+  private _handleFieldContextMenuKey(e, field): void {
+    const onContextMenuKey = this.option('onFieldContextMenuKeyDown');
+
+    if (!field.area || !onContextMenuKey) {
+      return;
+    }
+
+    const navigation = this._getFieldNavigation(field.area);
+
+    // The event can bubble to another instance subscribed to an ancestor
+    // element; the field then does not belong to this instance's items.
+    if (!navigation.getItems().includes(e.currentTarget)) {
+      return;
+    }
+
+    onContextMenuKey(e, navigation);
+  }
+
   private _handleFieldNavigation(e, field): void {
     if (!field.area) {
       return;