Circuit-Forge/kiwi
3
0
Fork 0
Code Issues 35 Pull requests Projects Releases 1 Packages Wiki Activity Actions

fix(a11y): add aria-describedby and persistent hints for wildcard checkbox and tag inputs (closes #40)

Browse source
This commit is contained in:
pyr0ball 2026-04-08 22:27:28 -07:00
parent d7c0ae011a
commit 001e46ba9a
2 changed files with 15 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
frontend/src/components/RecipesView.vue
View file

@ -59,9 +59,9 @@
<!-- Surprise Me confirmation --> <!-- Surprise Me confirmation -->
<div v-if="recipesStore.level === 4" class="status-badge status-warning wildcard-warning"> <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"> <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> <span>I understand, go for it</span>
</label> </label>
</div> </div>
@ -82,10 +82,12 @@
<input <input
class="form-input" class="form-input"
v-model="constraintInput" 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" @keydown="onConstraintKey"
@blur="commitConstraintInput" @blur="commitConstraintInput"
/> />
<span id="constraint-hint" class="form-hint">Press Enter or comma to add each item.</span>
</div> </div>
<!-- Allergies Tags --> <!-- Allergies Tags -->
@ -104,10 +106,12 @@
<input <input
class="form-input" class="form-input"
v-model="allergyInput" 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" @keydown="onAllergyKey"
@blur="commitAllergyInput" @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> </div>
<!-- Hard Day Mode --> <!-- Hard Day Mode -->

7
frontend/src/theme.css
View file

@ -407,6 +407,13 @@
font-family: var(--font-body); 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 { .form-row {
display: grid; display: grid;
gap: var(--spacing-md); gap: var(--spacing-md);