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.

Editable text

Contenteditable with textbox role

Buttons

Checkbox

Radio 1 Radio 2

Focusable `<div>`s

tabindex="0"

tabindex="-1"

tabindex="0" with explicit class="focus-ring"

Selects

Select one from drop-down:
Select one from list:
Select multiple:

Other