🎨 Palette: Improve accessibility of icon-only buttons with aria-labels#469
🎨 Palette: Improve accessibility of icon-only buttons with aria-labels#469
Conversation
- Add dynamic aria-label to Notification Center trigger indicating unread count - Combine read status and notification title into single aria-label on Notification Item - Add aria-labels to download and options buttons in GameDownloadDialog Co-authored-by: Doezer <11655673+Doezer@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. |
Summary of ChangesHello, I'm Gemini Code Assist1! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed! This pull request significantly enhances the application's accessibility by implementing descriptive Highlights
Using Gemini Code AssistThe full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips. Invoking Gemini You can request assistance from Gemini at any point by creating a comment using either
Customization To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a Limitations & Feedback Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for GitHub and other Google products, sign up here. Footnotes
|
|
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
This pull request significantly improves the accessibility of the application by adding descriptive aria-label attributes to several icon-only buttons. The changes in GameDownloadDialog, NotificationCenter, and NotificationItem make the UI more understandable for screen reader users. I've added one suggestion to further enhance the readability of one of the new aria-labels by formatting the text.
| downloadingGuid === (download.guid || download.link) | ||
| } | ||
| className="h-9 w-9 hover:bg-primary hover:text-primary-foreground transition-all" | ||
| aria-label={`Download ${download.title}`} |
There was a problem hiding this comment.
For a better screen reader experience, it's good practice to format release titles by replacing separators like dots and underscores with spaces. This will make the aria-label more natural to listen to. For example, a screen reader would announce "Download The Legend of Zelda" instead of "Download The dot Legend dot of dot Zelda".
| aria-label={`Download ${download.title}`} | |
| aria-label={`Download ${download.title.replace(/[._]/g, ' ')}`} |
Codecov Report✅ All modified and coverable lines are covered by tests. 📢 Thoughts on this report? Let us know! |
1 participant
💡 What: Added dynamic and descriptive
aria-labelattributes to multiple icon-only interactive elements across the app.🎯 Why: To improve screen reader accessibility so users understand the context of icon-only buttons, particularly for notifications and downloads.
♿ Accessibility:
NotificationItemnow uses a single consolidatedaria-labelto announce the read status along with the notification title seamlessly, hiding the inner visual icons from the screen reader to prevent redundant announcements.GameDownloadDialognow havearia-labels like "Download [Game Title]" and "More options" for context.PR created automatically by Jules for task 960916284616878748 started by @Doezer