🎨 Palette: Add tooltips to icon-only buttons - #673
Conversation
Adds `title` attributes to several icon-only buttons across the application (Search, Settings, Back, and Expand/Collapse buttons) that previously only had `aria_label` attributes. This ensures that sighted users hovering with a mouse can easily understand their purpose, improving overall accessibility. Also adds a learning entry to `.Jules/palette.md` to document this practice for future micro-UX improvements. Co-authored-by: matta <37314+matta@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. |
|
Merging to
|
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 enhances the user experience and accessibility of the application by introducing visual tooltips for icon-only buttons. While Highlights
Changelog
Activity
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. You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension. 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 is a good accessibility and usability enhancement, adding title attributes to icon-only buttons to provide tooltips for sighted users. The implementation is straightforward and correct in most places. I've added one suggestion in task_row.rs to make the title and aria-label for the expansion button more descriptive, which will improve accessibility and align it with the pattern used by other interactive elements in the same component.
| title: "Toggle expansion", | ||
| aria_label: "Toggle expansion", |
There was a problem hiding this comment.
For improved accessibility and consistency, the title and aria-label for the expansion toggle should include the task title. This provides clearer context for users, especially those using assistive technologies, about which task will be expanded. This change would also align this button's labeling with other interactive elements in the TaskRow component (e.g., 'Delete task {title}').
| title: "Toggle expansion", | |
| aria_label: "Toggle expansion", | |
| title: "Toggle expansion for {title}", | |
| aria_label: "Toggle expansion for {title}", |
References
- The repository style guide for
aria-labelrecommends being concise but also providing clear context, giving 'Edit task {task.title}' as a good example. Making this label more specific by including the task title follows this guideline. (link)
Renames `.Jules/palette.md` to `.jules/palette.md` to resolve CI failures caused by the directory name not being in kebab-case or snake-case. Co-authored-by: matta <37314+matta@users.noreply.github.com>
Formats the `.jules/palette.md` file using `pnpm prettier --write` to resolve the CI check format failure. Co-authored-by: matta <37314+matta@users.noreply.github.com>
1 participant
🎨 Palette: Add tooltips to icon-only buttons
💡 What: Added
titleattributes to several icon-only buttons (Search,Settings,Back, andExpand).🎯 Why: While these buttons had
aria_labelattributes for screen readers, sighted users relying on a mouse had no visual indication of what the buttons did when hovering.📸 Before/After: Sighted users will now see standard OS/browser tooltips when hovering over these icons.
♿ Accessibility: Improves the experience for non-screen-reader users who may not immediately recognize the meaning of an icon.
PR created automatically by Jules for task 6098559899872731138 started by @matta