PivotGrid A11y and KBN - The expand icons are not accessible via keyboard (KBN) by aleksei-semikozov · Pull Request #33709 · DevExpress/DevExtreme

aleksei-semikozov · 2026-05-25T20:23:56Z

No description provided.

Copilot

Pull request overview

This PR improves dxPivotGrid accessibility/keyboard navigation by making expand/collapse controls operable via keyboard and exposing expanded state via ARIA attributes.

Changes:

Added keyboard handling so Enter/Space on expandable header cells toggles expansion.
Added aria-expanded and tabindex="0" to expandable header <td> elements.
Added QUnit coverage for keyboard toggling behavior and the new accessibility markup.

Reviewed changes

Copilot reviewed 4 out of 4 changed files in this pull request and generated 1 comment.

File	Description
packages/devextreme/testing/tests/DevExpress.ui.widgets.pivotGrid/pivotGrid.tests.js	Adds keyboard-driven expand/collapse tests (Enter/Space and negative cases).
packages/devextreme/testing/tests/DevExpress.ui.widgets.pivotGrid/pivotGrid.markup.tests.js	Adds markup tests validating `aria-expanded` and `tabindex` for expandable vs non-expandable cells.
packages/devextreme/js/__internal/grids/pivot_grid/m_widget.ts	Adds `keydown` handling on cells to toggle expansion via keyboard.
packages/devextreme/js/__internal/grids/pivot_grid/area_item/m_area_item.ts	Adds `aria-expanded` and `tabindex` attributes to expandable header cells during rendering.

bit-byte0 · 2026-05-29T14:19:02Z

aria-expanded is valid on gridcell but not on cell (implicit role of <td> in a plain <table>). The pivot grid table has no role="grid". Was this tested with a screen reader?

bit-byte0 · 2026-05-29T14:22:03Z

Isn't it risky to rely on the absence of aria-expanded to identify a non-expandable cell? If aria-expanded is ever removed or renamed, this selector silently targets the wrong element. Wouldn't selecting by row/column index be more reliable?

bit-byte0 · 2026-05-29T14:48:31Z

I tested it locally and found out that _handleCellKeyDown delegates to _handleCellClick, which also triggers cell click handlers. Since a keyboard expand is not a click, shouldn't the expand/collapse logic be called directly instead?

bit-byte0 · 2026-05-29T14:50:08Z

tabindex="0" makes the cell focusable, but outline: 0 is set on all tds in the PivotGrid styles, so there's no visible focus indicator. Keyboard users can't see which cell is focused. Shouldn't a focus style be added? At least I tested it locally and couldn't see a focus thing visually.

Copilot

Pull request overview

Copilot reviewed 5 out of 5 changed files in this pull request and generated 1 comment.

Copilot

Pull request overview

Copilot reviewed 5 out of 5 changed files in this pull request and generated 1 comment.

bit-byte0 · 2026-06-04T19:43:32Z

+      return;
+    }
+    e.preventDefault();
+    this._trigger('onCellClick', args);


CellClickEvent types event in d.ts as MouseEvent | PointerEvent. I'm not sure but now it may need KeyboardEvent added since onCellClick now fires from keyboard too

…add visual test

Copilot

Pull request overview

Copilot reviewed 6 out of 8 changed files in this pull request and generated 2 comments.

Tucchhaa · 2026-06-08T06:52:42Z

            span.classList.add(PIVOTGRID_EXPAND_CLASS);
            div.appendChild(span);
            td.appendChild(div);
+            td.setAttribute('role', 'button');


I agree with copilot. I am not sure if role=button is ok for table cells. I think we need to check screen readers output or discuss it with Andrey D.

…l test

Copilot

Pull request overview

Copilot reviewed 6 out of 8 changed files in this pull request and generated 1 comment.

Copilot

Pull request overview

Copilot reviewed 6 out of 9 changed files in this pull request and generated 2 comments.

Copilot

Pull request overview

Copilot reviewed 6 out of 9 changed files in this pull request and generated 2 comments.

…e the cell

Copilot

Pull request overview

Copilot reviewed 6 out of 9 changed files in this pull request and generated 1 comment.

aleksei-semikozov added the 26_1 label May 25, 2026

aleksei-semikozov self-assigned this May 25, 2026

aleksei-semikozov force-pushed the pivot-grid-kbn branch 2 times, most recently from 05552a8 to 50e613c Compare May 25, 2026 21:31

aleksei-semikozov marked this pull request as ready for review May 29, 2026 13:06

aleksei-semikozov requested a review from a team as a code owner May 29, 2026 13:07

Copilot AI review requested due to automatic review settings May 29, 2026 13:07

Copilot started reviewing on behalf of aleksei-semikozov May 29, 2026 13:07 View session

Copilot AI reviewed May 29, 2026

View reviewed changes

Comment thread packages/devextreme/js/__internal/grids/pivot_grid/m_widget.ts

bit-byte0 reviewed May 29, 2026

View reviewed changes

Copilot AI review requested due to automatic review settings May 29, 2026 15:16

Copilot started reviewing on behalf of aleksei-semikozov May 29, 2026 15:16 View session

Copilot AI reviewed May 29, 2026

View reviewed changes

Comment thread packages/devextreme/js/__internal/grids/pivot_grid/m_widget.ts

Copilot AI review requested due to automatic review settings May 29, 2026 18:43

Copilot started reviewing on behalf of aleksei-semikozov May 29, 2026 18:43 View session

Copilot AI reviewed May 29, 2026

View reviewed changes

Comment thread packages/devextreme/js/__internal/grids/pivot_grid/m_widget.ts

aleksei-semikozov added 7 commits May 29, 2026 18:07

PivotGrid - Add keyboard accessibility to expand icons

791b0e7

PivotGrid - Migrate keyboard accessibility tests to QUnit

2b37dac

PivotGrid - Fix markup test fixture for keyboard a11y tests

6af9b31

PivotGrid - Skip markup a11y tests on serverSide

0884bce

PivotGrid - Refine keyboard a11y per review feedback

0acfa33

PivotGrid - Add role="button" to expandable cells

ee8ccf9

PivotGrid - Ignore key auto-repeat in keyboard expand handler

21d0530

aleksei-semikozov force-pushed the pivot-grid-kbn branch from 0de4c7e to 21d0530 Compare May 29, 2026 21:08

PivotGrid - Restore focus after keyboard expand via shared a11y helpers

035f296

Copilot AI review requested due to automatic review settings May 29, 2026 21:39

Copilot started reviewing on behalf of aleksei-semikozov May 29, 2026 21:39 View session

bit-byte0 reviewed Jun 4, 2026

View reviewed changes

bit-byte0 previously approved these changes Jun 4, 2026

View reviewed changes

Tucchhaa reviewed Jun 5, 2026

View reviewed changes

Comment thread packages/devextreme-scss/scss/widgets/base/pivotGrid/_index.scss Outdated

Tucchhaa requested changes Jun 5, 2026

View reviewed changes

PivotGrid - Fix focus color, type CellClickEvent with KeyboardEvent, …

1ec6b55

…add visual test

Copilot AI review requested due to automatic review settings June 5, 2026 12:58

aleksei-semikozov dismissed bit-byte0’s stale review via 1ec6b55 June 5, 2026 12:58

github-actions Bot added the .d.ts label Jun 5, 2026

Copilot started reviewing on behalf of aleksei-semikozov June 5, 2026 12:58 View session

Copilot AI reviewed Jun 5, 2026

View reviewed changes

aleksei-semikozov added 2 commits June 5, 2026 10:28

PivotGrid - Focus expandable cell via keyboard in visual test

f3a2756

PivotGrid - Tab to expandable cell and disable field chooser in visua…

408a643

…l test

Copilot AI review requested due to automatic review settings June 5, 2026 14:28

Copilot started reviewing on behalf of aleksei-semikozov June 5, 2026 14:28 View session

Copilot AI reviewed Jun 5, 2026

View reviewed changes

Comment thread packages/devextreme/js/__internal/grids/pivot_grid/area_item/m_area_item.ts Outdated

aleksei-semikozov added 2 commits June 5, 2026 12:14

PivotGrid - Add etalon for keyboard focus visual test

2afa221

PivotGrid - Move keyboard focus etalon next to its test

fb7edc5

Copilot AI review requested due to automatic review settings June 5, 2026 15:41

Copilot started reviewing on behalf of aleksei-semikozov June 5, 2026 15:41 View session

Copilot AI reviewed Jun 5, 2026

View reviewed changes

Comment thread packages/devextreme/js/__internal/grids/pivot_grid/m_widget.ts Outdated

Comment thread packages/devextreme/js/__internal/grids/pivot_grid/area_item/m_area_item.ts Outdated

aleksei-semikozov added 2 commits June 5, 2026 13:08

PivotGrid - Use element-scoped etalon for keyboard focus test

b985fa3

PivotGrid - Derive expand cell aria-label from displayed text

a90ef2c

Copilot AI review requested due to automatic review settings June 9, 2026 13:08

Copilot started reviewing on behalf of aleksei-semikozov June 9, 2026 13:08 View session

Copilot AI reviewed Jun 9, 2026

View reviewed changes

Comment thread packages/devextreme/js/__internal/grids/pivot_grid/area_item/m_area_item.ts Outdated

Comment thread packages/devextreme/testing/tests/DevExpress.ui.widgets.pivotGrid/pivotGrid.markup.tests.js Outdated

aleksei-semikozov added 2 commits June 9, 2026 10:24

PivotGrid - Move expand control semantics to a focusable button insid…

2be344d

…e the cell

PivotGrid - Update keyboard focus etalon after moving control semantics

7374b81

Copilot AI review requested due to automatic review settings June 9, 2026 13:44

Copilot started reviewing on behalf of aleksei-semikozov June 9, 2026 13:44 View session

Copilot AI reviewed Jun 9, 2026

View reviewed changes

Comment thread packages/devextreme-scss/scss/widgets/base/pivotGrid/_index.scss

Conversation

aleksei-semikozov commented May 25, 2026

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

bit-byte0 May 29, 2026

Choose a reason for hiding this comment

Uh oh!

aleksei-semikozov Jun 4, 2026

Choose a reason for hiding this comment

Uh oh!

bit-byte0 May 29, 2026

Choose a reason for hiding this comment

Uh oh!

aleksei-semikozov Jun 4, 2026

Choose a reason for hiding this comment

Uh oh!

bit-byte0 May 29, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

bit-byte0 May 29, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

aleksei-semikozov Jun 4, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Uh oh!

bit-byte0 Jun 4, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Uh oh!

Tucchhaa Jun 8, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

aleksei-semikozov Jun 9, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Uh oh!

bit-byte0 May 29, 2026 •

edited

Loading

bit-byte0 May 29, 2026 •

edited

Loading

Tucchhaa Jun 8, 2026 •

edited

Loading