fix: a11y fixes

[mfortman11]

aria-controls on comboboxes

When you put role="combobox" on a button, screen readers announce it as a combo box — a text-field-plus-dropdown pattern. The ARIA spec requires aria-controls to point to the ID of the popup list so assistive tech
can link the two: "this button controls that list." Without it, a screen reader user knows a combobox exists but can't navigate to its options.

The fix: generate a stable unique ID with useId(), put it as the id on the listbox element (CommandList / CommandGroup), and reference it via aria-controls={listboxId} on the button.

prefers-reduced-motion

Some users have vestibular disorders where animations cause nausea or dizziness. They set "reduce motion" in their OS settings, which the browser exposes as prefers-reduced-motion: reduce. WCAG 2.3.3 requires sites
to respect this.

The project uses Framer Motion extensively but never checked this preference — every animation played regardless. The fix is a global CSS rule that forces all animations and transitions to essentially 0ms duration
when the user has requested reduced motion. It's a single catch-all that covers both CSS animations and Framer Motion (which uses inline styles that inherit transition-duration behavior from the cascade when
!important is used).

---

The ESLint warning on allOptions at line 71 is pre-existing and unrelated to our changes — it's about the useEffect at line 90 that was already there.

Summary by CodeRabbit

• Accessibility
  • Added support for users' reduced motion system preferences to minimize animations and transitions across the application, improving overall usability for those with motion sensitivities or vestibular disorders
  • Enhanced accessibility infrastructure with improved ARIA attributes on form controls and selection components, providing better support and compatibility for screen readers and other assistive technologies

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: 13579cb6-f226-458f-b5b5-6dd6caaa6eb3

📥 Commits

Reviewing files that changed from the base of the PR and between 8530ab0 and b33008d.

📒 Files selected for processing (3)

• frontend/app/globals.css
• frontend/app/onboarding/_components/model-selector.tsx
• frontend/components/ui/multi-select.tsx

---

Walkthrough

This PR adds two accessibility improvements to the frontend: stable accessibility wiring for combobox and select components using React.useId() and aria-controls attributes, and a global CSS media query that respects the prefers-reduced-motion user preference by disabling animations and smooth scrolling.

Changes

Combobox and Select Accessibility Wiring

Layer / File(s)	Summary
Model selector listbox accessibility frontend/app/onboarding/_components/model-selector.tsx	Model selector imports useId, generates a stable listboxId, and connects the combobox trigger to its option list via aria-controls and matching id attributes on the CommandList.
Multi-select listbox accessibility frontend/components/ui/multi-select.tsx	Multi-select component generates a stable listboxId and wires the trigger button's aria-controls to the options container using matching id attributes on the CommandGroup.

Reduced Motion Support

Layer / File(s)	Summary
Reduced motion media query frontend/app/globals.css	A @media (prefers-reduced-motion: reduce) rule applies globally to minimize animation/transition durations, cap animation iterations, and disable smooth scrolling when the user requests reduced motion.

🎯 1 (Trivial) | ⏱️ ~3 minutes

🚥 Pre-merge checks | ✅ 3 | ❌ 2

❌ Failed checks (1 warning, 1 inconclusive)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.
Title check	❓ Inconclusive	The title 'fix: a11y fixes' is overly vague and generic, using the abbreviation 'a11y' without specificity about what accessibility issues are being addressed.	Consider a more specific title like 'fix: add aria-controls for combobox buttons and respect prefers-reduced-motion' to clearly convey the main changes.

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch a11y-error-fixes

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}