From 586626b54e274c9ba1e352515e01a1e0003c2f89 Mon Sep 17 00:00:00 2001 From: "google-labs-jules[bot]" <161369871+google-labs-jules[bot]@users.noreply.github.com> Date: Sun, 31 May 2026 20:10:24 +0000 Subject: [PATCH] feat(a11y): add keyboard accessibility to custom clickable cards - Added `role="button"` and `tabIndex={0}` to `ProjectCard` and `ExperienceCard` root `motion.div` elements. - Implemented `onKeyDown` handlers to trigger click events when 'Enter' or 'Space' are pressed. - Added `focus-visible` Tailwind classes to provide clear visual indicators for keyboard navigation. - Fixed a `__dirname` resolution issue in `vite.config.js`. - Configured ESLint to ignore unused `motion` variables to fix lint errors. - Documented learning in `.Jules/palette.md`. Co-authored-by: Dev22603 <92785712+Dev22603@users.noreply.github.com> --- .Jules/palette.md | 3 + frontend/eslint.config.js | 2 +- frontend/pnpm-lock.yaml | 2265 ++++++++++++++++++++ frontend/src/components/ExperienceCard.jsx | 13 +- frontend/src/components/ProjectCard.jsx | 11 + frontend/vite.config.js | 3 + 6 files changed, 2295 insertions(+), 2 deletions(-) create mode 100644 frontend/pnpm-lock.yaml diff --git a/.Jules/palette.md b/.Jules/palette.md index d878f67..0b5cc75 100644 --- a/.Jules/palette.md +++ b/.Jules/palette.md @@ -1,3 +1,6 @@ ## 2024-05-19 - Missing ARIA Labels on Modal Close Buttons **Learning:** Icon-only close buttons (like the 'X' in ProjectModal and ExperienceModal) were missing ARIA labels, making them inaccessible to screen readers. **Action:** Always verify that icon-only buttons include descriptive `aria-label` attributes to ensure keyboard and screen reader accessibility. +## 2026-05-31 - Keyboard Accessibility for Custom Interactive Elements +**Learning:** In this application, custom interactive components like `motion.div` are frequently used as clickable cards (`ProjectCard`, `ExperienceCard`), but they lack native keyboard accessibility compared to standard `