From ce843a7c07bb0e4df2a5184339e5ae320dfcc051 Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Tue, 9 Jun 2026 04:44:01 +0000
Subject: [PATCH] feat(ui): add ARIA labels to icon buttons and hide ligatures

- Added explicit `aria-label` attributes to "Back to Home" and "Deploy" buttons in `dashboard.html` and `glassui.html` where text is hidden on small screens via Tailwind classes.
- Added `aria-label` to icon-only buttons ("Copy JSON", "Download JSON").
- Added `aria-hidden="true"` to `material-symbols-outlined` spans to prevent screen readers from announcing raw ligatures.
- Created `.jules/palette.md` to document the learning regarding responsive Tailwind classes and screen reader behavior.

Co-authored-by: Bhishaj9 <144550237+Bhishaj9@users.noreply.github.com>
---
 .jules/palette.md |  3 +++
 dashboard.html    | 16 ++++++++--------
 glassui.html      | 12 ++++++------
 3 files changed, 17 insertions(+), 14 deletions(-)
 create mode 100644 .jules/palette.md

diff --git a/.jules/palette.md b/.jules/palette.md
new file mode 100644
index 0000000..54c5762
--- /dev/null
+++ b/.jules/palette.md
@@ -0,0 +1,3 @@
+## 2026-02-23 - Responsive Tailwind Classes Masking Accessible Names
+**Learning:** When using responsive utility classes (like `hidden lg:inline`) to hide text on smaller screens (e.g., mobile viewports), the parent interactive element (`<button>` or `<a>`) loses its accessible name for screen readers if it only contains an icon ligature (`<span class="material-symbols-outlined">rocket_launch</span>`). Screen readers will incorrectly read out the raw icon text (e.g., "rocket launch" instead of "Deploy").
+**Action:** Always add an explicit `aria-label` to the parent interactive element and `aria-hidden="true"` to the icon element when responsive text-hiding techniques are used. This ensures consistent accessibility across all screen sizes.
diff --git a/dashboard.html b/dashboard.html
index a73dccc..a1ae9e9 100644
--- a/dashboard.html
+++ b/dashboard.html
@@ -147,13 +147,13 @@ <h2 class="text-white text-base lg:text-xl font-bold leading-tight tracking-tigh
 </div>
 </div>
 </div>
-<a class="hidden sm:inline-flex flex-none items-center justify-center rounded-full h-9 lg:h-10 px-4 lg:px-5 bg-white/5 hover:bg-white/10 border border-white/10 text-white text-xs lg:text-sm font-bold transition-all" href="/">
-<span class="material-symbols-outlined text-lg lg:mr-2">arrow_back</span>
+<a aria-label="Back to Home" class="hidden sm:inline-flex flex-none items-center justify-center rounded-full h-9 lg:h-10 px-4 lg:px-5 bg-white/5 hover:bg-white/10 border border-white/10 text-white text-xs lg:text-sm font-bold transition-all" href="/">
+<span aria-hidden="true" class="material-symbols-outlined text-lg lg:mr-2">arrow_back</span>
 <span class="hidden lg:inline">Back to Home</span>
 </a>
-<button class="group relative flex-none flex cursor-pointer items-center justify-center overflow-hidden rounded-full h-9 lg:h-10 px-4 lg:px-6 bg-gradient-to-r from-amber-600 to-amber-800 hover:from-amber-500 hover:to-amber-700 border border-white/10 shadow-[0_0_15px_rgba(245,158,11,0.3)] transition-all" id="deployBtn">
+<button aria-label="Deploy" class="group relative flex-none flex cursor-pointer items-center justify-center overflow-hidden rounded-full h-9 lg:h-10 px-4 lg:px-6 bg-gradient-to-r from-amber-600 to-amber-800 hover:from-amber-500 hover:to-amber-700 border border-white/10 shadow-[0_0_15px_rgba(245,158,11,0.3)] transition-all" id="deployBtn">
 <div class="absolute inset-0 bg-white/10 opacity-0 group-hover:opacity-100 transition-opacity"></div>
-<span class="material-symbols-outlined lg:mr-2 text-lg relative z-10">rocket_launch</span>
+<span aria-hidden="true" class="material-symbols-outlined lg:mr-2 text-lg relative z-10">rocket_launch</span>
 <span class="hidden lg:inline truncate text-sm font-bold tracking-wide relative z-10">Deploy</span>
 </button>
 </div>
@@ -210,11 +210,11 @@ <h2 class="text-white text-xl lg:text-3xl font-bold tracking-tight">Generated Ou
 <div class="flex items-center gap-2">
 <span class="hidden xs:inline-block bg-white/5 text-amber-200 px-2.5 py-1 rounded-full text-[10px] lg:text-xs font-semibold border border-white/10 backdrop-blur-sm">Step 2 of 2</span>
 <div class="hidden xs:block h-6 w-px bg-white/10 mx-1"></div>
-<button class="size-8 lg:size-9 flex items-center justify-center hover:bg-white/10 rounded-lg text-neutral-500 hover:text-amber-400 transition-all duration-300 border border-transparent" id="copyBtn" title="Copy JSON">
-<span class="material-symbols-outlined text-lg lg:text-xl transition-all duration-300" id="copyIcon">content_copy</span>
+<button aria-label="Copy JSON" class="size-8 lg:size-9 flex items-center justify-center hover:bg-white/10 rounded-lg text-neutral-500 hover:text-amber-400 transition-all duration-300 border border-transparent" id="copyBtn" title="Copy JSON">
+<span aria-hidden="true" class="material-symbols-outlined text-lg lg:text-xl transition-all duration-300" id="copyIcon">content_copy</span>
 </button>
-<button class="size-8 lg:size-9 flex items-center justify-center hover:bg-white/10 rounded-lg text-neutral-500 hover:text-amber-400 transition-colors" id="downloadBtn" title="Download JSON">
-<span class="material-symbols-outlined text-lg lg:text-xl">download</span>
+<button aria-label="Download JSON" class="size-8 lg:size-9 flex items-center justify-center hover:bg-white/10 rounded-lg text-neutral-500 hover:text-amber-400 transition-colors" id="downloadBtn" title="Download JSON">
+<span aria-hidden="true" class="material-symbols-outlined text-lg lg:text-xl">download</span>
 </button>
 </div>
 </div>
diff --git a/glassui.html b/glassui.html
index 700dc49..18f82d3 100644
--- a/glassui.html
+++ b/glassui.html
@@ -147,9 +147,9 @@ <h2 class="text-white text-base lg:text-xl font-bold leading-tight tracking-tigh
 </div>
 </div>
 </div>
-<button class="group relative flex-none flex cursor-pointer items-center justify-center overflow-hidden rounded-full h-9 lg:h-10 px-4 lg:px-6 bg-gradient-to-r from-amber-600 to-amber-800 hover:from-amber-500 hover:to-amber-700 border border-white/10 shadow-[0_0_15px_rgba(245,158,11,0.3)] transition-all" id="deployBtn">
+<button aria-label="Deploy" class="group relative flex-none flex cursor-pointer items-center justify-center overflow-hidden rounded-full h-9 lg:h-10 px-4 lg:px-6 bg-gradient-to-r from-amber-600 to-amber-800 hover:from-amber-500 hover:to-amber-700 border border-white/10 shadow-[0_0_15px_rgba(245,158,11,0.3)] transition-all" id="deployBtn">
 <div class="absolute inset-0 bg-white/10 opacity-0 group-hover:opacity-100 transition-opacity"></div>
-<span class="material-symbols-outlined lg:mr-2 text-lg relative z-10">rocket_launch</span>
+<span aria-hidden="true" class="material-symbols-outlined lg:mr-2 text-lg relative z-10">rocket_launch</span>
 <span class="hidden lg:inline truncate text-sm font-bold tracking-wide relative z-10">Deploy</span>
 </button>
 </div>
@@ -206,11 +206,11 @@ <h2 class="text-white text-xl lg:text-3xl font-bold tracking-tight">Generated Ou
 <div class="flex items-center gap-2">
 <span class="hidden xs:inline-block bg-white/5 text-amber-200 px-2.5 py-1 rounded-full text-[10px] lg:text-xs font-semibold border border-white/10 backdrop-blur-sm">Step 2 of 2</span>
 <div class="hidden xs:block h-6 w-px bg-white/10 mx-1"></div>
-<button class="size-8 lg:size-9 flex items-center justify-center hover:bg-white/10 rounded-lg text-neutral-500 hover:text-amber-400 transition-all duration-300 border border-transparent" id="copyBtn" title="Copy JSON">
-<span class="material-symbols-outlined text-lg lg:text-xl transition-all duration-300" id="copyIcon">content_copy</span>
+<button aria-label="Copy JSON" class="size-8 lg:size-9 flex items-center justify-center hover:bg-white/10 rounded-lg text-neutral-500 hover:text-amber-400 transition-all duration-300 border border-transparent" id="copyBtn" title="Copy JSON">
+<span aria-hidden="true" class="material-symbols-outlined text-lg lg:text-xl transition-all duration-300" id="copyIcon">content_copy</span>
 </button>
-<button class="size-8 lg:size-9 flex items-center justify-center hover:bg-white/10 rounded-lg text-neutral-500 hover:text-amber-400 transition-colors" id="downloadBtn" title="Download JSON">
-<span class="material-symbols-outlined text-lg lg:text-xl">download</span>
+<button aria-label="Download JSON" class="size-8 lg:size-9 flex items-center justify-center hover:bg-white/10 rounded-lg text-neutral-500 hover:text-amber-400 transition-colors" id="downloadBtn" title="Download JSON">
+<span aria-hidden="true" class="material-symbols-outlined text-lg lg:text-xl">download</span>
 </button>
 </div>
 </div>