From 429a4dfe15de867fed714055ff3e065f631c7738 Mon Sep 17 00:00:00 2001 From: "google-labs-jules[bot]" <161369871+google-labs-jules[bot]@users.noreply.github.com> Date: Fri, 10 Jul 2026 13:42:40 +0000 Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20Palette:=20Add=20explicit=20game?= =?UTF-8?q?=20controls=20and=20aria-live=20score?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 💡 What: Added an instructional text div to the Mario game view explaining the controls ("Press Space or Up Arrow to jump") and added `aria-live="polite"` and `aria-atomic="true"` to the dynamic score div. 🎯 Why: Custom keyboard event bindings for games require explicit instructions so users know how to play. Adding `aria-live` to the score ensures screen reader users receive dynamic updates. Keeping the static instructional text out of the `aria-live` region prevents screen readers from needlessly repeating the instructions every time the score updates. ♿ Accessibility: Improved screen reader accessibility for the score counter and clarified controls. 📸 Before/After: See PR media. Co-authored-by: EiJackGH <172181576+EiJackGH@users.noreply.github.com> --- .Jules/palette.md | 4 ++++ src/views/mario-game.njk | 15 ++++++++++++++- 2 files changed, 18 insertions(+), 1 deletion(-) diff --git a/.Jules/palette.md b/.Jules/palette.md index 8ee612f..ad1c828 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-10 - Explicit Game Controls and aria-live Separation +**Learning:** When building interactive HTML5 widgets or games with custom keyboard event bindings, users need explicit, visible instructional text so they know the required inputs. Furthermore, it's critical to keep static instructions outside of `aria-live` regions, otherwise screen readers will unnecessarily repeat the static text every time the dynamic content updates. +**Action:** Always provide explicit instructional text for custom controls. Extract static text into a separate sibling element away from any `aria-live` regions tracking dynamic updates like scores. diff --git a/src/views/mario-game.njk b/src/views/mario-game.njk index 67b6bd7..686c803 100644 --- a/src/views/mario-game.njk +++ b/src/views/mario-game.njk @@ -52,13 +52,26 @@ font-size: 20px; font-family: Arial; } + + #instructions { + position: absolute; + top: 40px; + left: 10px; + color: white; + font-size: 16px; + font-family: Arial; + background: rgba(0, 0, 0, 0.5); + padding: 5px 10px; + border-radius: 5px; + }
-
Score: 0
+
Score: 0
+
Press Space or Up Arrow to jump