Problemas de Foco e Suporte ao Refinamento

Construir componentes React acessíveis exige mais do que apenas adicionar rótulos ARIA. Você deve lidar com a forma como os usuários navegam pela sua interface usando um teclado.

Estou documentando minha jornada de construção de um componente de navegação totalmente acessível do zero. Nesta atualização, foco em duas áreas principais: corrigir armadilhas de teclado e preparar uma gestão de sublistas mais fluida.

A Correção da Armadilha de Teclado

Um problema comum ocorre quando um usuário usa Shift+Tab para entrar em um componente. Se o foco cair em um link dentro de uma sublista fechada, o contorno de foco desaparece. Isso é um erro grave para usuários de teclado.

Para corrigir isso, implementei uma mudança na lógica:

• Se o foco atingir o último elemento de uma sublista fechada, o sistema desloca o foco para o botão pai na linha superior. • Utilizo um listener de evento onFocus para detectar esse movimento específico. • A lógica verifica se o elemento focado é o último no componente. • Se for, o código identifica o ancestral da linha superior e move o foco para lá.

Isso garante que o usuário nunca perca seu lugar na interface.

Configurando o Fechamento de Sublistas

Quando você fecha um menu pai, todos os submenus abertos dentro dele também devem ser fechados. É assim que os sistemas operacionais padrão funcionam.

Para lidar com isso no React sem causar problemas de performance, evitei armazenar funções no estado. Armazenar funções no estado aciona re-renderizações desnecessárias.

Em vez disso, utilizei uma abordagem diferente:

• Criei um Map dentro de um useRef. • Este Map armazena as funções de fechamento associadas aos elementos pai. • Quando o array de navegação é solicitado, o sistema injeta essas funções nos objetos. • O uso de um Ref me permite atualizar essas conexões sem disparar uma re-renderização.

Isso estabelece a base para um comportamento de menu limpo e previsível.

Em seguida, implementarei a lógica real para fechar essas sublistas.

Fonte: https://dev.to/shaynaproductions/focus-issues-and-refinement-support-417l