Skip to content

fix: Add keyboard accessibility for table column and row reordering - #19606

Open
fkwq34 wants to merge 1 commit into
primefaces:masterfrom
fkwq34:feature/table-reorder-keyboard-navigation
Open

fix: Add keyboard accessibility for table column and row reordering#19606
fkwq34 wants to merge 1 commit into
primefaces:masterfrom
fkwq34:feature/table-reorder-keyboard-navigation

Conversation

@fkwq34

@fkwq34 fkwq34 commented May 29, 2026

Copy link
Copy Markdown

fixes: #19605

Description
This PR adds keyboard support for reordering table columns and rows, addressing the WCAG accessibility requirement that drag-only functionality must have a keyboard alternative.

Changes

ReorderableColumn directive:

  • Added Ctrl+Left / Ctrl+Right, Cmd+Left / Cmd+Right keyboard shortcuts to move columns
  • Added ARIA attributes (tabindex, [aria-grabbed], [aria-label])
  • Added screen reader announcements for column reorder operations

ReorderableRow directive:

  • Added Ctrl+Up / Ctrl+Down, Cmd+Up / Cmd+Down keyboard shortcuts to move rows
  • Added ARIA attributes (tabindex, [aria-grabbed], [aria-label])
  • Added screen reader announcements for row reorder operations
  • Focus correctly follows the moved row after reorder

Table component:

  • Added moveColumnByKeyboard() and moveRowByKeyboard() methods
  • Added focusColumnByIndex() and focusRowByIndex() helper methods
  • Added _pendingRowFocusIndex for reliable focus management during Angular change detection

Accessibility

  • Keyboard-only users can now reorder columns and rows without a mouse
  • Screen readers announce position changes (e.g., "Row moved up from position 3 to position 2")
  • Live region uses [aria-live="polite"] to avoid interrupting user flow
  • Focus remains on the moved element, allowing consecutive keyboard operations

Testing

  • Column reorder: Focus a column header, press Ctrl+Left / Ctrl+Right or Cmd+Left / Cmd+Right
  • Row reorder: Focus a row with [pReorderableRow], press Ctrl+Up / Ctrl+Down or Cmd+Up / Cmd+Down
  • Verified with keyboard-only navigation
  • Verified screen reader announcements

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.

Table - pReorderableColumn, pReorderableRow: Drag-only column and row reorder, no keyboard alternative

1 participant