From 49e46b99e69a915c3c7381ec0e34062637c19221 Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Sat, 30 May 2026 04:58:40 +0000
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20Palette:=20Add=20ARIA=20labels?=
 =?UTF-8?q?=20to=20icon-only=20buttons=20for=20accessibility?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Added explicit `aria-label` to buttons and links in `dashboard.html` and `glassui.html` where text is hidden on mobile breakpoints.
- Added `aria-hidden="true"` to Material Symbols to prevent screen readers from announcing ligatures.
- Documented findings in `.jules/palette.md` to prevent future regressions.

Co-authored-by: Bhishaj9 <144550237+Bhishaj9@users.noreply.github.com>
---
 .jules/palette.md |  3 +++
 dashboard.html    | 16 ++++++++--------
 glassui.html      | 12 ++++++------
 start_server.sh   |  2 ++
 verify_ui.py      | 11 +++++++++++
 5 files changed, 30 insertions(+), 14 deletions(-)
 create mode 100644 .jules/palette.md
 create mode 100755 start_server.sh
 create mode 100644 verify_ui.py

diff --git a/.jules/palette.md b/.jules/palette.md
new file mode 100644
index 0000000..c7d617a
--- /dev/null
+++ b/.jules/palette.md
@@ -0,0 +1,3 @@
+## 2026-05-30 - Responsive Icon-Only Button Accessibility
+**Learning:** When using responsive Tailwind classes (e.g., `hidden lg:inline`) to hide text on mobile, buttons that contain text on desktop can become icon-only on smaller screens. This causes them to lose their accessible name for screen readers on mobile devices if they lack an explicit `aria-label`.
+**Action:** Ensure the parent interactive element (`<button>` or `<a>`) has an explicit `aria-label` attribute, and apply `aria-hidden="true"` to the structural icon element (`<span class="material-symbols-outlined">`) to prevent screen readers from reading raw ligatures.
diff --git a/dashboard.html b/dashboard.html
index a73dccc..e8b2089 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 class="material-symbols-outlined text-lg lg:mr-2" aria-hidden="true">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 class="material-symbols-outlined lg:mr-2 text-lg relative z-10" aria-hidden="true">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 class="material-symbols-outlined text-lg lg:text-xl transition-all duration-300" aria-hidden="true" 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 class="material-symbols-outlined text-lg lg:text-xl" aria-hidden="true">download</span>
 </button>
 </div>
 </div>
diff --git a/glassui.html b/glassui.html
index 700dc49..31de6e9 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 class="material-symbols-outlined lg:mr-2 text-lg relative z-10" aria-hidden="true">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 class="material-symbols-outlined text-lg lg:text-xl transition-all duration-300" aria-hidden="true" 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 class="material-symbols-outlined text-lg lg:text-xl" aria-hidden="true">download</span>
 </button>
 </div>
 </div>
diff --git a/start_server.sh b/start_server.sh
new file mode 100755
index 0000000..d8511b4
--- /dev/null
+++ b/start_server.sh
@@ -0,0 +1,2 @@
+#!/bin/bash
+python main.py &
diff --git a/verify_ui.py b/verify_ui.py
new file mode 100644
index 0000000..b34eba8
--- /dev/null
+++ b/verify_ui.py
@@ -0,0 +1,11 @@
+from playwright.sync_api import sync_playwright
+import os
+os.makedirs('/home/jules/verification', exist_ok=True)
+with sync_playwright() as p:
+    browser = p.chromium.launch()
+    page = browser.new_page()
+    page.goto('file:///app/dashboard.html')
+    page.screenshot(path='/home/jules/verification/dashboard.png', full_page=True)
+    page.goto('file:///app/glassui.html')
+    page.screenshot(path='/home/jules/verification/glassui.png', full_page=True)
+    browser.close()