Focus-shadow audit — before / after

Each finding renders the real element with the current CSS (Before) and the proposed fix (After). Focus behavior is native: use the keyboard (Tab) vs the mouse (click/hover) to see the difference, or hit Force focus state to apply the focus styling statically to everything.

Try it: Tab = keyboard focus · click / hover = mouse

HighAccordion — orphan focus-visible:after:border-ring

The ::after has no content/size/position, so the class paints nothing — a dead no-op. The real indicator (border-ring + shadow-focus) is unaffected. After = orphan removed.

src/components/ui/accordion.tsx:44

MedSlider — focus halo leaks onto hover & active

Before applies shadow-focus on hover, active and focus-visible, so mouse users see the focus halo. After scopes it to keyboard focus only. Hover the thumb to see the difference.

src/components/ui/slider.tsx:50

MedCombobox chips — focus-within instead of keyboard-only

The same component ships two surfaces: the chips variant uses focus-within (fires on mouse click), while the single / input-group variant is already keyboard-only via :has(input:focus-visible). After aligns chips to the reference. Click each field — in Before only the chips lights up; the single one (correctly) doesn't.

src/components/ui/combobox.tsx:227

Low–MedScroll-area — flagged, no change proposed

The viewport's shadow-focus is a soft downward drop shadow and may never fire if the viewport isn't tab-focusable. Noted as low-confidence — leaving as-is; After matches Before for reference.

src/components/ui/scroll-area.tsx:21

RefInput — standard treatment (bg-card)

Reference: no audit issue. border-input + bg-card (white), focus → border-ring + shadow-focus on the focusable element, keyboard-only. Both panes identical — this is the baseline. Toggle Force focus state to flip default → focus.

src/components/ui/input.tsx:11

RefTextarea — standard treatment (bg-card)

Reference: border-input + bg-card (white), min-h-16, focus → border-ring + shadow-focus, keyboard-only.

src/components/ui/textarea.tsx:10

RefSelect trigger — standard treatment (bg-card)

Reference: border-input + bg-card (white), chevron in --muted-foreground, focus → border-ring + shadow-focus on the trigger button, keyboard-only.

src/components/ui/select.tsx:48