a11y: tab bar missing full ARIA semantics (WCAG 4.1.2) #32

Closed
opened 2026-04-08 06:43:13 -07:00 by pyr0ball · 0 comments
Owner

The Find/Browse/Saved tab bar had no ARIA role — screen readers saw three disconnected buttons.

Fixed in RecipesView.vue:

  • role="tablist" + aria-label="Recipe sections" on wrapper
  • role="tab" + :aria-selected + dynamic tabindex on each button
  • role="tabpanel" + aria-labelledby on each panel area
  • Arrow key navigation via onTabKeydown

Refs: CRIT-W3

The Find/Browse/Saved tab bar had no ARIA role — screen readers saw three disconnected buttons. **Fixed in `RecipesView.vue`:** - `role="tablist"` + `aria-label="Recipe sections"` on wrapper - `role="tab"` + `:aria-selected` + dynamic `tabindex` on each button - `role="tabpanel"` + `aria-labelledby` on each panel area - Arrow key navigation via `onTabKeydown` **Refs:** CRIT-W3
pyr0ball added this to the Beta — Recipe Suggestions milestone 2026-04-08 06:43:13 -07:00
pyr0ball added the
bug
accessibility
labels 2026-04-08 06:43:13 -07:00
Sign in to join this conversation.
No project
No assignees
1 participant
Notifications
Due date
The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference: Circuit-Forge/kiwi#32
No description provided.