Focusable <div>
s
:focus-within
tabindex="0"
tabindex="-1"
tabindex="0"
with explicit class="focus-visible"
This page contains various focusable divs and demonstrates a proposal for only drawing a focus ring when the keyboard is being used. Navigate through the interactive elements in various ways (using mouse, switch to keyboard, try it on a touch device). You should see a focus indicator on the element's parents whether you interact with them via keyboard or mouse.
<div>
s
:focus-within
tabindex="0"
tabindex="-1"
tabindex="0"
with explicit class="focus-visible"