🎨 Palette: Add ARIA labels and fix screen reader context for responsive icon-only buttons#74
Conversation
* Added `aria-label` to buttons and links in `dashboard.html` and `glassui.html` where visual text is hidden on small screens (`hidden lg:inline`, `hidden sm:inline-flex`), preventing screen readers from losing context on mobile viewports. * Added `aria-hidden="true"` to structural Material Symbols (`<span>`) inside these elements so screen readers don't erroneously announce raw ligatures. * Added explicit `aria-label` attributes to the standalone "Copy JSON" and "Download JSON" buttons. * Documented UX accessibility insight in `.jules/palette.md`. * Formatted HTML output via `npx prettier`. 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 commit addresses a critical accessibility flaw in responsive interactive elements. Prior to this change, elements like the "Deploy" button and "Back to Home" link hid their text using Tailwind's breakpoint classes (e.g.,
hidden lg:inline). While visually correct, this effectively transformed them into icon-only elements on small screens. Because they lacked an explicitaria-label, screen readers either could not announce their purpose or, worse, read out the raw ligature text of the Material Symbols (e.g., "rocket launch", "arrow back") without any actionable context.The fix resolves this by hardcoding appropriate
aria-labels on the parent interactive wrappers (<button>,<a>) and explicitly marking the structural Google Material Symbol spans witharia-hidden="true". This guarantees a robust and consistent accessibility tree regardless of the user's viewport size.The same accessibility enhancements were applied across both
dashboard.htmland theglassui.htmltemplate. Furthermore, the underlying learning about responsive text-hiding techniques has been permanently documented in the.jules/palette.mdUX journal.PR created automatically by Jules for task 3060053313455134780 started by @Bhishaj9