Skip to content

Implement reordering columns using the keyboard in <ColumnsButton> #10870

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 2 commits into
base: master
Choose a base branch
from

Conversation

djhi
Copy link
Collaborator

@djhi djhi commented Jul 30, 2025

Problem

Although it's possible to open the 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

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

@djhi djhi added the WIP Work In Progress label Jul 30, 2025
@djhi djhi added RFR Ready For Review and removed WIP Work In Progress labels Jul 30, 2025
Base automatically changed from fix-columns-button-keyboard-usage to master July 31, 2025 14:20
@Madeorsk Madeorsk self-requested a review July 31, 2025 14:21
Copy link
Contributor

@Madeorsk Madeorsk left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

UX feels a bit weird.

  • We can now focus 2 different elements with tab: the list item, and the checkbox itself. I don't like that, it's way harder to reach the end of the list (twice as many keys to press), and it may cause confusions. What do you think about allowing to use the keys to move the columns while the checkbox is focused?
  • If I start moving an item with space, then just cancel without moving (pressing space again), the item is moved up or down. It shouldn't.
  • Why does the toggle and the drag indicator icon disappear when we enter "dragging mode"?
  • If I leave the selector while still in move mode (by pressing escape or clicking away), it keeps its "dragging" state, maybe just cancel the move in this case. (I can get back to a state where I can move the previously selected column again by focusing something in MenuList, but it's not obvious).

@Madeorsk
Copy link
Contributor

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
RFR Ready For Review
Development

Successfully merging this pull request may close these issues.

2 participants