From 001e46ba9ac099c4bb2a5e567b84a3dd56aee914 Mon Sep 17 00:00:00 2001
From: pyr0ball <pyroballpcs@gmail.com>
Date: Wed, 8 Apr 2026 22:27:28 -0700
Subject: [PATCH] fix(a11y): add aria-describedby and persistent hints for
 wildcard checkbox and tag inputs (closes #40)

---
 frontend/src/components/RecipesView.vue | 12 ++++++++----
 frontend/src/theme.css                  |  7 +++++++
 2 files changed, 15 insertions(+), 4 deletions(-)

diff --git a/frontend/src/components/RecipesView.vue b/frontend/src/components/RecipesView.vue
index 2b2fce4..b6bc2fb 100644
--- a/frontend/src/components/RecipesView.vue
+++ b/frontend/src/components/RecipesView.vue
@@ -59,9 +59,9 @@
 
       <!-- Surprise Me confirmation -->
       <div v-if="recipesStore.level === 4" class="status-badge status-warning wildcard-warning">
-        The AI will freestyle recipes from whatever you have. Results can be unusual — that's part of the fun.
+        <span id="wildcard-warning-desc">The AI will freestyle recipes from whatever you have. Results can be unusual — that's part of the fun.</span>
         <label class="flex-start gap-sm mt-xs">
-          <input type="checkbox" v-model="recipesStore.wildcardConfirmed" />
+          <input type="checkbox" v-model="recipesStore.wildcardConfirmed" aria-describedby="wildcard-warning-desc" />
           <span>I understand, go for it</span>
         </label>
       </div>
@@ -82,10 +82,12 @@
         <input
           class="form-input"
           v-model="constraintInput"
-          placeholder="e.g. vegetarian, vegan, gluten-free — press Enter or comma"
+          placeholder="e.g. vegetarian, vegan, gluten-free"
+          aria-describedby="constraint-hint"
           @keydown="onConstraintKey"
           @blur="commitConstraintInput"
         />
+        <span id="constraint-hint" class="form-hint">Press Enter or comma to add each item.</span>
       </div>
 
       <!-- Allergies Tags -->
@@ -104,10 +106,12 @@
         <input
           class="form-input"
           v-model="allergyInput"
-          placeholder="e.g. peanuts, shellfish, dairy — press Enter or comma"
+          placeholder="e.g. peanuts, shellfish, dairy"
+          aria-describedby="allergy-hint"
           @keydown="onAllergyKey"
           @blur="commitAllergyInput"
         />
+        <span id="allergy-hint" class="form-hint">Press Enter or comma to add. Allergies are hard exclusions — no recipes containing these will appear.</span>
       </div>
 
       <!-- Hard Day Mode -->
diff --git a/frontend/src/theme.css b/frontend/src/theme.css
index 6f99449..63de6ed 100644
--- a/frontend/src/theme.css
+++ b/frontend/src/theme.css
@@ -407,6 +407,13 @@
   font-family: var(--font-body);
 }
 
+.form-hint {
+  display: block;
+  margin-top: var(--spacing-xs);
+  font-size: var(--font-size-sm);
+  color: var(--color-text-secondary);
+}
+
 .form-row {
   display: grid;
   gap: var(--spacing-md);