From da8a5e2269d9e6e481122361d9231014a3eb49b8 Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
<161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Wed, 1 Jul 2026 13:29:03 +0000
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20Palette:=20Add=20explicit=20keyb?=
=?UTF-8?q?oard=20instructions=20and=20accessible=20score?=
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 | 4 ++++
.gitignore | 1 +
src/views/mario-game.njk | 21 ++++++++++++++++++---
3 files changed, 23 insertions(+), 3 deletions(-)
diff --git a/.Jules/palette.md b/.Jules/palette.md
index 8ee612f..5d2da31 100644
--- a/.Jules/palette.md
+++ b/.Jules/palette.md
@@ -12,3 +12,7 @@
## 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.
+
+## 2025-07-01 - Aria-live and Static Text
+**Learning:** Wrapping a container that includes static text (like a "Score: " label) alongside a dynamic value inside an `aria-live` region forces screen readers to redundantly announce the static text every time the dynamic value changes (e.g., "Score 1", "Score 2").
+**Action:** Extract the static text into a separate sibling element (like a label) outside of the `aria-live` region, ensuring only the dynamic value itself is announced.
diff --git a/.gitignore b/.gitignore
index 907591b..c66d69a 100644
--- a/.gitignore
+++ b/.gitignore
@@ -43,3 +43,4 @@
# Python
__pycache__/
*.pyc
+venv/
diff --git a/src/views/mario-game.njk b/src/views/mario-game.njk
index 67b6bd7..5bade23 100644
--- a/src/views/mario-game.njk
+++ b/src/views/mario-game.njk
@@ -44,7 +44,7 @@
background: #2ecc71;
}
- #score {
+ #score-container {
position: absolute;
top: 10px;
left: 10px;
@@ -52,15 +52,30 @@
font-size: 20px;
font-family: Arial;
}
+
+ #instructions {
+ position: absolute;
+ bottom: 60px;
+ width: 100%;
+ text-align: center;
+ color: white;
+ font-size: 16px;
+ font-family: Arial;
+ pointer-events: none;
+ text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
+ }