From ce8ffa066c09262e4ca094cdf4cac5ea8a8ee814 Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
<161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Fri, 17 Jul 2026 13:31:26 +0000
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20Palette:=20Add=20keyboard=20inst?=
=?UTF-8?q?ructions=20and=20accessible=20score=20to=20Mario=20Game?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
Co-authored-by: EiJackGH <172181576+EiJackGH@users.noreply.github.com>
---
.Jules/palette.md | 3 +++
src/views/mario-game.njk | 21 ++++++++++++++++++---
2 files changed, 21 insertions(+), 3 deletions(-)
diff --git a/.Jules/palette.md b/.Jules/palette.md
index 8ee612f..38cc104 100644
--- a/.Jules/palette.md
+++ b/.Jules/palette.md
@@ -12,3 +12,6 @@
## 2025-03-23 - Game Key Scrolling
**Learning:** Browsers natively scroll the page when users press Space or Arrow keys. When building a web-based game, this creates a frustrating UX where the game viewport jumps around while playing.
**Action:** Always call `e.preventDefault()` on keydown events for typical game controls ("Space", "ArrowUp", etc.) when the focus is on a game container or the body.
+## 2024-05-14 - Accessible Game Score and Controls
+**Learning:** For interactive web games, users often don't know keyboard controls if they aren't visible, and dynamic status updates like scores can be invisible to screen readers if not properly configured. Avoid placing static label text inside the `aria-live` region to prevent repetitive announcements.
+**Action:** Extract dynamic score values into an isolated `span` with `aria-live="polite"` and `aria-atomic="true"`. Add an overlay text hint for controls using `pointer-events: none` to prevent blocking mouse/touch interactions on the canvas beneath it.
diff --git a/src/views/mario-game.njk b/src/views/mario-game.njk
index 67b6bd7..115fc10 100644
--- a/src/views/mario-game.njk
+++ b/src/views/mario-game.njk
@@ -52,13 +52,28 @@
font-size: 20px;
font-family: Arial;
}
+
+ /* Game controls instructions */
+ #instructions {
+ position: absolute;
+ top: 10px;
+ right: 10px;
+ color: white;
+ font-size: 16px;
+ font-family: Arial;
+ pointer-events: none; /* Let clicks pass through */
+ background: rgba(0, 0, 0, 0.5);
+ padding: 5px 10px;
+ border-radius: 5px;
+ }