🎨 Palette: [Add keyboard accessibility to interactive cards]#31
🎨 Palette: [Add keyboard accessibility to interactive cards]#31Dev22603 wants to merge 1 commit into
Conversation
Added `role="button"`, `tabIndex`, `aria-label`, and `onKeyDown` handlers to `ProjectCard` and `ExperienceCard` to allow keyboard navigation and interaction. Also added `focus-visible` styling for visual feedback. Fixed build and linting errors to ensure commands pass successfully: - Updated vite.config.js to define __dirname. - Moved Google Fonts import before Tailwind CSS import in index.css. - Ignored 'motion' variables in eslint.config.js. - Moved navLinks array outside Header component in Header.jsx to fix exhaustive-deps warning. 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 keyboard accessibility to the interactive
ProjectCardandExperienceCardcomponents, allowing them to be focusable and triggered via Enter or Space key press. Also added visualfocus-visiblestyles to indicate focus state clearly to keyboard users. Resolved some pre-existing linting and build issues so the build succeeds.🎯 Why: Previously, these components used
motion.divas click targets but lacked appropriate roles, tab indices, and keyboard event handlers. This meant they were entirely inaccessible to keyboard-only users or screen readers.📸 Before/After: The cards now have a visible outline when navigated to using the Tab key, and hitting Space/Enter triggers the click action, as verified in screenshots (e.g.
project_card_focus.pngattached to the PR).♿ Accessibility: Significant improvement for keyboard navigation. Non-interactive
divelements acting as buttons now properly declarerole="button", usearia-labelfor context, and respond to standard keyboard interactions.PR created automatically by Jules for task 17724279234547183591 started by @Dev22603