Merge pull request #14 from goude/claude/backlog-items-EHhe1

Add sr-only utility class and improve accessibility

Author: goude

justfile

@@ -64,10 +64,10 @@ clean:
 reset: clean
     rm -rf node_modules/
 
-# Repomix
+# 📦 Bundle repo snapshot for LLM context (excludes secrets and large files)
 repomix:
     repomix --ignore "coverage/,node_modules/,public/fonts,src/pages/egghunt.astro"
 
-# Synchronize SVG Colors
+# 🎨 Synchronize SVG fill colors to match the active theme palette (default: light)
 svg-sync THEME="light":
     node scripts/sync-svg-swatches.mjs --verbose {{THEME}}

src/pages/egghunt.astro

@@ -7,11 +7,11 @@ import Layout from "@/layouts/Layout.astro";
     <h1>🥚 egghunt</h1>
 
     <div class="puzzle-input">
+      <label for="answer" class="sr-only">Puzzle answer</label>
       <input
         type="text"
         id="answer"
         placeholder="Enter answer..."
-        aria-label="Puzzle answer"
         autocomplete="off"
       />
       <button id="submit">Submit</button>

src/styles/base.css

@@ -136,3 +136,15 @@ mark {
 .text-muted {
   color: var(--text-muted);
 }
+
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0;
+}