🎨 Palette: Accessibility & Keyboard Navigation Improvements

[Gamepulse]

🎨 Palette: Accessibility & Keyboard Navigation Improvements

💡 What

• Enhanced GameCard.tsx:
  • Replaced <span> elements using role="button" with semantic <button type="button"> for tags and status badges.
  • Added tabIndex={0} and onKeyDown logic to the main card container to allow activation via Enter or Space.
  • Implemented focus-visible ring styles using the theme's accent color.
  • Prevented event bubbling issues where activating a tag would also trigger the card's main click event.
• Fixed Build Regression:
  • Removed an unused hasIgdbId state from GameScreenshotsCarousel.tsx that was causing a production build failure.

🎯 Why

• Accessibility: Native buttons provide better out-of-the-box support for screen readers and keyboard interaction than spans with ARIA roles.
• Usability: Allowing users to navigate and interact with their game library using only a keyboard makes the application more inclusive and professional.
• Stability: Fixing the unused variable error ensures the CI/CD pipeline and production builds remain healthy.

♿ Accessibility

• Full keyboard support for game cards.
• Proper ARIA labels for icon-only buttons.
• Semantic HTML for all interactive components.
• Clear visual focus indicators.

✅ Verification

• Ran pnpm build successfully (fixed the previous failure).
• Ran pnpm test (all tests passed).
• Verified with a Playwright script that cards are focusable and buttons have correct ARIA roles.

---

PR created automatically by Jules for task 2206975824834784227 started by @Gamepulse

[google-labs-jules]

👋 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.

[chatgpt-codex-connector]

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: 42d01f8078

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

• Open a pull request for review
• Mark a draft as ready
• Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".

[chatgpt-codex-connector]

Add an interactive role to keyboard-focusable card containers

The card wrappers are now keyboard-focusable (tabIndex={0}) and handle Enter/Space activation, but they remain plain <div> elements without an interactive role, so screen readers can announce them as generic containers instead of actionable controls. This creates an accessibility gap where keyboard users can trigger the card but assistive-technology users may not realize it is clickable; the same pattern is repeated in grid/compact/list variants, so these wrappers should expose button/link semantics (role="button" or native interactive elements).

Useful? React with 👍 / 👎.