From 35037a7ed863266c9cab57c1d52bff8fbbb09dc3 Mon Sep 17 00:00:00 2001 From: "google-labs-jules[bot]" <161369871+google-labs-jules[bot]@users.noreply.github.com> Date: Fri, 22 May 2026 13:30:37 +0000 Subject: [PATCH 1/2] Add explicit visual instructions for custom game keybindings and screen reader support for the score. Co-authored-by: EiJackGH <172181576+EiJackGH@users.noreply.github.com> --- .Jules/palette.md | 3 +++ src/views/mario-game.njk | 15 ++++++++++++++- 2 files changed, 17 insertions(+), 1 deletion(-) diff --git a/.Jules/palette.md b/.Jules/palette.md index 8ee612f..fb881dd 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. +## 2026-05-22 - Custom Game Keybindings +**Learning:** Interactive HTML5 widgets or games with custom keyboard event bindings often completely hide their required inputs from users because native focus hints and ARIA roles don't describe custom mechanics (like 'Space to Jump'). Without explicit visual text, these components become 'mystery meat' navigation. +**Action:** Always provide explicit, visible instructional text (and corresponding screen-reader attributes) alongside the widget to clarify custom control schemes. diff --git a/src/views/mario-game.njk b/src/views/mario-game.njk index 67b6bd7..e28828b 100644 --- a/src/views/mario-game.njk +++ b/src/views/mario-game.njk @@ -52,13 +52,26 @@ font-size: 20px; font-family: Arial; } + + #controls-hint { + position: absolute; + top: 10px; + right: 10px; + color: white; + font-size: 16px; + font-family: Arial; + background: rgba(0, 0, 0, 0.5); + padding: 5px 10px; + border-radius: 5px; + }