tudor/school_compare
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(ui): site-wide UX/UI audit — unified buttons, tokens, accessibility
All checks were successful
Build and Push Docker Images / Build Backend (FastAPI) (push) Successful in 35s
Details
Build and Push Docker Images / Build Frontend (Next.js) (push) Successful in 1m10s
Details
Build and Push Docker Images / Build Integrator (push) Successful in 57s
Details
Build and Push Docker Images / Build Kestra Init (push) Successful in 31s
Details
Build and Push Docker Images / Trigger Portainer Update (push) Successful in 0s
Details

Browse Source 
- Add shared button system (.btn-primary/secondary/tertiary/active) in globals.css
- Replace 40+ hardcoded rgba() values with design tokens across all CSS modules
- Add skip link, :focus-visible indicators, and ARIA landmarks
- Standardise button labels ("+ Compare" / "✓ Comparing") across all components
- Add collapse/minimize toggle to ComparisonToast
- Fix heading hierarchy (h3→h2 in ComparisonView)
- Add aria-live on search results, aria-label on trend SVGs
- Add "Search" nav link, fix footer empty section, unify max-widths
- Darken --text-muted for WCAG AA compliance (4.6:1 contrast ratio)
- Net reduction of ~180 lines through button style deduplication

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Tudor
2026-03-25 20:28:03 +00:00
parent 5cdafc887e
commit 8aca0a7a53
23 changed files with 237 additions and 418 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
nextjs-app/components/SchoolDetailView.module.css
View File

@@ -318,17 +318,17 @@
/* ── Semantic status colours (unified) ────────────── */
.statusGood {
background: rgba(45, 125, 125, 0.10);
background: var(--accent-teal-bg);
color: var(--accent-teal, #2d7d7d);
}
.statusWarn {
background: rgba(201, 162, 39, 0.12);
background: var(--accent-gold-bg);
color: #b8920e;
}
.statusBad {
background: rgba(224, 114, 86, 0.12);
background: var(--accent-coral-bg);
color: var(--accent-coral, #e07256);
}
@@ -470,17 +470,17 @@
white-space: nowrap;
}
.ofstedGrade1 { background: rgba(45, 125, 125, 0.12); color: var(--accent-teal, #2d7d7d); }
.ofstedGrade1 { background: var(--accent-teal-bg); color: var(--accent-teal, #2d7d7d); }
.ofstedGrade2 { background: rgba(60, 140, 60, 0.12); color: #3c8c3c; }
.ofstedGrade3 { background: rgba(201, 162, 39, 0.15); color: #b8920e; }
.ofstedGrade4 { background: rgba(224, 114, 86, 0.15); color: var(--accent-coral, #e07256); }
.ofstedGrade3 { background: var(--accent-gold-bg); color: #b8920e; }
.ofstedGrade4 { background: var(--accent-coral-bg); color: var(--accent-coral, #e07256); }
/* Report Card grade colours (5-level scale, lower = better) */
.rcGrade1 { background: rgba(45, 125, 125, 0.12); color: var(--accent-teal, #2d7d7d); } /* Exceptional */
.rcGrade1 { background: var(--accent-teal-bg); color: var(--accent-teal, #2d7d7d); } /* Exceptional */
.rcGrade2 { background: rgba(60, 140, 60, 0.12); color: #3c8c3c; } /* Strong */
.rcGrade3 { background: rgba(201, 162, 39, 0.15); color: #b8920e; } /* Expected standard */
.rcGrade3 { background: var(--accent-gold-bg); color: #b8920e; } /* Expected standard */
.rcGrade4 { background: rgba(249, 115, 22, 0.12); color: #c2410c; } /* Needs attention */
.rcGrade5 { background: rgba(224, 114, 86, 0.15); color: var(--accent-coral, #e07256); } /* Urgent improvement */
.rcGrade5 { background: var(--accent-coral-bg); color: var(--accent-coral, #e07256); } /* Urgent improvement */
/* Safeguarding value (used inside a standard metricCard) */
.safeguardingMet {
@@ -489,7 +489,7 @@
border-radius: 4px;
font-size: 0.8125rem;
font-weight: 600;
background: rgba(45, 125, 125, 0.12);
background: var(--accent-teal-bg);
color: var(--accent-teal, #2d7d7d);
}
.safeguardingNotMet {
@@ -498,7 +498,7 @@
border-radius: 4px;
font-size: 0.8125rem;
font-weight: 700;
background: rgba(224, 114, 86, 0.15);
background: var(--accent-coral-bg);
color: var(--accent-coral, #e07256);
}