HTML: Nova API “focusgroup” promete simplificar navegação por teclado

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.

<div focusgroup>
    <button>Home</button>
    <button>Produtos</button>
    <button>Contato</button>
</div>

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.

<p id="label">Escolha um animal:</p>
 
<div role="radiogroup" focusgroup aria-labelledby="label">
 
    <span role="radio" tabindex="-1">Dog</span>
    <span role="radio" tabindex="-1">Cat</span>
    <span role="radio" tabindex="-1">Turtle</span>
 
</div>

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.

<div focusgroup>
    <button>Bold</button>
    <button>Italic</button>
    <button>Underline</button>
</div>

Grid

Navegação bidimensional usando setas.

<div focusgroup="grid">
    ...
</div>

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.