Skip to content

🎨 Palette: Enhance card keyboard accessibility#6

Open
Dev22603 wants to merge 1 commit into
mainfrom
palette-accessibility-focus-14529728975802440171
Open

🎨 Palette: Enhance card keyboard accessibility#6
Dev22603 wants to merge 1 commit into
mainfrom
palette-accessibility-focus-14529728975802440171

Conversation

@Dev22603
Copy link
Copy Markdown
Owner

💡 What: Added comprehensive keyboard navigation support to the interactive ProjectCard and ExperienceCard components.
🎯 Why: These cards act as interactive elements (clickable motion.divs) but previously lacked keyboard focus capabilities and keyboard-activated click handlers, making them inaccessible to keyboard and screen reader users.
Accessibility:

  • Added role="button" for semantic meaning.
  • Added tabIndex={0} to place the items in the standard tab flow.
  • Implemented onKeyDown listeners to trigger the existing onClick logic when users press 'Enter' or 'Space'.
  • Added robust visual focus feedback using Tailwind's focus-visible:ring-2, focus-visible:ring-primary, and focus-visible:outline-none classes.

This change ensures that all primary interaction paths on the portfolio are fully navigable via keyboard alone. Additionally, fixed a minor CSS syntax warning in index.css by elevating the Google Fonts @import rule above @import "tailwindcss"; to keep builds warning-free.


PR created automatically by Jules for task 14529728975802440171 started by @Dev22603

Added `role="button"`, `tabIndex={0}`, keyboard event handlers, and focus-visible rings to `ProjectCard` and `ExperienceCard` to support keyboard navigation. Fixed an index.css warning to ensure clean builds.

Co-authored-by: Dev22603 <92785712+Dev22603@users.noreply.github.com>
@google-labs-jules
Copy link
Copy Markdown
Contributor

👋 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 @jules. You can find this option in the Pull Request section of your global Jules UI settings. You can always switch back!

New to Jules? Learn more at jules.google/docs.


For security, I will only act on instructions from the user who triggered this task.

@netlify
Copy link
Copy Markdown

netlify Bot commented May 25, 2026

Deploy Preview for dev-bachani ready!

Name Link
🔨 Latest commit 2fc50f5
🔍 Latest deploy log https://app.netlify.com/projects/dev-bachani/deploys/6a14aa14925e460008537756
😎 Deploy Preview https://deploy-preview-6--dev-bachani.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.
🤖 Make changes Run an agent on this branch

To edit notification comments on pull requests, go to your Netlify project configuration.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant