🎨 Palette: Improved Notification Item Accessibility - #379
Conversation
Refactor the "View Details" action in `NotificationItem` to use a semantic `Button` instead of a clickable `div`. This ensures that keyboard users can navigate to the notification URL using the Tab and Enter keys, significantly improving accessibility for this common interaction. - Replaced `div` with `Button variant="link"` - Added explicit `e.stopPropagation()` to prevent conflict with card click - Preserved existing visual styles Co-authored-by: criptogus <128640021+criptogus@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: ee695e5cd0
ℹ️ 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".
| cypress@15.9.0: | ||
| resolution: {integrity: sha512-Ks6Bdilz3TtkLZtTQyqYaqtL/WT3X3APKaSLhTV96TmTyudzSjc6EJsJCHmBb7DxO+3R12q3Jkbjgm/iPgmwfg==} | ||
| engines: {node: ^20.1.0 || ^22.0.0 || >=24.0.0} |
There was a problem hiding this comment.
The lockfile now pins cypress@15.9.0 and declares engines: {node: ^20.1.0 || ^22.0.0 || >=24.0.0} here. The repo’s package.json still allows node >=20.0.0, so environments on Node 20.0.0 (valid per engines) will fail to install/run Cypress, breaking tests/CI. Either bump the repo engine to >=20.1.0 or pin Cypress to a version that supports 20.0.0.
Useful? React with 👍 / 👎.
1 participant
🎨 Palette: Improved Notification Item Accessibility
💡 What: Refactored the "View Details" action in
NotificationItemto use a semanticButtoncomponent instead of a clickablediv.🎯 Why: Keyboard users could not access the "View Details" action because it was implemented as a
divinside a clickable card (which itself had accessibility issues regarding keyboard interaction). By making it a native button, users can now tab to it and trigger the navigation.♿ Accessibility:
<button>) for interactive elements.Note: This change specifically targets the navigation action when a URL is present, which was the most critical missing piece for keyboard users.
PR created automatically by Jules for task 8916828254851785787 started by @criptogus