Skip to content

fix(frontend): focus rings are near-invisible and ramp-option radios are keyboard-unreachable #750

Closed

Description

@cristim

Summary

Keyboard focus indicators are effectively invisible or removed in several components, and the plan ramp-option radios are display:none, so those cards cannot be reached by keyboard.

Where

Reviewed commit b50ca38.

  • frontend/src/styles/forms.css:104-108 (chips and chip-select: outline:none; box-shadow:0 0 0 3px var(--cudly-info-bg), a #eff6ff halo at about 1.07-1.09:1 on white)
  • frontend/src/styles/components.css:948 (.rec-cell-chevron:focus-visible{outline:none}, no border either), :1527-1528, :1588-1589
  • frontend/src/styles/forms.css:289 and frontend/src/styles/plans.css:195 (.ramp-option input[type=radio]{display:none})

Failure scenario

A keyboard user tabbing through filters, chip selects and the recommendation chevrons cannot see where focus is (the only cue is a 1px border colour change). In the plan editor, the ramp-option radios are removed from the tab order, so the plan cards cannot be chosen without a mouse. WCAG 2.4.7 and 2.1.1. Verification level: source-level; the contrast ratio is computed from the CSS values, not measured in a browser.

User impact

Keyboard-only and low-vision users cannot track focus in core controls or pick a ramp option.

Suggested fix

Define --cudly-focus-ring: 0 0 0 2px var(--cudly-surface), 0 0 0 4px var(--cudly-primary) and a global :where(button,a,input,select,textarea,[tabindex]):focus-visible rule using it; replace display:none on the radios with a visually hidden (.sr-only) pattern and style the card with :has(input:focus-visible).

Related: #191 (polish backlog; one checkbox asks to "verify" keyboard access and focus states, the measured failures here are new).

Screenshots

usab-plans.png (in the review fleet archive at /Users/cristi/.claude/agent-comms/review-fleet-20261008/screens/, NOT uploaded).

Severity

Medium: affects all keyboard users across several controls, and blocks one selection UI entirely.

Reviewer ID: UX-26 (vis M4 + usab L12)
Found by the 2026-10-08 review fleet.

Activity

  1. cristim commented on Oct 9, 2026

    @cristim
    MemberAuthor

    Fixed by #769 (squash 059292f).

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions