PivotGrid - A11y: describe field areas, open field context menu from keyboard, axe tests by aleksei-semikozov · Pull Request #34375 · DevExpress/DevExtreme

aleksei-semikozov · 2026-07-17T16:33:01Z

No description provided.

…-polish

…ption

…h Shift+F10 in e2e

Copilot

Pull request overview

Improves PivotGrid accessibility by exposing field areas as ARIA menubars with descriptive labels, adding keyboard support for opening the field context menu, and introducing automated accessibility coverage (axe + unit/e2e checks).

Changes:

Expose populated PivotGrid field areas as role="menubar" with localized aria-label and an interaction aria-description; keep empty areas presentational to avoid invalid ARIA.
Add per-field role="menuitem" and richer aria-label that reflects sorting/header-filter state.
Add keyboard support for opening the field context menu (Shift+F10 / ContextMenu key) and add Jest/TestCafe/axe tests to cover the behavior.

Reviewed changes

Copilot reviewed 45 out of 45 changed files in this pull request and generated no comments.

Show a summary per file

File	Description
packages/devextreme/testing/tests/DevExpress.ui.widgets.pivotGrid/pivotGrid.markup.tests.js	Updates QUnit markup assertions for menubar semantics and empty-area behavior
packages/devextreme/js/__internal/grids/pivot_grid/m_widget.ts	Wires keyboard-triggered field context menu opening into the PivotGrid context menu flow
packages/devextreme/js/__internal/grids/pivot_grid/fields_area/m_fields_area.ts	Implements menubar/presentation role switching for field areas and adds interaction description
packages/devextreme/js/__internal/grids/pivot_grid/field_chooser/m_field_chooser.ts	Applies menubar semantics + description to field chooser area containers when populated
packages/devextreme/js/__internal/grids/pivot_grid/field_chooser/m_field_chooser_base.ts	Adds menuitem semantics/labels for fields and handles Shift+F10/ContextMenu key events
packages/devextreme/js/__internal/grids/pivot_grid/field_chooser/a11y.ts	New helper to build localized field/menu labels and area descriptions
packages/devextreme/js/__internal/grids/pivot_grid/field_chooser/a11y.test.ts	New Jest unit tests for the a11y label/description helpers
e2e/testcafe-devextreme/tests/common/pivotGrid/kbn/fields.ts	Extends keyboard-navigation e2e coverage for menubar/menuitem exposure and Shift+F10 context menu behavior
e2e/testcafe-devextreme/tests/accessibility/pivotGrid.ts	New axe-based accessibility checks for PivotGrid main UI and key popups
packages/devextreme/js/localization/messages/ar.json	Adds new PivotGrid ARIA-related message keys
packages/devextreme/js/localization/messages/bg.json	Adds new PivotGrid ARIA-related message keys
packages/devextreme/js/localization/messages/ca.json	Adds new PivotGrid ARIA-related message keys
packages/devextreme/js/localization/messages/cs.json	Adds new PivotGrid ARIA-related message keys
packages/devextreme/js/localization/messages/da.json	Adds new PivotGrid ARIA-related message keys
packages/devextreme/js/localization/messages/de.json	Adds new PivotGrid ARIA-related message keys
packages/devextreme/js/localization/messages/el.json	Adds new PivotGrid ARIA-related message keys
packages/devextreme/js/localization/messages/en.json	Adds new PivotGrid ARIA-related message keys
packages/devextreme/js/localization/messages/es.json	Adds new PivotGrid ARIA-related message keys
packages/devextreme/js/localization/messages/fa.json	Adds new PivotGrid ARIA-related message keys
packages/devextreme/js/localization/messages/fi.json	Adds new PivotGrid ARIA-related message keys
packages/devextreme/js/localization/messages/fr.json	Adds new PivotGrid ARIA-related message keys
packages/devextreme/js/localization/messages/hi.json	Adds new PivotGrid ARIA-related message keys
packages/devextreme/js/localization/messages/hu.json	Adds new PivotGrid ARIA-related message keys
packages/devextreme/js/localization/messages/it.json	Adds new PivotGrid ARIA-related message keys
packages/devextreme/js/localization/messages/ja.json	Adds new PivotGrid ARIA-related message keys
packages/devextreme/js/localization/messages/ko.json	Adds new PivotGrid ARIA-related message keys
packages/devextreme/js/localization/messages/lt.json	Adds new PivotGrid ARIA-related message keys
packages/devextreme/js/localization/messages/lv.json	Adds new PivotGrid ARIA-related message keys
packages/devextreme/js/localization/messages/nb.json	Adds new PivotGrid ARIA-related message keys
packages/devextreme/js/localization/messages/nl.json	Adds new PivotGrid ARIA-related message keys
packages/devextreme/js/localization/messages/pl.json	Adds new PivotGrid ARIA-related message keys
packages/devextreme/js/localization/messages/pt.json	Adds new PivotGrid ARIA-related message keys
packages/devextreme/js/localization/messages/pt-BR.json	Adds new PivotGrid ARIA-related message keys
packages/devextreme/js/localization/messages/pt-PT.json	Adds new PivotGrid ARIA-related message keys
packages/devextreme/js/localization/messages/ro.json	Adds new PivotGrid ARIA-related message keys
packages/devextreme/js/localization/messages/ru.json	Adds new PivotGrid ARIA-related message keys
packages/devextreme/js/localization/messages/sl.json	Adds new PivotGrid ARIA-related message keys
packages/devextreme/js/localization/messages/sv.json	Adds new PivotGrid ARIA-related message keys
packages/devextreme/js/localization/messages/tr.json	Adds new PivotGrid ARIA-related message keys
packages/devextreme/js/localization/messages/uk.json	Adds new PivotGrid ARIA-related message keys
packages/devextreme/js/localization/messages/vi.json	Adds new PivotGrid ARIA-related message keys
packages/devextreme/js/localization/messages/zh.json	Adds new PivotGrid ARIA-related message keys
packages/devextreme/js/localization/messages/zh-CN.json	Adds new PivotGrid ARIA-related message keys
packages/devextreme/js/localization/messages/zh-Hans.json	Adds new PivotGrid ARIA-related message keys
packages/devextreme/js/localization/messages/zh-tw.json	Adds new PivotGrid ARIA-related message keys

Copilot

Pull request overview

Copilot reviewed 47 out of 47 changed files in this pull request and generated 3 comments.

+    describeDataCellsWithHeaders(
+      columnsArea.headElement().get(0),
+      rowsArea.tableElement().children('tbody').get(0),
+      dataArea.tableElement().children('tbody').get(0),
+    );


+import { describe, expect, it } from '@jest/globals';
+
+import { describeDataCellsWithHeaders } from './data_cell_description';
+
+const createSection = (tag: 'thead' | 'tbody', rowsHtml: string): HTMLTableSectionElement => {
+  const table = document.createElement('table');
+  table.innerHTML = `<${tag}>${rowsHtml}</${tag}>`;
+  return table.querySelector(tag) as HTMLTableSectionElement;
+};


+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);
+
+  // Parity with the mouse: right-click on the popup fields does not show the
+  // grid context menu either.
+  await t
+    .click(firstField)
+    .dispatchEvent(firstField, 'keydown', SHIFT_F10_KEYDOWN)
+    .expect(contextMenu.exists)
+    .notOk('the grid context menu is not shown for a field chooser popup field');
+}).before(async () => createWidget('dxPivotGrid', createConfig()));


…reas

Copilot

Pull request overview

Copilot reviewed 47 out of 47 changed files in this pull request and generated no new comments.

Comments suppressed due to low confidence (1)

packages/devextreme/js/__internal/grids/pivot_grid/a11y/data_cell_description.test.ts:5

These Jest tests append table sections into document.body but never clean them up. Since Jest/JSDOM shares the same document across tests in the file, this can leak nodes between tests and make failures order-dependent. Add an afterEach hook to clear the DOM after every test.

import { describe, expect, it } from '@jest/globals';

import { describeDataCellsWithHeaders } from './data_cell_description';

const createSection = (tag: 'thead' | 'tbody', rowsHtml: string): HTMLTableSectionElement => {

Aleksey Semikozov and others added 8 commits July 16, 2026 10:04

PivotGrid - KBN - Add ARIA attributes to area fields

3025411

PivotGrid - KBN - Fix ascending sort ARIA field message key typo

eaa4083

Merge branch 'main' into pivotgrid-kbn-fields-aria-attrs-main

ffafcff

PivotGrid - KBN - Reset stale menubar role on hidden field areas

745ab50

Merge remote-tracking branch 'upstream/main' into pivotgrid-a11y-4196…

683a793

…-polish

PivotGrid - Add axe accessibility tests

81b084a

PivotGrid - Describe field area keyboard interactions via aria-descri…

827e285

…ption

PivotGrid - Open field context menu from keyboard

089cf97

aleksei-semikozov added the 26_2 label Jul 17, 2026

aleksei-semikozov self-assigned this Jul 17, 2026

PivotGrid - Handle the context menu handler option change and dispatc…

982706d

…h Shift+F10 in e2e

aleksei-semikozov added the skip-cache label Jul 17, 2026

aleksei-semikozov closed this Jul 17, 2026

aleksei-semikozov reopened this Jul 17, 2026

aleksei-semikozov removed the skip-cache label Jul 17, 2026

aleksei-semikozov marked this pull request as ready for review July 17, 2026 18:53

aleksei-semikozov requested a review from a team as a code owner July 17, 2026 18:53

Copilot AI review requested due to automatic review settings July 17, 2026 18:53

aleksei-semikozov requested a review from a team as a code owner July 17, 2026 18:53

Copilot started reviewing on behalf of aleksei-semikozov July 17, 2026 18:54 View session

Copilot AI reviewed Jul 17, 2026

View reviewed changes

PivotGrid - Describe data cells with their row and column headers

1a46891

Copilot AI review requested due to automatic review settings July 17, 2026 22:07

Copilot started reviewing on behalf of aleksei-semikozov July 17, 2026 22:08 View session

Copilot AI reviewed Jul 17, 2026

View reviewed changes

PivotGrid - Resolve area sections defensively for partially stubbed a…

c201add

…reas

Copilot AI review requested due to automatic review settings July 17, 2026 22:22

Copilot started reviewing on behalf of aleksei-semikozov July 17, 2026 22:22 View session

Copilot AI reviewed Jul 17, 2026

View reviewed changes

aleksei-semikozov added the skip-cache label Jul 17, 2026

aleksei-semikozov closed this Jul 17, 2026

aleksei-semikozov reopened this Jul 17, 2026

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

PivotGrid - A11y: describe field areas, open field context menu from keyboard, axe tests#34375

PivotGrid - A11y: describe field areas, open field context menu from keyboard, axe tests#34375
aleksei-semikozov wants to merge 11 commits into
DevExpress:mainfrom
aleksei-semikozov:pivotgrid-a11y-4196-polish

aleksei-semikozov commented Jul 17, 2026

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI left a comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Uh oh!

Conversation

aleksei-semikozov commented Jul 17, 2026

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants