CSS :focus-within

Usando :hover para exibir informações ou elementos adicionais é uma técnica muito útil, mas uma grande desvantagem do uso da pseudoclasse hover é que ela geralmente não é amigável à acessibilidade. Nem todos usam mouse e alguns usuários têm deficiências visuais, portanto, dependem de leitores de tela ou do teclado, duas funcionalidades que tecnicamente não são hover.

Felizmente, a especificação CSS nos dá um presente para combinar com :hover: :focus-within. Com :focus-within os desenvolvedores podem modificar estilos de elementos quando um elemento ou seus filhos têm o foco do teclado!

Considere o seguinte modelo HTML com estilo CSS padrão:

<ul id="sports">
  <li>
    <label>
      <input type="checkbox" name="sports[]">
      Soccer
      <button class="remove">Remove</button>
    </label>
    <!-- ... -->
  </li>
</ul>

#sports .remove {
  display: none;
}

#sports li:hover .remove {
  display: inline-block;
}

Com o código acima, passar o mouse sobre um item da lista mostraria o botão “remover”. Isso é ótimo para usuários de mouse, mas totalmente inútil para usuários de teclado. Vamos corrigir isso usando :focus-within:

#sports .remove {
  display: none;
}

#sports li:hover .remove,
#sports li:focus-within .remove {
  display: inline-block;
}

Quando o foco atinge a caixa de seleção, o foco está tecnicamente dentro do item da lista e, portanto, podemos empregar :focus-within para mostrar o botão “remover”.

De certa forma, a acessibilidade é algo que é considerado por último, mas não deveria ser uma reflexão tardia, :focus-within é um aliado útil, mesmo quando a acessibilidade foi uma reflexão tardia. Mesmo quando o senhor considera a acessibilidade desde o início, :focus-within deve estar na caixa de ferramentas de todos os desenvolvedores!