react-admin icon indicating copy to clipboard operation
react-admin copied to clipboard

Implement reordering columns using the keyboard in `<ColumnsButton>`

Open djhi opened this issue 5 months ago • 1 comments

Problem

Although it's possible to open the <ColumnsButton> menu with space and to interact with its items using the keyboard, it’s impossible to drag and drop them with the keyboard.

Solution

Implement reordering columns using the keyboard.

How To Test

  • Story
  • Click in the background around the list t ofocus the story iframe
  • Press Tab until the <ColumnsButton> is active
  • Press Space to open its menu
  • Press Tab to loop through its items
  • Press Space to start dragging a column and use arrow keys to move it. Drop with Space
  • You should still have the item focused
  • You should be able to Tab to the switch inside each item
  • Check that the columns were indeed reordered in the menu and the datatable
  • Press Escape to close the menu

Additional Checks

  • [x] The PR targets master for a bugfix or a documentation fix, or next for a feature

djhi avatar Jul 30 '25 14:07 djhi

Also, I think you should remove e4989e0e4dbb6142737cc2d64db22da86a15d6d1, we don't want to remove this as it's now merged in master.

Madeorsk avatar Jul 31 '25 15:07 Madeorsk