🎨 Palette: Keyboard accessibility and safety improvements#21
Conversation
- Added keyboard navigation (Enter/Space) to GameCard components in all view modes. - Implemented focus-visible indicators for interactive elements. - Added ARIA labels and roles to icon-only buttons and decorative emojis. - Implemented event propagation blocking to ensure nested interactions don't trigger parent actions. - Added a confirmation dialog for game deletion in GameDetail. - Fixed a TypeScript linting error in GameScreenshotsCarousel. - Added missing i18n keys for view modes and sort order. - Cleaned up debug logs and unused state. Co-authored-by: Gamepulse <8333979+Gamepulse@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. |
![chatgpt-codex-connector[bot]](https://avatars.githubusercontent.com/in/1144995?s=60&v=4){kind=small}
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: 8c0b13d576
ℹ️ 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".
| <div | ||
| className="theme-card theme-border border rounded-lg overflow-hidden cursor-pointer transition-all duration-300 hover:scale-105 hover:shadow-xl hover:border-gray-600" | ||
| className="theme-card theme-border border rounded-lg overflow-hidden cursor-pointer transition-all duration-300 hover:scale-105 hover:shadow-xl hover:border-gray-600 focus-visible:ring-2 focus-visible:ring-indigo-500 outline-none" | ||
| tabIndex={0} | ||
| onKeyDown={handleKeyDown} |
There was a problem hiding this comment.
The card containers are now keyboard-focusable and activate on Enter/Space, but they are still plain <div> elements without an interactive role or name. In screen readers this is typically announced as generic content, so users can tab to it without being told it is actionable, making the new keyboard navigation difficult to discover across grid/list/compact cards. Use a semantic <button> (preferred) or add role="button" plus an accessible name.
Useful? React with 👍 / 👎.
1 participant
Implemented a series of micro-UX improvements focused on accessibility and safety:
PR created automatically by Jules for task 12698961435335710957 started by @Gamepulse