Review
Keyboard-only focus rings on hold chips
ShelfNote's pickup-hold chips still use outline: none so designers don't see a blue box on mouse click — but keyboard users lose the only focus cue. Drop the blanket focus kill and style a 2px ring under :focus-visible so Tab navigation stays obvious while pointer clicks stay clean.
CSSTier 1a11yfocus-visiblecss
Click a line to flag it, pick one or more labels, then submit. If the change looks correct, approve it.
src/holds/HoldChip.module.css+8-5
| 1 | 1 | .chip { | |
| 2 | 2 | display: inline-flex; | |
| 3 | 3 | align-items: center; | |
| 4 | 4 | gap: 0.375rem; | |
| 5 | 5 | padding: 0.375rem 0.75rem; | |
| 6 | 6 | border-radius: 999px; | |
| 7 | 7 | border: 1px solid var(--ink-200); | |
| 8 | 8 | background: var(--paper); | |
| 9 | 9 | font: inherit; | |
| 10 | 10 | cursor: pointer; | |
| 11 | - | outline: none; | |
| 12 | 11 | } | |
| 13 | 12 | ||
| 14 | - | .chip:focus { | |
| 15 | - | outline: none; | |
| 16 | - | box-shadow: 0 0 0 2px var(--brand-500); | |
| 17 | - | } | |
| 13 | + | .chip:focus { | |
| 14 | + | outline: none; | |
| 15 | + | } | |
| 16 | + | ||
| 17 | + | .chip:focus-visible { | |
| 18 | + | outline: 2px solid var(--brand-500); | |
| 19 | + | outline-offset: 2px; | |
| 20 | + | } | |
| 18 | 21 | ||
| 19 | 22 | .chip[data-state="ready"] { | |
| 20 | 23 | border-color: var(--sage-400); | |
| 21 | 24 | background: var(--sage-50); | |
| 22 | 25 | } |