Abas acessíveis sem uma linha de JavaScript

A maioria dos componentes de abas por aí carrega kilobytes de JavaScript para algo que o navegador já sabe fazer: gerenciar um estado selecionado entre várias opções. Isso é, literalmente, um grupo de radio buttons.

A ideia

Cada aba é um <label> associado a um <input type="radio"> oculto. Quando o radio é marcado, o CSS reage e mostra o painel correspondente. Zero JS, e de brinde você ganha navegação com as setas do teclado, que o grupo de radios já traz.

<label for="tab1">Aba 1</label>
<input id="tab1" name="tabs" type="radio" class="sr-only peer" checked />

O truque: :has()

O painel muda de estilo conforme o input irmão esteja marcado:

label:has(+ input:checked) {
  color: white;
  background: var(--primary);
}

:has(+ input:checked) se lê como “este label que tem, logo depois, um input marcado”. É o CSS olhando para frente.

Acessibilidade de verdade

Como o input continua focável (sr-only, não display:none), o teclado funciona. Só lembre de adicionar um anel de foco visível:

label:has(+ input:focus-visible) {
  outline: 2px solid var(--primary);
}

Conclusão

Antes de instalar uma biblioteca, pergunte se o navegador já resolve o problema. Aqui, um <input> e um seletor moderno economizam todo o runtime.