Keyboard-only focus test

This page contains various html controls 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 the normal platform focus indicator on elements below differently based on whether you interact with them via keyboard or mouse. If you are using the mouse and get lost, at any time you can press a key (such as Shift) to have the focus indicator appear.

Buttons

:focus-visible on GitHub
Named anchor for #links section.

Editable text

Contenteditable explicitly set to true
Contenteditable
Contenteditable with textbox role

Focusable <div>s

tabindex="0"
tabindex="-1"
tabindex="0" with explicit class="focus-visible"

Selects

Other