agama-project / agama / 28454854079

83%

push

github

fix(web): resolve duplicate Mode labels in system page a11y tree (#3684)

## Summary

- Fix duplicate "Mode" accessible names in SystemPage
- Use `aria-labelledby` to create composite accessible names without
adding translations
- Result: "Mode" labels now have unique accessible names ("Hostname
Mode" and "Time Synchronization Servers Mode")

## Context

@jknphy reported that Puppeteer automated tests were finding two
elements when trying to select the "Mode" dropdown in SystemPage. The
issue was that both the Hostname and NTP sections had dropdowns with the
same accessible name "Mode", making them indistinguishable to:

- Screen reader navigation by form controls
- Voice control users ("click Mode" → ambiguous)
- Automated testing tools (Puppeteer)

Changing visible labels is not an option since they could sound
redundant with the fieldset legend. Moreover, at this moment Agama is
currently in string freeze phase.

## Solution

The fix leverages `aria-labelledby` to create composite accessible names
by combining parent context (fieldset legends) with field labels:

**Changes to components:**

1. **Fieldset**: Added optional `legendId` prop
   - Allows fieldset legends to be referenced by descendant elements
   - When provided, adds `id` attribute to the `<legend>` element

2. **DropdownField**: Added optional `additionalLabelId` prop
   - Wraps label in `<span id="{fieldName}-label">` for referenceability
- When `additionalLabelId` is provided, combines it with the label ID:
`aria-labelledby="{additionalLabelId} {fieldName}-label"`
   - When not provided, works as before (no aria-labelledby)

3. **HostnameFields & NtpFields**: Wire up the legend and label IDs
   - Set `legendId` on Fieldset
   - Pass same ID as `additionalLabelId` to DropdownField

**Result:**
- Visible labels: "Mode" (unchanged - no new translations needed)
- Accessible names:
  - Hostname dropdown: "Hostname Mode"
  - NTP dropdown: "Time Synchronization Servers Mode"
- Both dropdow... (continued)

4879 of 6799 branches covered (71.76%)

Branch coverage included in aggregate %.

3 of 3 new or added lines in 2 files covered. (100.0%)

25425 of 29674 relevant lines covered (85.68%)

124.12 hits per line