KevinVandy/material-react-table

Show/Hide Columns popup menu not keyboard accessible

flpehr0 opened this issue · 0 comments

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.
    image
  • Hit enter to activate the menu
    image
  • 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.
    image
  • 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.
    image

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)

image
image
image
image

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.