🎨 Palette: Add keyboard accessibility to interactive cards#46
Conversation
Added `role="button"`, `tabIndex={0}`, and custom `onKeyDown` handlers to `ExperienceCard` and `ProjectCard` components, allowing activation via `Enter` or `Space` key while explicitly ignoring inner links. Also added `focus-visible` ring utility classes to interactive elements across `ExperienceCard`, `ProjectCard`, and `BlogCard` components for improved keyboard navigation visibility.
Fixed ESLint unused variables configuration to correctly ignore `motion` imports from framer-motion. Fixed Vite build warnings regarding CSS `@import` ordering and `__dirname` resolution in `vite.config.js`.
Appended a new entry regarding custom keyboard interaction implementations in the Palette journal.
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 support (Enter/Space key handlers, semantic roles, tab indexing, and
focus-visiblefocus rings) to the primary interactivediv-based card components (ExperienceCard,ProjectCard,BlogCard).🎯 Why: To ensure users relying on keyboard navigation and screen readers can interact with and visibly locate active interactive elements that were previously built as non-interactive
divelements, while ensuring nested interactive elements (like repository links) are not blocked or double-triggered.📸 Before/After:
(See visual verification screenshot showing active focus ring styles upon tabbing into the cards)
♿ Accessibility:
role="button"andtabIndex={0}semantics where missing.focus-visiblestyling using Tailwind's ring utilities mapped to the primary theme color.PR created automatically by Jules for task 2109203960201048414 started by @Dev22603