PivotGrid - A11y: describe field areas, open field context menu from keyboard, axe tests#34375
Open
aleksei-semikozov wants to merge 21 commits into
Open
PivotGrid - A11y: describe field areas, open field context menu from keyboard, axe tests#34375aleksei-semikozov wants to merge 21 commits into
aleksei-semikozov wants to merge 21 commits into
Conversation
…h Shift+F10 in e2e
Contributor
There was a problem hiding this comment.
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 localizedaria-labeland an interactionaria-description; keep empty areas presentational to avoid invalid ARIA. - Add per-field
role="menuitem"and richeraria-labelthat 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 |
Contributor
There was a problem hiding this comment.
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.bodybut 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 anafterEachhook 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 => {
Contributor
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 45 out of 45 changed files in this pull request and generated no new comments.
Comments suppressed due to low confidence (1)
packages/devextreme/testing/tests/DevExpress.ui.widgets.pivotGrid/pivotGrid.markup.tests.js:275
- In this test, calling
.indexOf/.lengthon$table.attr('aria-label')will throw a TypeError if the attribute is unexpectedly missing, which makes failures harder to diagnose. It’s safer to read the value once and fall back to an empty string so the assertions fail normally with clear messages.
…nt-default, e.repeat, robust asserts)
… not read as data columns
Contributor
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 46 out of 46 changed files in this pull request and generated no new comments.
Comments suppressed due to low confidence (1)
e2e/testcafe-devextreme/tests/common/pivotGrid/kbn/fields.ts:132
- The assertion message says the menubar label “starts with” the area name, but the test uses
.contains('Row Fields', ...), which would still pass if the area name appears later in the label. Use a start-anchored check (e.g. regex) to enforce the intended requirement.
.expect(menubar.getAttribute('aria-label'))
.contains('Row Fields', 'the menubar label starts with the area name')
.expect(menubar.getAttribute('aria-label'))
.contains('Shift + F10', 'the menubar label also describes the keyboard interactions');
sjbur
previously approved these changes
Jul 24, 2026
… native menu suppression
Contributor
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 45 out of 45 changed files in this pull request and generated no new comments.
Comments suppressed due to low confidence (1)
packages/devextreme/testing/tests/DevExpress.ui.widgets.pivotGrid/pivotGrid.markup.tests.js:244
aria-labelcan be missing (jQuery returnsundefined), and calling.indexOf(...)/.lengthon it will throw, aborting the test instead of producing an assertion failure. Add a type/exists assertion and bail out when the attribute is not a string before inspecting its contents.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
No description provided.