🎨 Palette: Semantic Keyboard Shortcuts - #279
Conversation
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>
|
👋 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 New to Jules? Learn more at jules.google/docs. For security, I will only act on instructions from the user who triggered this task. |
💡 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.njkfile does not utilize a utility CSS framework like Tailwind, and styling is strictly managed via a plain internal<style>block. Adding thekbdCSS rule directly into this block matches the existing architectural pattern of the file.PR created automatically by Jules for task 8714611961810808631 started by @EiJackGH