🎨 Palette: Add explicit ARIA labels to responsive icon buttons#88
🎨 Palette: Add explicit ARIA labels to responsive icon buttons#88Bhishaj9 wants to merge 1 commit into
Conversation
…screen readers This commit ensures that interactive elements (buttons and links) which use Tailwind's `hidden` classes to conceal their text on smaller screens remain accessible by explicitly defining their `aria-label`. It also applies `aria-hidden="true"` to inner material icons to prevent screen readers from announcing raw ligatures (e.g., "rocket launch", "content copy"). These a11y improvements were made across `dashboard.html`, `glassui.html`, and `code.html`. Additionally, it establishes a `.jules/palette.md` journal detailing this responsive accessibility pattern. Co-authored-by: Bhishaj9 <144550237+Bhishaj9@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. |
1 participant
This PR addresses a critical accessibility oversight in the frontend where buttons and links with responsive text (e.g.
DeployorBack to Home) lose their accessible name on smaller viewports because their visible text is hidden via Tailwind classes (e.g.hidden lg:inline).Furthermore, raw Material Symbols ligatures inside these elements were not masked, meaning screen readers would announce the raw text like "rocket launch" instead of the intended button action.
Changes:
aria-labelattributes to the 'Deploy', 'Copy JSON', 'Download JSON' buttons and the 'Back to Home' link acrossdashboard.html,glassui.html, andcode.html.aria-hidden="true"to the inner<span class="material-symbols-outlined">elements to mask the ligatures from screen readers..jules/palette.mdjournal.These changes have been visually verified using Playwright screenshots, ensuring no unintended visual shifts, and the existing test suite passes cleanly.
PR created automatically by Jules for task 4475337916661591537 started by @Bhishaj9