Como habilitar a navegação pelo teclado para a tabela material-ui

Question

Eu tenho um aplicativo react criado com Material-UI. O usuário pediu para habilitar a navegação por teclado para todo o site. Não consigo navegar nas tabelas com o teclado neste site. Minha mesa é algo comohttps://material-ui.com/components/tables/#fixed-header. Eu quero subir e descer uma linha pressionando "seta para cima" e "seta para baixo" no teclado. Como posso habilitar isso?

Answer 1

A navegação pelo teclado geralmente se refere a ser capaz de focar e acionar elementos interativos como links, botões, seletores de data, modais, etc., usando apenas os controles do teclado. Uma tabela não é um elemento interativo, portanto, não pode ser focalizado pelo teclado.

A solicitação do usuário pode ter como objetivo garantir que o site atenda às Diretrizes de Acessibilidade de Conteúdo da Web . As tabelas de UI de material são marcadas semanticamente como tabelas com uma linha de cabeçalho de tabela, portanto, o básico existe para atender a esse critério.

Se você ativar um leitor de tela (como VoiceOver no Mac ou NVDA no Windows), poderá navegar na tabela com as teclas de seta e cada célula será anunciada pelo leitor de tela.

• https://webaim.org/techniques/tables/data