Show a plugin's state around its checkbox, not only inside it #122

New issue

Closed

opened 2026-09-08 20:33:40 +00:00 by tiagoagueda · 1 comment

tiagoagueda commented

2026-09-08 20:33:40 +00:00

Owner

Observation

on the plugins user page, make the checkmarks outter glow green when marked "v" and glow
red when not marked

What exists

Settings → Plugins is a list of rows, each a checkbox and a name. Reading which of a
dozen plugins are on means looking at each box in turn: the tick is 13 pixels of the
browser's own drawing, and nothing about the row carries the state any further out.

What this asks for

A ring of colour around the box — green when ticked, red when not — so the column reads
down at a glance instead of one row at a time.

Worth being careful about

Colour is not carrying anything on its own. The checkbox already says which way it is
set, to a screen reader and to a keyboard, so the glow is redundant by design and WCAG
1.4.1 is not in play. It would be a different issue if the tick were replaced by colour.

The focus ring must survive it. :focus-visible owns outline throughout this
stylesheet, so the glow is a box-shadow: the two paint separately and a keyboard user
tabbing down the list keeps the ring on every row.

A locked row is not a fault. An administrator may decide a plugin for an account, and a
full-strength red halo on a control that is not yours to change reads as something you are
being blamed for. Those keep the colour and lose the halo.

Both themes. The glow is defined for light and dark separately rather than being left
to whichever ground it happens to land on.

## Observation > on the plugins user page, make the checkmarks outter glow green when marked "v" and glow > red when not marked ## What exists *Settings → Plugins* is a list of rows, each a checkbox and a name. Reading which of a dozen plugins are on means looking at each box in turn: the tick is 13 pixels of the browser's own drawing, and nothing about the row carries the state any further out. ## What this asks for A ring of colour around the box — green when ticked, red when not — so the column reads down at a glance instead of one row at a time. ## Worth being careful about **Colour is not carrying anything on its own.** The checkbox already says which way it is set, to a screen reader and to a keyboard, so the glow is redundant by design and WCAG 1.4.1 is not in play. It would be a different issue if the tick were replaced by colour. **The focus ring must survive it.** `:focus-visible` owns `outline` throughout this stylesheet, so the glow is a `box-shadow`: the two paint separately and a keyboard user tabbing down the list keeps the ring on every row. **A locked row is not a fault.** An administrator may decide a plugin for an account, and a full-strength red halo on a control that is not yours to change reads as something you are being blamed for. Those keep the colour and lose the halo. **Both themes.** The glow is defined for light and dark separately rather than being left to whichever ground it happens to land on.

tiagoagueda added this to the 0.3.0 milestone

2026-09-08 20:33:40 +00:00

tiagoagueda added the

tier

enhancement

interface

labels

2026-09-08 20:33:40 +00:00

tiagoagueda referenced this issue from a commit

2026-09-08 20:34:24 +00:00

Colour a plugin's state around its checkbox

tiagoagueda added

tier

and removed

tier

labels

2026-09-09 11:49:02 +00:00

tiagoagueda commented

2026-09-09 12:46:04 +00:00

Author

Owner

A plugin's state is now visible around its checkbox rather than only after opening it: the row is coloured by what the plugin is actually doing, so a page of them can be read at a glance instead of one at a time.

Shipped in 9a1c4d4 on 0.3.0, with main kept level.