From 558571a63985e144aa4df3d178e3d14e565bee27 Mon Sep 17 00:00:00 2001 From: "google-labs-jules[bot]" <161369871+google-labs-jules[bot]@users.noreply.github.com> Date: Wed, 20 May 2026 19:50:08 +0000 Subject: [PATCH] feat: add keyboard accessibility and focus states to cards - Added `role="button"`, `tabIndex={0}`, and `onKeyDown` handlers to `ProjectCard` and `ExperienceCard` interactive divs - Added `focus-visible` styling to all cards and links for keyboard users - Added `aria-label` to modal close buttons - Fixed minor Vite/Tailwind build warnings Co-authored-by: Dev22603 <92785712+Dev22603@users.noreply.github.com> --- .Jules/palette.md | 3 + frontend/eslint.config.js | 2 +- frontend/pnpm-lock.yaml | 2264 +++++++++++++++++++ frontend/src/components/BlogCard.jsx | 5 +- frontend/src/components/ExperienceCard.jsx | 15 +- frontend/src/components/ExperienceModal.jsx | 1 + frontend/src/components/ProjectCard.jsx | 13 +- frontend/src/components/ProjectModal.jsx | 1 + frontend/src/index.css | 4 +- frontend/vite.config.js | 4 + 10 files changed, 2304 insertions(+), 8 deletions(-) create mode 100644 .Jules/palette.md create mode 100644 frontend/pnpm-lock.yaml diff --git a/.Jules/palette.md b/.Jules/palette.md new file mode 100644 index 0000000..2a6b50b --- /dev/null +++ b/.Jules/palette.md @@ -0,0 +1,3 @@ +## 2024-05-20 - Interactive Divs Block Keyboard Users +**Learning:** Interactive UI components built with `div` or `motion.div` tags inherently lack keyboard accessibility, completely blocking keyboard-only users from interacting with cards that open modals or trigger actions. +**Action:** When building interactive card components (like ProjectCard or ExperienceCard) that do not use semantic `