Récemment, de plus en plus souvent, il y a une question d'accessibilité, si auparavant le masquage outline
des éléments de page était une règle générale, maintenant un bon site devrait avoir au moins un aperçu des éléments :focus-visible
. Le principal problème outline
est de les styliser.
Je suis venu à ma solution, qui est décrite dans cet article.
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
, :
, !
, , , . .
De plus, cela overflow: hidden
n'affecte pas la nôtre outline
, mais parfois nous devons garder une trace de la forme et des dimensions de l'élément (par exemple, ResizeObserver ), afin que vous puissiez améliorer cette approche, tout est entre vos mains.
Merci d'avoir lu!
Si vous avez besoin de plus d'informations, faites-moi savoir sur ce DM artzub.online .
PS: la version anglaise de mon article est ici