In letzter Zeit stellt sich immer häufiger die Frage nach der Barrierefreiheit. Wenn früher das Ausblenden outline
von Seitenelementen eine allgemeine Regel war, sollte eine gute Site jetzt zumindest einen Überblick über die Elemente haben :focus-visible
. Das Hauptproblem outline
besteht darin, sie zu gestalten.
Ich bin zu meiner Lösung gekommen, die in diesem Artikel beschrieben wird.
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
, :
, !
, , , . .
Es overflow: hidden
hat auch keine Auswirkungen auf unsere outline
, aber manchmal müssen wir die Form und Abmessungen des Elements verfolgen (z. B. ResizeObserver ), damit Sie diesen Ansatz verbessern können. Alles liegt in Ihren Händen.
Danke fürs Lesen!
Wenn Sie weitere Informationen benötigen, teilen Sie mir diese DM artzub.online mit .
PS: Die englische Version meines Artikels ist hier