🎨 Palette: [Add keyboard accessibility to interactive cards]#24
🎨 Palette: [Add keyboard accessibility to interactive cards]#24Dev22603 wants to merge 1 commit into
Conversation
Added keyboard accessibility attributes to custom interactive card components to allow non-mouse users to access them.
* Added role="button" and tabIndex={0} to `ProjectCard` and `ExperienceCard`.
* Added onKeyDown handlers to support Enter and Space key activation.
* Added focus-visible styling for visual focus indicators.
* Fixed build errors regarding vite configuration __dirname, index.css @import rules, and eslint config for unused variables.
* Added a journal entry for the learning outcome in .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 keyboard accessibility attributes (
role,tabIndex), keyboard event handlers, and focus-visible styling to the interactiveProjectCardandExperienceCardcomponents.Why: Non-native interactive elements (like custom cards implemented as
divormotion.div) lack built-in keyboard accessibility, preventing users navigating via keyboard from triggering them or seeing a focus state.Before/After: Video attached with visual verification showing clear focus outlines on cards when navigating using the Tab key, and modals opening via the Enter key.
Accessibility: Improved keyboard navigability by ensuring interactive cards can be focused and activated via keyboard, fulfilling WCAG guidelines for keyboard accessibility.
(Also included fixes for lint/build errors that blocked deployment:
vite.config.js__dirnamefix,eslintmotionvariable ignore, andindex.css@importordering).PR created automatically by Jules for task 6177593963734064475 started by @Dev22603