Accessibility Improvement: Programmatic Label/Input Association (A11Y-19)
Accessibility Improvement: Programmatic Label/Input Association (A11Y-19)
Release: v1.0.444
Category: Accessibility — Forms & Inputs
Control: A11Y-19
Overview
Several forms in the application used <label> elements that were visually positioned next to their inputs but lacked a programmatic association between the label and the input. This meant screen readers and other assistive technologies could not reliably announce the correct label when a user focused an input field.
This release adds the required id and htmlFor attribute pairings across all affected components.
Why This Matters
Programmatic label association is a foundational accessibility requirement (WCAG 2.1 Success Criterion 1.3.1 – Info and Relationships and SC 4.1.2 – Name, Role, Value). Without it:
- Screen readers (e.g. NVDA, JAWS, VoiceOver) cannot announce the field's purpose when it receives focus.
- The input's accessible name falls back to placeholder text only, which is insufficient and may not persist once a user starts typing.
- Users who rely on voice control software (e.g. Dragon NaturallySpeaking) may be unable to target fields by their visible label name.
Affected Components
| Component | Affected Fields |
|---|---|
ProfileForm | Name, Email |
OrgSettingsForm | Portfolio Name, Slug |
FilterDrawer | All select and input fields |
MfaVerifyModal | Backup code, TOTP (authenticator code) |
What Changed
Each affected label/input pair now has a unique id on the input and a matching htmlFor on the label. This is a purely additive change — no visual styling, layout, or behaviour is altered.
Example: ProfileForm — Name Field
// Before
<label className='text-sm font-medium text-muted-foreground'>Name</label>
<input type='text' ... />
// After
<label htmlFor='profile-name' className='text-sm font-medium text-muted-foreground'>Name</label>
<input id='profile-name' type='text' ... />
Example: MfaVerifyModal — TOTP Field
// Before
<label className='text-sm font-medium'>Authenticator code</label>
<input type='text' ... />
// After
<label htmlFor='mfa-totp' className='text-sm font-medium'>Authenticator code</label>
<input id='mfa-totp' type='text' ... />
The same pattern has been applied consistently to all label/input pairs in FilterDrawer and OrgSettingsForm.
Impact
- Screen reader users will now hear the correct field label announced when navigating forms by tab or using browse/virtual mode.
- Voice control users can target fields using their visible label names.
- No visual or functional change — existing users will not notice any difference in the UI.
- No breaking change — this is a purely additive HTML attribute addition.
Developer Notes
When adding new form fields, always pair a <label htmlFor='...' /> with a matching <input id='...' />. Placeholder text must not be used as a substitute for a visible, programmatically associated label.
// Correct pattern for all new form fields
<label htmlFor='field-id'>Field Label</label>
<input id='field-id' type='text' placeholder='Optional hint text' />