Skip to content

Toggle groups with Enter on the group row - #4274

Draft
amanmahajan7 wants to merge 1 commit into
mainfrom
group-toggle-on-row
Draft

amanmahajan7 wants to merge 1 commit into
mainfrom
group-toggle-on-row

Conversation

@amanmahajan7

Copy link
Copy Markdown
Collaborator

Summary

Moves the group toggle's keyboard handling from the toggle's content to TreeDataGrid, so Enter behaves the same however focus reached the group row. Follows up on the review of #4246, which first tried turning the toggle into a <button>.

Problem

ToggleGroup rendered a focusable <span> that toggled the group on Enter. Whether Enter worked depended on which element had focus:

  • Group row focused (after clicking it, or moving to it with the arrow keys): Enter did nothing, since the row isn't the span.
  • Group cell active: the cell moved focus to the span, so Enter toggled.
  • Custom renderGroupCell renderers had to handle the key themselves.

Changes

  • TreeDataGrid: Enter toggles the group when the group row is focused, or when the cell that toggles the group on click is active. Other cells of the group row ignore it, the same as for clicks.
  • ToggleGroup: no longer focusable and no longer handles keys. Its outline: none style, which only applied to the focused span, is removed. The rdg-group-cell-content class stays.
  • README: adds Enter to the TreeDataGrid keyboard list.

This matches the WAI-ARIA treegrid pattern, where focus stays on rows and cells, and the row's aria-expanded exposes the state. Space is unchanged: it isn't required by the pattern, and Shift+Space selects rows.

Possible impact: a custom renderGroupCell renderer that also toggles on Enter would now toggle twice. RenderGroupCellContentProps still passes tabIndex, so focusable custom content keeps working.

Testing

  • vp check, vp run typecheck and vp run eslint pass.
  • Updated test: "should toggle group using keyboard" in TreeDataGrid.test.tsx now covers Enter on the focused row, Enter after moving away and back with the arrow keys, Enter on the group cell, and Enter on another cell of the group row. It fails on main at the first Enter.
  • TreeDataGrid and column/grouping tests pass in Chromium, Firefox and WebKit.

🤖 Generated with Claude Code

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

This branch has not been deployed

No deployments
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant