Show/Hide Columns popup menu not keyboard accessible

[flpehr0]

material-react-table version

v2.13.1

react & react-dom versions

v18.3.1

Describe the bug and the steps to reproduce it

Problem: There are two distinct issues within this menu

1. The "hide all", "reset order", and "show all" buttons are not accessible or executable by the keyboard.
2. The toggle options in the popup menu for show/hide columns can be arrowed to, but are not executable when using the keyboard. This makes this feature entirely unusable by keyboard only users.

Steps to Reproduce:

• Using only the keyboard, tab to the "show/hide" columns button in the table.
• Hit enter to activate the menu
• Tab to the first element in the menu. you will see that the entire row receives keyboard focus, however, there is no way to arrow or tab to hide all/reset. Show all is disabled in this example and should not receive focus. This is the first issue.
• From here, move on to reproducing the second issue. With the top bar still in focus, use the arrow keys to navigate down the list of toggles. Attempt to activate them using only the key board. Neither enter nor spacebar will activate the toggles for each column. There is also no way to differentiate focus on the drag & drop button vs the toggle. However, while not impossible, I understand it is not easy to make drag and drop features keyboard accessible, so I am more focused on getting the toggles to work in the scope of this ticket.

WCAG Resources:

• https://www.w3.org/WAI/tutorials/menus/

Minimal, Reproducible Example - (Optional, but Recommended)

This is the example in your documentation, and I have been unable to override the native features to get a better result. https://codesandbox.io/s/github/KevinVandy/material-react-table/tree/v2/apps/material-react-table-docs/examples/customize-display-columns/sandbox?file=/src/TS.tsx

Screenshots or Videos (Optional)

Do you intend to try to help solve this bug with your own PR?

Maybe, I'll investigate and start debugging

Terms

• [X] I understand that if my bug cannot be reliably reproduced in a debuggable environment, it will probably not be fixed and this issue may even be closed.

[lgark-ky]

Hi @flpehr0, did you ever figure out a workaround for this? This actually feels like a limitation of mui, and not necessarily material-react-table.

In this example, independent of MRT, I tested out putting a switch and buttons inside of a mui menu, and I could not access them via keyboard either. https://stackblitz.com/edit/react-x5uesnvd?file=Demo.tsx

Interestingly, in the mui autocomplete, I am able to reach and control the checkboxes within the option menu. I'm guessing this is a slightly different implementation than their default menu though. https://mui.com/material-ui/react-autocomplete/#checkboxes

Edit: found some relevant mui github issues.

• https://github.com/mui/material-ui/issues/35294
• https://github.com/mui/material-ui/issues/33268