focus-visible class demo

# 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

Checkbox
Radio 1 Radio 2

## Links

: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

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

## Other

Process nice score from -20 to +20:
Bowling score from 0 to 300: