Premium support for our pure JavaScript UI components


Post by anshika.chakrawarty »

Hi,

We need to provide keyboard-accessible column reordering in our Bryntum TreeGrid to meet accessibility (WCAG) requirements. Currently, our users can only reorder columns via drag-and-drop, which is not operable for keyboard-only or screen reader users.

What we've tried:

We attempted to implement keyboard-driven column reordering using the grid's column API to programmatically move columns (re-index them) in response to keyboard shortcuts. However, this causes a crash because the grid's internal navigation/focus management is disrupted during the column re-indexing operation. The focused cell loses its reference, and subsequent keyboard navigation fails or throws errors.

We explored using the built-in header menu items (movePrev / moveNext) but had to disable them due to conflicts with our custom KeyMap configuration. Re-enabling them still presents focus stability issues when the column move completes.

We also looked into using the ariaElement property to manually stabilize focus after a column move, but we couldn't find sufficient documentation on the correct pattern for restoring focus to the equivalent cell in the newly positioned column.

What we need:

Is there a supported, keyboard-accessible way to reorder columns in a TreeGrid that correctly manages focus before and after the move? For example, after pressing a shortcut to move a column left, focus should remain on the same column header in its new position.
If programmatic column reordering via API is the intended approach, what is the recommended pattern for preserving/restoring focus using ariaElement or another mechanism so that the grid's internal navigation state remains consistent?
Are there any planned accessibility improvements to make column reordering keyboard-operable out of the box (e.g., via the header context menu or dedicated shortcuts)?


Post by mats »

We explored using the built-in header menu items (movePrev / moveNext) but had to disable them due to conflicts with our custom KeyMap configuration. Re-enabling them still presents focus stability issues when the column move completes.

Custom menu items that move a column left/right sounds reasonable. Can you please share why this didn't work for you? Menu is fully accessible.

We attempted to implement keyboard-driven column reordering using the grid's column API to programmatically move columns (re-index them) in response to keyboard shortcuts. However, this causes a crash because the grid's internal navigation/focus management is disrupted during the column re-indexing operation. The focused cell loses its reference, and subsequent keyboard navigation fails or throws errors.

Would be great to see a test case here, so we can see if it's a core bug we can address.

Ultimately, we'd want to build support for this into the core product, I've opened this ticket meanwhile: https://github.com/bryntum/support/issues/12946. Appreciate all your feedback!


Post Reply