Pseudo-classe :focus-visible
A pseudo-classe :focus-visible permite estilizar elementos que estão em foco e necessitam de um indicador visual de foco. Diferentemente do :focus, que se aplica sempre que um elemento está em foco, o :focus-visible se aplica apenas quando o usuário utiliza as modalidades de entrada como teclado para navegar entre os elementos da página.
Exemplo
.element:focus-visible {
outline: 2px solid black;
background-color: lightgrey;
}Neste exemplo, a classe .element terá um contorno mais visível e uma alteração de cor de fundo quando estiver em foco, mas apenas se o usuário interagir via teclado para entrar em modo foco de um elemento.