Akhir-akhir ini, semakin sering muncul pertanyaan tentang aksesibilitas, jika sebelumnya menyembunyikan outline
elemen halaman adalah aturan umum, sekarang situs yang baik harus memiliki setidaknya kerangka pada elemennya :focus-visible
. Masalah utamanya outline
adalah menatanya.
Saya sampai pada solusi saya, yang diuraikan dalam artikel ini.
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
, :
, !
, , , . .
Selain itu, overflow: hidden
ini tidak memengaruhi milik kita outline
, tetapi terkadang kita perlu melacak bentuk dan dimensi elemen (misalnya ResizeObserver ), sehingga Anda dapat meningkatkan pendekatan ini, semuanya ada di tangan Anda.
Terima kasih sudah membaca!
Jika Anda membutuhkan informasi lebih lanjut, beri tahu saya tentang artzub.online DM ini .
PS: Artikel saya versi bahasa Inggris ada di sini