Show/Hide Columns popup menu not keyboard accessible
flpehr0 opened this issue · 0 comments
flpehr0 commented
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
- The "hide all", "reset order", and "show all" buttons are not accessible or executable by the keyboard.
- 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:
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
- 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.