sveltejs/svelte
Reviewed against Rams quality heuristics: accessibility, color, typography, spacing, components, motion, UX, and craft.
30 files reviewed·August 1, 2026
More findings
Verdict
Structure is sound but the finishing details are missing: good fieldset semantics undercut by an unnamed input, a color-only state cue, and subpar contrast. The biggest risk is that these small oversights compound across a codebase, signaling accessibility polish isn't part of the default checklist.
Files Rams reviewed
packages/svelte/tests/css/samples/container-query/expected.css
packages/svelte/tests/css/samples/container-query/input.svelte
packages/svelte/tests/css/samples/css-prune-edge-cases/expected.css
packages/svelte/tests/css/samples/css-prune-edge-cases/input.svelte
packages/svelte/tests/css/samples/general-siblings-combinator-each-else-nested/expected.css
packages/svelte/tests/css/samples/general-siblings-combinator-each-else-nested/input.svelte
packages/svelte/tests/css/samples/general-siblings-combinator-each-nested/expected.css
packages/svelte/tests/css/samples/general-siblings-combinator-each-nested/input.svelte
packages/svelte/tests/css/samples/global-block/expected.css
packages/svelte/tests/css/samples/global-block/input.svelte
packages/svelte/tests/css/samples/has/expected.css
packages/svelte/tests/css/samples/has/input.svelte
packages/svelte/tests/css/samples/siblings-combinator-each-else-nested/expected.css
packages/svelte/tests/css/samples/siblings-combinator-each-else-nested/input.svelte
packages/svelte/tests/css/samples/siblings-combinator-each-nested/expected.css
packages/svelte/tests/css/samples/siblings-combinator-each-nested/input.svelte
packages/svelte/tests/hydration/samples/rich-select/main.svelte
packages/svelte/tests/manual/each-stress-test/main.svelte
packages/svelte/tests/migrate/samples/event-handlers-with-alias/input.svelte
packages/svelte/tests/migrate/samples/event-handlers-with-alias/output.svelte
packages/svelte/tests/migrate/samples/event-handlers/input.svelte
packages/svelte/tests/migrate/samples/event-handlers/output.svelte
packages/svelte/tests/migrate/samples/is-not-where-has/input.svelte
packages/svelte/tests/migrate/samples/is-not-where-has/output.svelte
packages/svelte/tests/migrate/samples/jsdoc-with-comments/input.svelte
packages/svelte/tests/migrate/samples/jsdoc-with-comments/output.svelte
packages/svelte/tests/migrate/samples/single-assignment-labeled/output.svelte
packages/svelte/tests/migrate/samples/slot-non-identifier/output.svelte
packages/svelte/tests/migrate/samples/slot-usages/input.svelte
packages/svelte/tests/migrate/samples/slot-usages/output.svelte
Accessibility
packages/svelte/tests/manual/each-stress-test/main.svelte:159
Unlabeled text input inside fieldset gives screen readers no purpose
The `input` fieldset renders `<legend>input</legend>` followed by a bare `<input />` with no `label`, `aria-label`, or `placeholder`. The legend announces the group but a screen reader still reports the control itself as an unnamed textbox, so its purpose has to be guessed from context.
Why it matters
A screen reader user tabbing into this field hears only 'edit text, blank' with no indication of what to type, which makes the control unusable without sighted help.
Fix
Give every form control its own accessible name even when it sits inside a labeled fieldset.
<fieldset>
<legend>input</legend>
<input />
</fieldset><fieldset>
<legend>input</legend>
<input aria-label="list input" />
</fieldset>packages/svelte/tests/manual/each-stress-test/main.svelte:192
Error text in pure red fails contrast at normal text size
`.error { color: red; }` styles the `<p class="error">{error}</p>` output. Pure red (#ff0000) on a white page background computes to roughly 4.0:1 contrast, below the 4.5:1 minimum WCAG AA requires for normal-size text.
Why it matters
Low-vision users reading the error message have to strain or may miss it entirely, which matters most here since the error text is the only feedback this test page gives when something breaks.
Fix
Darken error text to a red that clears 4.5:1 against its background at the size it's actually rendered.
.error {
color: red;
}.error {
color: #b91c1c;
}packages/svelte/tests/manual/each-stress-test/main.svelte:195
Transition direction shown only by a grey color swap
The mark transition sets `node.style.color = direction === 'in' ? '' : 'grey'` to distinguish entering from leaving items, with no accompanying text, icon, or attribute change. The only signal that an item is leaving versus entering is a subtle default-to-grey color shift on the `<span>`.
Why it matters
A colorblind user or anyone glancing quickly can't tell which items are entering versus leaving, so the visual state of the stress test becomes ambiguous exactly when it's meant to demonstrate transition behavior.
Fix
Never encode state changes in color alone; pair color with a text or attribute cue.
node.style.color = direction === 'in' ? '' : 'grey';node.style.color = direction === 'in' ? '' : 'grey';
node.setAttribute('data-direction', direction);Typography
Color
Spacing
Components
Motion
UX
Craft
Working well
- Grouping the random/presets/input controls with real `<fieldset>` and `<legend>` elements gives assistive tech native structure for free, which is exactly the right primitive to reach for before reaching for ARIA.
- The stress test fixture exercises each/if/key/snippet/component/boundary combinations together, which is strong regression coverage for the hydration matcher this file is built to test.
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: 94/100.
This page is an automated design review of sveltejs/svelte’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.
