refactor(frontend): clean code + UI consistency overhaul#95
Merged
Conversation
…ix a11y violations - Prettier config + one-time format of src/ - eslint-plugin-jsx-a11y (recommended) + eslint-config-prettier - husky + lint-staged pre-commit via frontend prepare script - root .editorconfig - fix all 28 jsx-a11y errors (labels, alt text, modal backdrops) Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
…prop drilling - new Spinner primitive replaces 17 duplicated inline spinner divs - Button component used in MyCourses/ClassRoster/StudyShop (new gold variant) - StudentStatusOverview split: 8 subcomponents extracted to components/instructor/ + shared TableSkeleton/CardSkeleton in components/common/Skeletons.jsx - status/format helpers moved to utils/studentStatus.js - layouts: SidebarContent self-sources stores/router (9 props -> 2 callbacks) - authStore: shared resolveActiveRole/loadCurrentUser helpers - theme swatches unified into THEMES constant (was duplicated in StudentProfile) - XP level magic numbers replaced with calculateLevel/XP_PER_LEVEL - utils/logger.js wrapper replaces scattered console.* calls Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
- ToastManager: aria-live polite region + labeled dismiss button - sidebar course dropdown: aria-expanded / aria-haspopup - inline brand gradients -> .bg-grad-* / .text-gradient-* classes (new bg-grad-instructor + text-gradient-instructor tokens) - ClassRoster/ManagedCourses empty lists use shared EmptyState/PanelEmptyState Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
… dep) npm ci in CI failed with 'Missing: yaml@2.9.0 from lock file'. Regenerated the lockfile with npm install so it matches package.json. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
ShimiManashirov
added a commit
that referenced
this pull request
Jul 4, 2026
* feat(frontend): a11y improvements + shared UI primitives (#92) - Global :focus-visible ring in index.css for app-wide keyboard focus - New shared Button (variants/sizes/loading) and StatCard primitives - New CountUp spring-number component (respects reduced-motion) - clickableProps() a11y helper; applied to interactive divs (course rows, sidebar profile, roadmap toggle, roster select, shop cards) - aria-labels/aria-expanded on icon-only buttons (bell, pagination, collapse) - Adopt Button on EmptyState, Dashboard header, ManagedCourses CTAs Co-authored-by: Claude Opus 4.8 <noreply@anthropic.com> * fix(frontend): replace alert() with toasts, add error/a11y improvements Replaces all browser alert() calls with the shared toast system, adds missing error feedback for silently-failing fetches, fixes accessible alt text and aria-labels across avatars/icon buttons/form fields, wires up unconnected form labels, fixes an enrollment lookup using loose equality, and flags Leaderboard's mock-data fallback as "Demo" so it's not mistaken for real data. Co-Authored-By: Claude <noreply@anthropic.com> * refactor(frontend): clean code + UI consistency overhaul (#95) * chore(frontend): add Prettier, jsx-a11y linting, husky pre-commit + fix a11y violations - Prettier config + one-time format of src/ - eslint-plugin-jsx-a11y (recommended) + eslint-config-prettier - husky + lint-staged pre-commit via frontend prepare script - root .editorconfig - fix all 28 jsx-a11y errors (labels, alt text, modal backdrops) Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> * refactor(frontend): consolidate UI primitives, extract helpers, kill prop drilling - new Spinner primitive replaces 17 duplicated inline spinner divs - Button component used in MyCourses/ClassRoster/StudyShop (new gold variant) - StudentStatusOverview split: 8 subcomponents extracted to components/instructor/ + shared TableSkeleton/CardSkeleton in components/common/Skeletons.jsx - status/format helpers moved to utils/studentStatus.js - layouts: SidebarContent self-sources stores/router (9 props -> 2 callbacks) - authStore: shared resolveActiveRole/loadCurrentUser helpers - theme swatches unified into THEMES constant (was duplicated in StudentProfile) - XP level magic numbers replaced with calculateLevel/XP_PER_LEVEL - utils/logger.js wrapper replaces scattered console.* calls Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> * polish(frontend): a11y + design-token consistency sweep - ToastManager: aria-live polite region + labeled dismiss button - sidebar course dropdown: aria-expanded / aria-haspopup - inline brand gradients -> .bg-grad-* / .text-gradient-* classes (new bg-grad-instructor + text-gradient-instructor tokens) - ClassRoster/ManagedCourses empty lists use shared EmptyState/PanelEmptyState Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> * fix(frontend): sync package-lock.json with package.json (missing yaml dep) npm ci in CI failed with 'Missing: yaml@2.9.0 from lock file'. Regenerated the lockfile with npm install so it matches package.json. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> --------- Co-authored-by: Claude Fable 5 <noreply@anthropic.com> --------- Co-authored-by: ShimiManashirov <122288727+ShimiManashirov@users.noreply.github.com> Co-authored-by: Claude Opus 4.8 <noreply@anthropic.com> Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
ShimiManashirov
added a commit
that referenced
this pull request
Jul 4, 2026
* feat(frontend): a11y improvements + shared UI primitives (#92) - Global :focus-visible ring in index.css for app-wide keyboard focus - New shared Button (variants/sizes/loading) and StatCard primitives - New CountUp spring-number component (respects reduced-motion) - clickableProps() a11y helper; applied to interactive divs (course rows, sidebar profile, roadmap toggle, roster select, shop cards) - aria-labels/aria-expanded on icon-only buttons (bell, pagination, collapse) - Adopt Button on EmptyState, Dashboard header, ManagedCourses CTAs Co-authored-by: Claude Opus 4.8 <noreply@anthropic.com> * fix(frontend): replace alert() with toasts, add error/a11y improvements Replaces all browser alert() calls with the shared toast system, adds missing error feedback for silently-failing fetches, fixes accessible alt text and aria-labels across avatars/icon buttons/form fields, wires up unconnected form labels, fixes an enrollment lookup using loose equality, and flags Leaderboard's mock-data fallback as "Demo" so it's not mistaken for real data. Co-Authored-By: Claude <noreply@anthropic.com> * refactor(frontend): clean code + UI consistency overhaul (#95) * chore(frontend): add Prettier, jsx-a11y linting, husky pre-commit + fix a11y violations - Prettier config + one-time format of src/ - eslint-plugin-jsx-a11y (recommended) + eslint-config-prettier - husky + lint-staged pre-commit via frontend prepare script - root .editorconfig - fix all 28 jsx-a11y errors (labels, alt text, modal backdrops) Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> * refactor(frontend): consolidate UI primitives, extract helpers, kill prop drilling - new Spinner primitive replaces 17 duplicated inline spinner divs - Button component used in MyCourses/ClassRoster/StudyShop (new gold variant) - StudentStatusOverview split: 8 subcomponents extracted to components/instructor/ + shared TableSkeleton/CardSkeleton in components/common/Skeletons.jsx - status/format helpers moved to utils/studentStatus.js - layouts: SidebarContent self-sources stores/router (9 props -> 2 callbacks) - authStore: shared resolveActiveRole/loadCurrentUser helpers - theme swatches unified into THEMES constant (was duplicated in StudentProfile) - XP level magic numbers replaced with calculateLevel/XP_PER_LEVEL - utils/logger.js wrapper replaces scattered console.* calls Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> * polish(frontend): a11y + design-token consistency sweep - ToastManager: aria-live polite region + labeled dismiss button - sidebar course dropdown: aria-expanded / aria-haspopup - inline brand gradients -> .bg-grad-* / .text-gradient-* classes (new bg-grad-instructor + text-gradient-instructor tokens) - ClassRoster/ManagedCourses empty lists use shared EmptyState/PanelEmptyState Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> * fix(frontend): sync package-lock.json with package.json (missing yaml dep) npm ci in CI failed with 'Missing: yaml@2.9.0 from lock file'. Regenerated the lockfile with npm install so it matches package.json. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> --------- Co-authored-by: Claude Fable 5 <noreply@anthropic.com> * fix(auth): stop rate limiter on /api/auth/me from logging users out (#97) The strict authLimiter (20 req/15min) covered all /api/auth routes, including GET /api/auth/me which the frontend calls on every page load. After ~20 navigations users hit 429, and the frontend treated it as an auth failure — clearing the stored JWT and redirecting to /login. - Apply the strict limiter only to the OAuth login endpoints (/api/auth/google*); the rest of /api/auth gets 300 req/15min. - In authStore, keep the stored token on transient /me failures (429, 5xx, network errors) so a rate-limit blip no longer destroys the session; only definitive rejections clear it. - Add a regression test asserting the token survives a 429 on /me. Co-authored-by: Claude Fable 5 <noreply@anthropic.com> --------- Co-authored-by: ShimiManashirov <122288727+ShimiManashirov@users.noreply.github.com> Co-authored-by: Claude Opus 4.8 <noreply@anthropic.com> Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Three-phase cleanup of the frontend: quality tooling, clean-code refactors, and a UI/a11y consistency sweep. No behavior changes intended — all 71 tests pass, lint is clean, production build succeeds after each phase.
Phase 1 — Quality tooling (
07a01e2).prettierrcmatching existing style) + one-time format ofsrc/eslint-config-prettier— found and fixed 28 a11y violations: unassociated form labels, missingalt, modal backdrops without keyboard handling.editorconfig; new scripts:lint:fix,format,format:check,test:coveragePhase 2 — Clean code (
2a1aa58)Spinnerprimitive replaces 17 duplicated inline spinner divs (some referencedborder-studylabs-blue, a color that doesn't exist in the theme)<Button>in MyCourses / ClassRoster / StudyShop (newgoldvariant)StudentStatusOverview.jsx: 1,590 → 1,129 lines — 8 presentational components extracted tocomponents/instructor/, shared skeletons tocomponents/common/Skeletons.jsx, helpers toutils/studentStatus.jsSidebarContentwent from 9–10 props to 2 callbacks (self-sources router + stores)authStore: duplicated role-resolution logic unified intoresolveActiveRole/loadCurrentUser/ 100,% 100) replaced withcalculateLevel/XP_PER_LEVEL; theme swatches deduplicated into theTHEMESconstantutils/logger.jsreplaces 24 scatteredconsole.*calls (debug/info silenced in prod)Phase 3 — UI polish & a11y (
1c2163f)aria-live="polite"region for toasts + labeled dismiss button;aria-expanded/aria-haspopupon the sidebar course dropdownstyle={{ background: 'linear-gradient(...)' }}brand gradients replaced with.bg-grad-*/.text-gradient-*design tokens (new-instructortokens)EmptyState/PanelEmptyStateTest plan
npm run lint— cleannpm test— 71/71 passnpm run build— succeeds🤖 Generated with Claude Code