Skip to content

🎨 Palette: Semantic Keyboard Shortcuts - #279

Open
EiJackGH wants to merge 1 commit into
mainfrom
palette-semantic-kbd-8714611961810808631
Open

🎨 Palette: Semantic Keyboard Shortcuts#279
EiJackGH wants to merge 1 commit into
mainfrom
palette-semantic-kbd-8714611961810808631

Conversation

@EiJackGH

Copy link
Copy Markdown
Owner

💡 What: Added semantic <kbd> tags around the keyboard shortcuts ("Space" and "↑") in the instruction overlay and provided physical key styling (borders, drop shadows, and high-contrast text) via the internal <style> block.

🎯 Why: Improves the micro-UX of the game by making the interactive controls immediately obvious and discoverable. Highlighting keyboard shortcuts to look like physical keys makes the interface far more intuitive for new users jumping into the game.

📸 Before/After:
Before: Plain text instruction "Press Space or ↑ to jump!" hovering on the screen.
After: The words "Space" and "↑" look like physical keyboard buttons (gray background, shadow, monospace font), standing out clearly from the rest of the text.

Accessibility: Increased semantic meaning by utilizing native <kbd> tags. It signals to screen readers and browsers that these are explicitly keyboard inputs.

Rationale for Custom CSS: The mario-game.njk file does not utilize a utility CSS framework like Tailwind, and styling is strictly managed via a plain internal <style> block. Adding the kbd CSS rule directly into this block matches the existing architectural pattern of the file.


PR created automatically by Jules for task 8714611961810808631 started by @EiJackGH

Wrapped the key bindings (Space and ↑) in the game instructions using semantic <kbd> tags and added physical key styling using box-shadows, text-shadows, and monospace fonts to improve discoverability and intuitive UX. Also recorded UX learnings to the palette journal.

Co-authored-by: EiJackGH <172181576+EiJackGH@users.noreply.github.com>
@google-labs-jules

Copy link
Copy Markdown
Contributor

👋 Jules, reporting for duty! I'm here to lend a hand with this pull request.

When you start a review, I'll add a 👀 emoji to each comment to let you know I've read it. I'll focus on feedback directed at me and will do my best to stay out of conversations between you and other bots or reviewers to keep the noise down.

I'll push a commit with your requested changes shortly after. Please note there might be a delay between these steps, but rest assured I'm on the job!

For more direct control, you can switch me to Reactive Mode. When this mode is on, I will only act on comments where you specifically mention me with @jules. You can find this option in the Pull Request section of your global Jules UI settings. You can always switch back!

New to Jules? Learn more at jules.google/docs.


For security, I will only act on instructions from the user who triggered this task.

@EiJackGH
EiJackGH deployed to production August 24, 2026 13:44 — with GitHub Actions Active
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant