Skip to content

🎨 Palette: Improve GameDetail accessibility and rating UX#35

Open
Gamepulse wants to merge 1 commit into
Devfrom
palette-game-detail-ux-9790224091897100206
Open

🎨 Palette: Improve GameDetail accessibility and rating UX#35
Gamepulse wants to merge 1 commit into
Devfrom
palette-game-detail-ux-9790224091897100206

Conversation

@Gamepulse
Copy link
Copy Markdown
Owner

This PR introduces a micro-UX improvement to the game detail page and enhances accessibility across the header.

💡 What:

  • Added a "Remove" button next to the personal rating slider. Since native range inputs cannot represent a null/unset state, this provides a clear way for users to remove their rating.
  • Replaced the folder path display with a semantic button that is keyboard-accessible and has a descriptive ARIA label.
  • Added ARIA labels and focus indicators to genre, mode, theme, and perspective filter buttons.
  • Marked decorative branding overlays as aria-hidden.
  • Fixed a TypeScript build error caused by an unused variable in the screenshots carousel.

🎯 Why:

  • Improving the personal rating UX by allowing it to be cleared.
  • Ensuring the interface is more accessible for screen reader and keyboard users.
  • Maintaining a clean build by removing unused code.

♿ Accessibility:

  • Semantic buttons used for all interactive elements.
  • Clear focus-visible rings added for keyboard navigation.
  • Icon-only buttons (favorite, remove rating) have descriptive ARIA labels.
  • Decorative elements hidden from screen readers.
  • Avoided nested interactivity in cards to comply with ARIA standards.

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

- Add "Remove" button to personal rating slider to allow unsetting rating
- Add ARIA labels and focus-visible rings to interactive elements in GameDetailHeader
- Hide decorative SVG overlay from screen readers
- Fix unused variable build error in GameScreenshotsCarousel.tsx
- Document learnings about nested interactivity in card patterns

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

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

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