Recientemente, ha surgido cada vez más a menudo la cuestión de la accesibilidad, si antes ocultar los outline
elementos de la página era una regla general, ahora un buen sitio debe tener un esquema de los elementos al menos :focus-visible
El principal problema outline
es su estilo.
Llegué a mi solución, que se describe en este artículo.
Gif grande
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
, :
, !
.
, , , . .
Además, overflow: hidden
no afecta al nuestro outline
, pero a veces necesitamos realizar un seguimiento de la forma y las dimensiones del elemento (por ejemplo, ResizeObserver ), para que pueda mejorar este enfoque, todo está en sus manos.
¡Gracias por leer!
Si necesita más información, hágamelo saber sobre este DM artzub.online .
PD: la versión en inglés de mi artículo está aquí