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 -->
<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 -->

7
frontend/src/theme.css
View file

@ -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);