Skip to content

feat(field-grid-dropdown): wrap vertical keyboard focus across columns - #2757

Merged
mikeharv merged 3 commits into
mainfrom
gridwrap
Jul 27, 2026
Merged

feat(field-grid-dropdown): wrap vertical keyboard focus across columns#2757
mikeharv merged 3 commits into
mainfrom
gridwrap

Conversation

@mikeharv

Copy link
Copy Markdown
Contributor

The basics

The details

Resolves

Fixes #2678

Proposed Changes

field-grid-dropdown:
Ensure aria role and field type name are accurate, including when expanding/collapsing. Use an existing translation for the type name.
Change type of FieldGridDropdown.grid to Grid | null to better align to FieldDropdown.menu.
Rework Grid.moveFocus() to support vertical wrapping:

  • Pressing up or down now passes a movementIndex of 1/-1 (previously it was a number with a larger absolute value based on the number of columns) and horizontal = false.
  • Helper method getVerticalTargetIndex which handles the actual wrapping logic.
  • Error beeps added when no valid targetItem can be found.
image

In the screenshot above, up/down can now be used to navigate between M/B and K/C, but not L/A.

Reason for Changes

Grids have been somewhat tricky for keyboard/screenreader navigation. If they are announced as a list, users tend to only go down the first column and not ever discover there are more columns.

@mikeharv
mikeharv marked this pull request as ready for review July 27, 2026 16:43
@mikeharv
mikeharv requested a review from a team as a code owner July 27, 2026 16:43
@mikeharv
mikeharv requested review from gonfunko and removed request for a team July 27, 2026 16:43
Comment thread plugins/field-grid-dropdown/src/grid.ts Outdated
@mikeharv
mikeharv merged commit 5a2cfc1 into main Jul 27, 2026
4 checks passed
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.

keyboard navigation for field-grid

2 participants