Recentemente, cada vez mais surge uma dúvida sobre acessibilidade, se antes esconder os outline
elementos da página era uma regra geral, agora um bom site deve ter pelo menos um esboço dos elementos.O :focus-visible
principal problema outline
é estilizá-los.
Cheguei à minha solução, que é descrita neste artigo.
pet ( ) DOM.
div
document.body
, pointer-events: none
, , z-index
.
4-e div
:
(scss):
document
: pointerenter
, pointerleave
, focus
, blur
:
React , .
tabIndex > -1
event.target
. href
, disabled
. blur
, , ( , … button
a
):
show
target
getBoundingClientRect
. , 4-e div
, :
, !
, , , . .
Além disso, overflow: hidden
não afeta o nosso outline
, mas às vezes precisamos acompanhar a forma e as dimensões do elemento (por exemplo, ResizeObserver ), para que você possa melhorar essa abordagem, tudo está em suas mãos.
Obrigado por ler!
Se precisar de mais informações, deixe-me saber sobre este DM artzub.online .
PS: A versão em inglês do meu artigo está aqui