🎨 Palette: Keyboard Accessibility for Interactive Cards#49
Conversation
- Add role="button", tabIndex=0, onKeyDown to ProjectCard - Add role="button", tabIndex=0, onKeyDown to ExperienceCard - Add focus-visible styles for keyboard navigation - Ignore inner link clicks on ProjectCard keydown - Fix frontend build lint/warnings Co-authored-by: Dev22603 <92785712+Dev22603@users.noreply.github.com>
|
👋 Jules, reporting for duty! I'm here to lend a hand with this pull request. When you start a review, I'll add a 👀 emoji to each comment to let you know I've read it. I'll focus on feedback directed at me and will do my best to stay out of conversations between you and other bots or reviewers to keep the noise down. I'll push a commit with your requested changes shortly after. Please note there might be a delay between these steps, but rest assured I'm on the job! For more direct control, you can switch me to Reactive Mode. When this mode is on, I will only act on comments where you specifically mention me with New to Jules? Learn more at jules.google/docs. For security, I will only act on instructions from the user who triggered this task. |
✅ Deploy Preview for dev-bachani ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
1 participant
💡 What: Added comprehensive keyboard accessibility to the clickable
ProjectCardandExperienceCardcomponents.🎯 Why: Previously, these cards were only navigable and actionable via mouse clicks since they were built using non-interactive
motion.divelements. This change ensures users navigating with a keyboard can focus on the cards usingTaband activate them using theEnterorSpacekeys, improving the overall accessibility of the portfolio.📸 Before/After: (Visual verification confirmed adding
focus-visible:ring-2 focus-visible:ring-[var(--color-primary)]creates a clear visual indicator when a card is focused).♿ Accessibility: Added semantic
role="button"andtabIndex={0}attributes. Implemented customonKeyDownhandlers that supportEnterandSpace(with default scrolling prevention for Space). Specifically handled event bubbling on theProjectCardso that focusing an inner link (like a GitHub icon) and pressing Enter doesn't also trigger the parent card's click action.(Also included minor fixes to
eslint.config.js,vite.config.js, andindex.cssto resolve existing build/lint warnings and errors).PR created automatically by Jules for task 10574534112245044219 started by @Dev22603