Olá professor, tudo bem?
Eu estou trabalhando em um sistema angular utilizando o material components. Eu tenho uma dúvida em relação a navegação com o teclado que é a seguinte:
Eu tenho um sidenav menu na tela, que é um componente a parte que compoe uma tela. Quando eu clico em um link da minha sidenav a navegação com o tab não vai para a página, ela continua na minha sidenav.
Como eu posso resolver esse problema?
hoje, com a Alura e o Google Gemini
Olá Andressa, tudo bem com você?
Peço desculpas pela demora em obter um retorno.
Com base nas informações descritas, se você está enfrentando um problema em que a navegação com a tecla Tab está apenas alternando entre os itens da sidenav e não está indo para o conteúdo principal da página, uma sugestão é utilizar o recurso de atributo tabindex para adicionar o conteúdo principal da página como focável. Por exemplo:
<mat-sidenav-container>
<mat-sidenav mode="side" opened>
<!-- Conteúdo da sidenav -->
<a mat-list-item>Link 1</a>
</mat-sidenav>
<div tabindex="0">
<!-- Conteúdo da página principal -->
<router-outlet></router-outlet>
</div>
</mat-sidenav-container>No exemplo acima, adicionamos o atributo tabindex="0" ao elemento <div> que contém o conteúdo principal da página. Isso torna o elemento focável por teclado, permitindo que o foco seja redirecionado corretamente após a navegação na sidenav.
A título de curiosidade, caso queira conhecer outras soluções e possibilidades do atributo tabindex, deixo como recomendação um artigo abaixo:
Todavia, vale ressaltar que como é um assunto externo ao curso e que não tenho acesso ao cenário completo e código do seu projeto, outros testes terão de ser feitos a fim de obter o resultado esperado, mas espero que esta resposta seja um bom ponto de partida para a resolução do seu problema.
Espero ter ajudado.
Abraços e bons estudos!