Accessibility: chip groups need role=group + aria-labelledby + aria-pressed

[bpevreall]

Status: known issue · pre-existing in v0.1 dashboard
Related: Stream A code review during v0.1 build

Context

WCAG 2.1 success criterion 1.3.1 (Info and Relationships) and 4.1.2 (Name, Role, Value) require interactive form controls to have programmatically associated labels.

The dashboard chip-group inputs use a <label> element without a for= attribute, which means screen readers can't announce the label when focus moves to the chip. This affects:

• Purpose tag chips on /dashboard/sessions/new
• Adverse-event chips on /dashboard/sessions/[id]
• Possibly other multi-select chip patterns

Fix

Wrap each chip group in a <fieldset> with a <legend>, OR use role=""group"" with aria-labelledby pointing at a heading. The latter is more compatible with the existing editorial visual style (legends are awkward to style consistently across browsers).

Approximate change:

\\svelte

<label class=""chip-label"">Purpose tags

{#each PURPOSE_TAGS as tag} {tag} {/each}

Purpose tags

{#each PURPOSE_TAGS as tag} {tag} {/each}

\\\

The aria-pressed on each chip-as-toggle is the second a11y win — it tells the screen reader the chip's state.

Acceptance

• All chip groups wrapped in role=""group"" with aria-labelledby
• Each toggle-chip has aria-pressed={state}
• Manual screen-reader test: VoiceOver / NVDA announces ""Purpose tags, group"" then each chip with its pressed state
• No visual regression