#562: Add accessible reorder option in column menu [new]

[iamanishroy]

#562: Add accessible reorder option in column menu.

Worked on this improvement.

I have used react-beautiful-dnd as recommended.

• Ordering feature will be disabled when the search filter is applied.
• No changes on the appearance of button.

Linked to PR #983 -> created because of some issue with branch.

[vercel]

@iamanishroy is attempting to deploy a commit to the Rowy Team on Vercel.

A member of the Team first needs to authorize it.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated
rowy-os	✅ Ready (Inspect)	Visit Preview	Nov 25, 2022 at 4:00PM (UTC)

[notsidney]

Thanks @iamanishroy, this looks good to me. It looks like you had to read the docs of https://github.com/rowyio/multiselect to implement this as well, so thanks for being diligent.

A note on extending this menu in the future

This was built with the MultiSelect component, which was designed specifically for multiple selection. Adding more functionality like this would be better served by not using MultiSelect for this anymore.

There are two “hacks” that have been needed to implement this feature:

1. Create a new dragDisabled state to track if the user has input anything in the search box. This is done by tracking the onInput event. This should be derived from the state of that input’s value, but this is intentionally not accessible in the MultiSelect component.
2. There are two paths to access items with the keyboard. When the input is focused, the user can press the arrow keys to select columns to be hidden. This is consistent with the WAI-ARIA guidelines implemented by the MUI Autocomplete component, on which this component is based.
   But to reorder columns, the user must press Tab to select each individual column. This also makes the “Clear” and “Done” buttons less accessible, as previously they only had to Tab once to get to them, but must now go through all columns.