feat(frontend): a11y improvements + shared UI primitives#92
Merged
Conversation
- 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>
ShimiManashirov
added a commit
that referenced
this pull request
Jun 28, 2026
- 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: ShimiManashirov <122288727+ShimiManashirov@users.noreply.github.com> Co-authored-by: Claude Opus 4.8 <noreply@anthropic.com>
ShimiManashirov
added a commit
that referenced
this pull request
Jul 1, 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> --------- 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> --------- 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.
מה זה כולל
שיפורי UI ממוקדים בנגישות ועקביות, מבלי לשנות את השפה הוויזואלית הקיימת.
נגישות (הפער המרכזי)
:focus-visibleגלובלי ב-index.css— טבעת פוקוס כתומה אחידה לכל אלמנט אינטראקטיבי, רק בניווט מקלדת.clickableProps()(utils/a11y.js) — מוסיףrole/tabIndex/הפעלה ב-Enter+Space ל-div-ים לחיצים. הוחל על: שורות קורס בדשבורד, כרטיס פרופיל בסיידבר, toggle ב-RoadmapView, בחירת סטודנט ב-ClassRoster, כרטיסי החנות.aria-label/aria-expanded/aria-pressedלכפתורי אייקון: פעמון התראות, Pagination (הומר ל-<nav>), toggle ה-collapse בדשבורד.עקביות מערכת העיצוב
<Button>משותף — variants (primary/gradient/purple/ghost/subtle/danger), גדלים, מצבloading, אייקונים, disabled נגיש.<StatCard>— חולץ מהדשבורד לרכיב יחיד.<CountUp>— אנימציית מספרים עם spring, מכבדprefers-reduced-motion.EmptyState, כותרת ה-Dashboard, ו-CTAs ב-ManagedCourses.אימות
npm run lint— נקיnpm run build— עובר🤖 Generated with Claude Code