primefaces/primevue
Reviewed against Rams quality heuristics: accessibility, color, typography, spacing, components, motion, UX, and craft.
30 files reviewed·August 1, 2026
Elevated
Design risk in this codebase.
More findings
Verdict
A tidy color palette hides an accessibility dead end: swatches are colors with no names attached. The biggest risk is that anyone not using a mouse and eyes together can't operate the configurator at all.
Files Rams reviewed
apps/volt/components/app/AppConfigurator.vue
apps/volt/components/app/AppMenuItem.vue
apps/volt/components/app/AppNews.vue
apps/volt/components/app/AppTopBar.vue
apps/volt/components/app/AppFooter.vue
apps/volt/components/app/AppMenu.vue
apps/showcase/pages/accordion/index.vue
apps/showcase/pages/animateonscroll/index.vue
apps/showcase/pages/autocomplete/index.vue
apps/showcase/pages/autoimport/index.vue
apps/showcase/pages/avatar/index.vue
apps/showcase/pages/badge/index.vue
apps/showcase/pages/blockui/index.vue
apps/showcase/pages/breadcrumb/index.vue
apps/showcase/pages/button/index.vue
apps/showcase/pages/card/index.vue
apps/showcase/pages/carousel/index.vue
apps/showcase/pages/cascadeselect/index.vue
apps/showcase/pages/cdn/index.vue
apps/showcase/pages/chart/index.vue
apps/showcase/pages/checkbox/index.vue
apps/showcase/pages/chip/index.vue
apps/showcase/pages/colorpicker/index.vue
apps/showcase/pages/configuration/index.vue
apps/showcase/pages/confirmdialog/index.vue
apps/showcase/pages/confirmpopup/index.vue
apps/showcase/pages/contextmenu/index.vue
apps/showcase/pages/contribution/index.vue
apps/showcase/pages/customicons/index.vue
apps/showcase/pages/dataview/index.vue
Accessibility
apps/volt/components/app/AppConfigurator.vue:10
Color swatch buttons have no accessible name for screen readers
The primary and surface color swatches in AppConfigurator.vue are rendered as bare `<button>` elements with only a `:style` backgroundColor and no text content, aria-label, or title. Each button in the `primaryColors` and `surfaces` loops (e.g. the swatch for 'noir') exposes nothing but 'button' to a screen reader.
Why it matters
A screen reader user tabbing through the config panel hears a string of unlabeled 'button' announcements with no way to tell which color each one applies, so the entire theme picker is unusable without sight.
Fix
Add a descriptive aria-label built from the color name to every swatch button.
<button
v-for="primaryColor of primaryColors"
:key="primaryColor.name"
type="button"
@click="updateColors('primary', primaryColor)"
:class="{ 'active-color': selectedPrimaryColor === primaryColor.name }"
:style="{ backgroundColor: `${primaryColor.name === 'noir' ? 'var(--text-color)' : primaryColor.palette[500]}` }"
></button><button
v-for="primaryColor of primaryColors"
:key="primaryColor.name"
type="button"
:aria-label="`Set primary color to ${primaryColor.name}`"
:aria-pressed="selectedPrimaryColor === primaryColor.name"
@click="updateColors('primary', primaryColor)"
:class="{ 'active-color': selectedPrimaryColor === primaryColor.name }"
:style="{ backgroundColor: `${primaryColor.name === 'noir' ? 'var(--text-color)' : primaryColor.palette[500]}` }"
></button>Typography
Color
Spacing
Components
Motion
UX
Craft
Working well
- Palette data for `primaryColors` and `surfaces` is centralized in typed refs rather than scattered as hardcoded hex values across the template, so the swatch loops stay consistent and a future palette update only touches one source of truth.
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: 59/100.
This page is an automated design review of primefaces/primevue’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.
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.
