最近、アクセシビリティについての質問がますます頻繁になっています。以前 outline
はページ要素を非表示にするのが一般的なルールでしたが、今では、良いサイトには少なくとも要素のアウトラインが必要 :focus-visible
です。主な問題 outline
はそれらのスタイルです。
この記事で概説されている私の解決策にたどり着きました。
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
, :
, !
, , , . .
また、 overflow: hidden
影響はありません outline
が、要素の形状と寸法を追跡する必要がある場合があります（たとえば、ResizeObserver）。これにより、このアプローチを改善でき、すべてが手元にあります。
読んでくれてありがとう！
さらに詳しい情報が必要な場合は、このDMartzub.onlineについてお知らせください 。
PS：私の記事の英語版はこちらです