From b714bd30c976c11511e6836929bde7a0f88d51b8 Mon Sep 17 00:00:00 2001 From: "google-labs-jules[bot]" <161369871+google-labs-jules[bot]@users.noreply.github.com> Date: Sat, 2 May 2026 13:18:06 +0000 Subject: [PATCH] Add accessibility ARIA live attributes to score and visible keyboard hints to the Mario game UI. Removed invalid venv entry from requirements.txt to fix CI. Co-authored-by: EiJackGH <172181576+EiJackGH@users.noreply.github.com> --- .Jules/palette.md | 3 +++ requirements.txt | 1 - src/views/mario-game.njk | 17 ++++++++++++++++- 3 files changed, 19 insertions(+), 2 deletions(-) diff --git a/.Jules/palette.md b/.Jules/palette.md index 8ee612f..bd847c3 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-02 - Web Game UX Accessibility +**Learning:** For in-browser interactive elements like HTML5 games running in a standard document context, dynamic states (like scores) are visually obvious but entirely invisible to screen readers unless specifically marked. +**Action:** Always add `aria-live="polite"` and `aria-atomic="true"` to dynamic score/status elements in web-based mini-games to ensure accessibility isn't forgotten in "toy" components. Additionally, for components that hijack default keyboard behaviors (like Space to scroll), provide a visual, screen-reader-hidden `aria-hidden="true"` control hint if it's the primary mode of interaction. diff --git a/requirements.txt b/requirements.txt index cfaa995..4ad1501 100644 --- a/requirements.txt +++ b/requirements.txt @@ -1,4 +1,3 @@ numpy pandas requests -venv diff --git a/src/views/mario-game.njk b/src/views/mario-game.njk index 67b6bd7..dd68e7b 100644 --- a/src/views/mario-game.njk +++ b/src/views/mario-game.njk @@ -51,6 +51,20 @@ color: white; font-size: 20px; font-family: Arial; + z-index: 10; + } + + #controls-hint { + position: absolute; + top: 40px; + left: 10px; + color: rgba(255, 255, 255, 0.8); + font-size: 14px; + font-family: Arial; + z-index: 10; + background: rgba(0, 0, 0, 0.3); + padding: 4px 8px; + border-radius: 4px; } @@ -58,7 +72,8 @@
-
Score: 0
+
Score: 0
+