🎨 Palette: [Add keyboard accessibility to clickable cards]#35
Conversation
Added keyboard accessibility to `ProjectCard` and `ExperienceCard` components.
Modified `ProjectCard.jsx` and `ExperienceCard.jsx` to include `role="button"`, `tabIndex={0}`, an `onKeyDown` handler (for Enter/Space keys), and `focus-visible` styling, ignoring events from inner anchor tags.
Fixed build errors (Vite config `__dirname` resolution, ESLint rules for unused variables, CSS `@import` ordering) to allow verification.
Appended journal entry to `.Jules/palette.md`.
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 full keyboard accessibility support to the interactive
ProjectCardandExperienceCardcomponents, allowing keyboard-only users to trigger the main actions (opening modals, etc.) using the "Enter" or "Space" keys. Added clearfocus-visiblestates to visually indicate focus.🎯 Why: Making large
motion.divcontainers clickable without explicit keyboard support locks out users who rely on keyboards or assistive technologies to navigate the page. Furthermore, handling keyboard events requires care when inner interactive elements (like source code links) exist, to prevent unintended actions.📸 Before/After:
Before: The cards were only actionable via mouse clicks. Tabbing to them produced no visible focus state and pressing Enter/Space did nothing.
After: The cards are now fully focusable via the "Tab" key, display a prominent teal focus ring, and can be activated via the "Enter" or "Space" keys. The
onKeyDownhandler ignores events from inner links to prevent double-triggering. Visual verification media was successfully recorded.♿ Accessibility:
role="button"andtabIndex={0}tomotion.divcontainers.onKeyDownhandlers for "Enter" and "Space" keys (with event delegation safeguards).focus-visible:ring-2 focus-visible:ring-[var(--color-primary)]styles for keyboard navigation visual feedback.aria-labels to both components.PR created automatically by Jules for task 4394198222387835318 started by @Dev22603