🎨 Palette: MahjongTile Keyboard Accessibility#1
Conversation
- Add role="button", tabIndex=0, and aria-label when interactive - Support Enter and Space keys for selection - Add global focus-visible styles matching the theme - Log accessibility learning in .Jules/palette.md Co-authored-by: Alchemist-Aloha <103620968+Alchemist-Aloha@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. |
There was a problem hiding this comment.
Pull request overview
Adds keyboard focus and screen reader support to the MahjongTile UI so tiles can be navigated and activated without a mouse.
Changes:
- Add keyboard activation (Enter/Space),
role,tabIndex, andaria-labelhandling toMahjongTile. - Add global
:focus-visiblestyling for.mahjong-tileto show a clear focus ring. - Introduce new metadata/lock artifacts (
frontend/pnpm-lock.yaml,.Jules/palette.md).
Reviewed changes
Copilot reviewed 3 out of 4 changed files in this pull request and generated 4 comments.
| File | Description |
|---|---|
| frontend/src/components/MahjongTile.tsx | Adds ARIA semantics and keyboard handling for interactive tiles. |
| frontend/src/App.tsx | Adds global focus-visible outline styling for tile focus indication. |
| frontend/pnpm-lock.yaml | Adds a pnpm lockfile (conflicts with existing npm-based setup). |
| .Jules/palette.md | Adds automation/tooling notes file to the repo. |
Files not reviewed (1)
- frontend/pnpm-lock.yaml: Language not supported
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
You can also share your feedback on Copilot code review. Take the survey.
| lockfileVersion: '9.0' | ||
|
|
||
| settings: | ||
| autoInstallPeers: true | ||
| excludeLinksFromLockfile: false | ||
|
|
||
| importers: | ||
|
|
||
| .: | ||
| dependencies: | ||
| react: | ||
| specifier: ^18.3.1 | ||
| version: 18.3.1 | ||
| react-dom: | ||
| specifier: ^18.2.0 | ||
| version: 18.3.1(react@18.3.1) | ||
| socket.io: | ||
| specifier: ^4.8.3 | ||
| version: 4.8.3 | ||
| socket.io-client: |
There was a problem hiding this comment.
This PR adds frontend/pnpm-lock.yaml, but the repo already uses npm lockfiles (frontend/package-lock.json) and the frontend Dockerfile runs npm install. Unless the project is intentionally migrating to pnpm (with corresponding script/CI/Dockerfile changes), committing a pnpm lockfile will likely cause dependency drift and confusion—please remove it or complete the migration consistently.
| ## 2024-10-24 - [MahjongTile Keyboard Accessibility] | ||
| **Learning:** Custom interactive components built with generic `<div>` tags completely break keyboard navigation and screen reader semantics unless explicitly augmented. In `MahjongTile.tsx`, the `onClick` handler alone resulted in tiles being unselectable via Tab, lacking focus styling, and only reading their image `alt` attributes instead of functioning as a button. | ||
| **Action:** When creating custom interactive elements (like the interactive Mahjong tiles in hand), ensure to add `role="button"`, `tabIndex={0}`, an `onKeyDown` handler for 'Enter'/'Space', and `.component:focus-visible` styling globally or modularly. Additionally, providing an `aria-label` ensures accurate semantic announcement beyond the default image alt-text. No newline at end of file |
There was a problem hiding this comment.
Adding .Jules/palette.md introduces tool-specific metadata into the repo. If this file isn’t required at runtime or for developer workflows, consider removing it (or adding .Jules/ to .gitignore) to avoid accumulating automation artifacts in the main codebase.
| ## 2024-10-24 - [MahjongTile Keyboard Accessibility] | |
| **Learning:** Custom interactive components built with generic `<div>` tags completely break keyboard navigation and screen reader semantics unless explicitly augmented. In `MahjongTile.tsx`, the `onClick` handler alone resulted in tiles being unselectable via Tab, lacking focus styling, and only reading their image `alt` attributes instead of functioning as a button. | |
| **Action:** When creating custom interactive elements (like the interactive Mahjong tiles in hand), ensure to add `role="button"`, `tabIndex={0}`, an `onKeyDown` handler for 'Enter'/'Space', and `.component:focus-visible` styling globally or modularly. Additionally, providing an `aria-label` ensures accurate semantic announcement beyond the default image alt-text. |
💡 What: Added comprehensive keyboard and screen reader accessibility support to the
MahjongTilecomponent.🎯 Why: To allow users to navigate, select, and interact with their Mahjong hand using a keyboard or screen reader, rather than relying solely on a mouse.
📸 Before/After: Tabbing through hand tiles now displays a clear
--accent-colorfocus ring, and screen readers read the tile name instead of just "img".♿ Accessibility: Replaced non-semantic
divonClick behavior with properrole="button",tabIndex,onKeyDown(Enter/Space), andaria-labelattributes for interactive tiles. Added.mahjong-tile:focus-visiblestyles globally.PR created automatically by Jules for task 5932816700678543946 started by @Alchemist-Aloha