Interfaces modernas como menus, barras de ferramentas, tabs e submenus costumam exigir bastante JavaScript para funcionar corretamente com navegação por teclado. Uma nova proposta chamada focusgroup, apoiada pela Microsoft e discutida no projeto Open UI, busca simplificar esse problema.
A funcionalidade já pode ser testada em navegadores baseados em Chromium e tem como objetivo padronizar a navegação entre elementos usando as teclas direcionais do teclado.
O Problema
O HTML possui o atributo tabindex, usado para controlar a ordem de navegação via teclado. Porém, quando criamos componentes complexos, a navegação fica difícil de implementar.
Exemplos comuns:
- Menus com submenus
- Barras de ferramentas
- Componentes com abas
- Listas interativas
Nesses casos é comum implementar o chamado roving tabindex, onde apenas um item recebe foco por vez e a navegação é controlada via JavaScript.
menu.addEventListener("keydown", function(event) {
if(event.key === "ArrowRight"){
focoProximoItem();
}
if(event.key === "ArrowLeft"){
focoItemAnterior();
}
});
Esse padrão é repetido em praticamente todos os frameworks de UI modernos.
A Solução: focusgroup
O atributo focusgroup permite agrupar elementos focáveis e delegar ao navegador a lógica de navegação por teclado.
Com isso, as teclas direcionais passam a mover o foco automaticamente entre os elementos do grupo.
Nesse exemplo o usuário pode navegar entre os botões usando as setas do teclado sem necessidade de JavaScript.
Como funciona internamente
O focusgroup cria um conjunto de elementos navegáveis por setas. Os elementos dentro do grupo podem ser:
- Elementos naturalmente focáveis (button, input, etc)
- Elementos com
tabindex
Importante: o atributo focusgroup não torna elementos focáveis automaticamente. Os elementos ainda precisam ser focáveis por padrão ou via tabindex. Porém, o navegador passa a gerenciar a movimentação do foco entre eles. :contentReference[oaicite:1]{index=1}
Exemplo prático (Radio Group customizado)
Um exemplo comum é replicar o comportamento de um radio group usando elementos customizados.
Escolha um animal:
Dog
Cat
Turtle
Nesse caso:
- As setas do teclado navegam entre os itens
- Todos os itens usam
tabindex="-1" - O navegador controla o foco entre eles
O estado selecionado ainda precisa ser controlado pela aplicação (ex: aria-checked). :contentReference[oaicite:2]{index=2}
Tipos de focusgroup
A especificação também prevê diferentes tipos de navegação.
Linear
Navegação em lista simples.
Grid
Navegação bidimensional usando setas.
...
Isso permite implementar facilmente interfaces como:
- Tabelas interativas
- Grids de cards
- Calendários
O objetivo é permitir navegação em duas dimensões usando apenas o navegador. :contentReference[oaicite:3]{index=3}
Outros comportamentos importantes
- As teclas direcionais seguem a direção do conteúdo (ex: RTL ou LTR)
- É possível limitar a navegação ao eixo horizontal ou vertical
- Elementos podem optar por sair do grupo usando
focusgroup="none" - Também existe suporte para teclas Home e End
Essas regras permitem implementar padrões comuns de UI como toolbars, tabs e menus com muito menos código. :contentReference[oaicite:4]{index=4}
Suporte atual
O recurso ainda está em evolução e sendo testado em navegadores baseados em Chromium.
Enquanto não existe suporte universal, é possível detectar a feature em JavaScript:
if ('focusgroup' in HTMLElement.prototype) {
console.log("focusgroup suportado");
}
Conclusão
O focusgroup é uma tentativa de resolver um problema antigo da web: implementar navegação consistente por teclado em componentes complexos.
Se a proposta for adotada pelos navegadores, muitos scripts usados hoje para controlar foco em menus, tabs e toolbars poderão desaparecer, deixando o código mais simples e mais acessível.