CODEWITHSUNDEEP
reactjsmaterial-uiaccessibility
UnknownDev1502
UnknownDev1502

Reputation: 21

How to enable keyboard navigation for material-ui table

I have a react application created with Material-UI. The user has asked to enable keyboard navigation for the whole website. I am unable to navigate tables with keyboard on this website. My table looks something like https://material-ui.com/components/tables/#fixed-header. I want to go up and down a row on pressing "up arrow" and "down arrow" on keyboard. How can I enable this?

Upvotes: 2

Views: 3773

Answers (1)

FED
FED

Reputation: 11

Keyboard navigation generally refers to being able focus on and trigger interactive elements like links, buttons, date-pickers, modals etc using only the keyboard controls. A table is not an interactive element so not focusable by the keyboard.

Your user's request may be intended to ensure the website meets Web Content Accessibility Guidelines. Material UI tables are semantically marked up as tables with a table header row, so the basics are there to meet this criteria.

If you activate a screen reader (like VoiceOver on Mac or NVDA on Windows) you will then be able to navigate the table with the arrow keys and each cell will be announced by the screen reader.

Upvotes: 1

Related Questions