CSS :focus-within

Usar :hoverpara exibir informações ou elementos adicionais é uma técnica muito útil, mas uma grande desvantagem em usar a pseudoclasse do hover é que eles geralmente não são fáceis de acessar. Nem todo mundo usa um mouse e alguns usuários têm deficiências visuais, então eles confiam nos leitores de tela ou no teclado – duas funcionalidades que tecnicamente não pairam.

Felizmente a especificação CSS nos dá um presente a emparelhar com :hover::focus-within. Com os :focus-withindesenvolvedores podem modificar estilos de elementos quando um elemento ou seu pai tem o foco do teclado!

Considere o seguinte modelo HTML com o 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 consertar 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-withinpara mostrar o botão “Remover”.

A acessibilidade é algo que é considerado por último, mas não deve ser uma reflexão tardia; de certa forma, :focus-withiné um aliado útil mesmo quando a acessibilidade foi uma reflexão tardia. Mesmo considerando acessibilidade na frente, :focus-withindeve estar na caixa de ferramentas de todos os desenvolvedores!