Skip to content

[Bug] Focus ring inconsistent across composer chips and input surfaces #215

@Astro-Han

Description

@Astro-Han

What happened?

When tabbing through interactive surfaces on the home page and composer, the focus-visible ring appears on some controls but not others:

  • Model chip: focus ring visible
  • Variant chip: focus ring visible
  • Workspace chip: no focus ring
  • New-conversation dialog trigger: focus ring visible
  • Search box: no focus ring

The focus indicator "disappears" when the active element is the workspace chip or a search box, making keyboard navigation hard to follow.

Steps to reproduce

  1. Open PawWork home page
  2. Click in the composer input to focus it
  3. Press Tab repeatedly to move focus forward through the composer chips
  4. Observe which chips receive a visible focus ring vs. which do not
  5. Separately, Tab into search surfaces in the app shell and observe the same asymmetry

What did you expect to happen?

Every keyboard-reachable chip or input surface renders a consistent focus-visible ring so users can track keyboard navigation across the app.

PawWork version

v0.2.10 (both installed dmg and current dev)

OS version

macOS (Darwin 25.3.0)

Can you reproduce it again?

Yes, every time

Extra context

Likely root cause (from code inspection):

  • Model chip / variant chip use @opencode-ai/ui Button ghost variant via ModelSelectorPopover / Kobalte Popover; the Button CSS carries default :focus-visible styling
  • Workspace chip uses a raw <button> via Popover.Trigger triggerProps in packages/app/src/components/prompt-input/workspace-chip.tsx without a :focus-visible ring class
  • Search surfaces likely suffer the same "raw button / input without ring" pattern

Fix would normalize focus-visible treatment across trigger surfaces, either by routing more chips through the Button component or by applying a shared focus-visible: utility.

Metadata

Metadata

Assignees

No one assigned

    Labels

    P2Medium prioritybugSomething isn't workinguiDesign system and user interface

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions