🔎 focus-visible é uma nova pseudo-class CSS que aplica estilos de foco em elementos focáveis baseado nos modelos que o próprio browser usa para definir seus estilos padrões de foco.

💡 A diferença da :focus-visible e do :focus, é que com :focus, qualquer modalidade de foco herdará tal estilo, já com :focus-visible, apenas onde o browser aplica estilos de foco herdarão as regras CSS declaradas.

.btn:focus-visible {
  outline: 4px dashed rebeccapurple;
}

👉 Se o desenvolvedor aplica outline: none; em botão via .btn:focus, seja no ato de click, tap ou de seleção deste botão via tecla tab no teclado, o estilo de foco padrão do browser será ocultado.

👉 Já usando .btn:focus-visible, o desenvolvedor não modifica os atos de foco padrões do browser para click e tap do botão e aplica estilos somente nos atos de seleção via teclado para auxiliar usuários que usam ferramentas assistivas ou o teclado para navegar.

⭐️ Vale lembrar que estilos de foco via click, tap e teclado variam de elemento para elemento e de browser para browser. Um exemplo são os elementos <input> e <a> que tem comportamento de foco diferente do elemento <button>. Portanto, evite regras genéricas.