Riff / Built on the open web / Behaviour

:focus-visible

Shows a focus ring for the keyboard and not after a tap.

The Listen page: the library, nine albums as drawn record covers — A record card with keyboard focus gets a blue ring around the whole card.

How Riff uses it

Every button in the player is reset with all: unset, which removes the default outline. :focus-visible puts a 2px ring back only for keyboard focus. Track rows use currentcolor so the ring matches the theme, and the controls use the player's white. The Listen app uses the blue accent, with the ring drawn around the whole record card.

Why

A player is driven mostly by taps, and a ring left on the play button after each one would look like a bug.

Without it

Because buttons are reset, a browser without it shows no keyboard focus ring at all.

Where

plugins/riff/assets/riff.css, line 270
```
#riff button:focus-visible,
```
plugins/riff/assets/riff.css, line 80
```
.riff-row:focus-visible {
```

plugins/riff/assets/riff.css, line 1612

.riff-app .riff-card:has(> .riff-card-link:focus-visible) {

Links open the source at the commit this page was published from.

Reference: :focus-visible on MDN.