Recently, more and more often the question of accessibility has arisen, if earlier hiding outline
for page elements was a general rule, now a good site should have an outline of the elements at least :focus-visible
. The main problem outline
is their styling.
I came to my solution, which is outlined in this 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
, :
, !
, , , . .
Also, it overflow: hidden
doesn't affect ours outline
, but sometimes we need to keep track of the element's shape and dimensions (for example, ResizeObserver ), so you can improve this approach, everything is in your hands.
Thanks for reading!
If you need more information, let me know about this DM artzub.online .
PS: English version of my article is here