radix-ui/primitives
Reviewed against Rams quality heuristics: accessibility, color, typography, spacing, components, motion, UX, and craft.
30 files reviewed·August 1, 2026
Low
Design risk in this codebase.
More findings
Verdict
Focus management works, accessible naming doesn't, a classic test-harness gap. The OTP input group's missing accessible name is the one thing standing between this and a clean pass.
Files Rams reviewed
apps/ssr-testing/app/accordion/page.tsx
apps/ssr-testing/app/layout.tsx
apps/ssr-testing/app/one-time-password-field/page.tsx
apps/ssr-testing/app/password-toggle-field/page.tsx
apps/ssr-testing/app/portal/page.tsx
apps/ssr-testing/app/roving-focus-group/page.tsx
apps/ssr-testing/app/rsc/page.tsx
apps/ssr-testing/app/scroll-area/page.tsx
apps/ssr-testing/app/select/page.tsx
apps/ssr-testing/app/slider/page.tsx
apps/ssr-testing/app/slot/page.tsx
apps/ssr-testing/app/accessible-icon/page.tsx
apps/ssr-testing/app/alert-dialog/page.tsx
apps/ssr-testing/app/avatar/page.tsx
apps/ssr-testing/app/checkbox/page.tsx
apps/ssr-testing/app/collapsible/page.tsx
apps/ssr-testing/app/context-menu/page.tsx
apps/ssr-testing/app/dialog/page.tsx
apps/ssr-testing/app/dropdown-menu/page.tsx
apps/ssr-testing/app/form/page.tsx
apps/ssr-testing/app/hover-card/page.tsx
apps/ssr-testing/app/label/page.tsx
apps/ssr-testing/app/menubar/page.tsx
apps/ssr-testing/app/navigation-menu/page.tsx
apps/ssr-testing/app/page.tsx
apps/ssr-testing/app/popover/page.tsx
apps/ssr-testing/app/primitive-merge/page.tsx
apps/ssr-testing/app/progress/page.tsx
apps/ssr-testing/app/radio-group/page.tsx
apps/ssr-testing/app/separator/page.tsx
Accessibility
apps/ssr-testing/app/one-time-password-field/page.tsx:7
OTP input group has no accessible name for screen reader users
Both `OneTimePasswordField.Root` instances (lines 7 and 17) wrap six `OneTimePasswordField.Input` fields but carry no `aria-label` or associated `<label>`. A sighted user sees the `placeholder="123456"` hint and infers this is a one-time-passcode field; a screen reader user gets six unnamed inputs with no indication of what to enter.
Why it matters
Without a group label, screen reader users can't tell this is an OTP field before they start tabbing through six unlabeled inputs, so account verification flows stall for anyone using assistive tech.
Fix
Add an `aria-label` (or a visible `<label>` referenced via `aria-labelledby`) to every input group that has no native label element.
<OneTimePasswordField.Root placeholder="123456"><OneTimePasswordField.Root placeholder="123456" aria-label="One-time passcode">Typography
Color
Spacing
Components
Motion
UX
Craft
Working well
- Using Radix's unstable_OneTimePasswordField primitive instead of hand-rolling six separate inputs gets focus management and paste-splitting for free, which is exactly the kind of complexity worth outsourcing to a tested primitive rather than reimplementing.
- The portal page stays minimal and free of extraneous styling or components, which suits its purpose as a diagnostic page for portal behavior rather than a production surface.
Scored August 1, 2026 with Rams Engine v0.0.3 · Engine changelog
First scored July 29, 2026: 98/100. This rescore on v0.0.3: 97/100.
This page is an automated design review of radix-ui/primitives’s UI code: 30 files read against 291 versioned rules covering accessibility, color, typography, spacing, components, UX, motion, and craft. The score is out of 100; confirmed criticals cap it — one at 59, two at 49, three or more at 39.
More design scores
Score your own repo.
Free on public repos, no account. The same engine that scored this page reads your UI code and mints a score page like this one.
Public repos only. The full engine reviews the UI code and mints a public score page — we email you the link too. Already-scored repos open instantly.
