From 24c75b645d11588e2eb0c99137c896208b758ec2 Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Thu, 11 Jun 2026 23:08:11 +0000
Subject: [PATCH] =?UTF-8?q?=E2=99=BF=20Aria:=20[UX=20improvement]=20Add=20?=
 =?UTF-8?q?ARIA=20attributes=20and=20focus=20ring=20to=20main=20canvas?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Adds `aria-label`, `role="img"`, `tabindex="0"`, and `aria-describedby` to `#glCanvas`
- Adds a visually hidden live region (`#world-status`) to announce map generation progress
- Binds world generation updates to `#world-status` in `main.ts`
- Adds pastel pink `:focus-visible` ring to `#glCanvas` for keyboard users

Co-authored-by: ford442 <9397845+ford442@users.noreply.github.com>
---
 index.html       |  3 ++-
 src/core/main.ts | 10 ++++++++++
 style.css        | 19 +++++++++++++++++++
 3 files changed, 31 insertions(+), 1 deletion(-)

diff --git a/index.html b/index.html
index ea78aff9..10d1f70d 100644
--- a/index.html
+++ b/index.html
@@ -887,7 +887,8 @@ <h2 id="playlist-title"><span aria-hidden="true">🎵</span> Jukebox</h2>
         </button>
     </div>
 
-    <canvas id="glCanvas" role="img" aria-label="Game World: Use mouse and keyboard to navigate"></canvas>
+    <canvas id="glCanvas" role="img" aria-label="Immersive pastel candy forest world with glowing mushrooms, floating clouds, and music-reactive elements" tabindex="0" aria-live="polite" aria-describedby="world-status"></canvas>
+    <div id="world-status" aria-live="polite" class="visually-hidden">Loading candy world...</div>
     <script type="module" src="src/main.ts"></script>
 </body>
 
diff --git a/src/core/main.ts b/src/core/main.ts
index b7b5a2f6..eb160e85 100644
--- a/src/core/main.ts
+++ b/src/core/main.ts
@@ -286,6 +286,7 @@ console.log(`[Startup] Camera positioned at ground height: y=${camera.position.y
 
 // --- START BUTTON + MAP GENERATION (unchanged UX) ---
 const startButton = document.getElementById('startButton') as HTMLButtonElement | null;
+const statusEl = document.getElementById('world-status');
 
 if (startButton) {
     startButton.disabled = false;
@@ -451,6 +452,11 @@ if (startButton) {
                 const baseLabel = label ?? getGenerationLabel(requestedMode);
                 const progressLabel = entityType ? `${baseLabel} · ${entityType}` : baseLabel;
                 loadingScreen.updateProgress(percent, progressLabel);
+
+                if (statusEl) {
+                    statusEl.textContent = progressLabel;
+                }
+
                 startButton.style.background = requestedMode === 'CORE'
                     ? `linear-gradient(90deg, #FF9ECD ${percent}%, #FFD4E3 ${percent}%)`
                     : `linear-gradient(90deg, #FF6B6B ${percent}%, #FFB6C1 ${percent}%)`;
@@ -478,6 +484,10 @@ if (startButton) {
             loadingScreen.completePhase('map-generation');
             loadingScreen.hide();
 
+            if (statusEl) {
+                statusEl.textContent = 'World generated. Welcome to Candy World.';
+            }
+
             // ♿ Aria: Announce that the game is fully loaded and exploration has started
             import('../ui/announcer.ts').then(({ announce }) => {
                 announce('World generated. Welcome to Candy World.', 'assertive');
diff --git a/style.css b/style.css
index 0ff8aa9d..188fb793 100644
--- a/style.css
+++ b/style.css
@@ -629,3 +629,22 @@ button.keyboard-active,
     transform: scale(0.95);
     transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
 }
+
+
+/* ♿ Aria: Canvas focus visible state */
+#glCanvas:focus-visible {
+    outline: 3px solid rgba(255, 182, 255, 0.8);
+    box-shadow: 0 0 20px rgba(180, 255, 200, 0.6);
+}
+
+
+.visually-hidden {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    border: 0;
+}