m/paliad
1
0
Fork 0
Code Issues 152 Pull Requests 4 Actions Packages Projects Releases Wiki Activity

A11y: <label for=...> attributes don't match form-field ids on the timeline view (and likely others) #60

New Issue
Open
opened 2026-05-20 12:13:40 +00:00 by mAi · 1 comment
mAi commented 2026-05-20 12:13:40 +00:00
Collaborator
Copy Link

Trigger

m 2026-05-20 14:13:

The label's for attribute doesn't match any element id. This might prevent the browser from correctly autofilling the form and accessibility tools from working correctly.

To fix this issue, make sure the label's for attribute references the correct id of a form field.

1 resource. Violating node. Learn more: The label elements.

I get this issue / error, too — on a normal timeline.

Browser dev-tools (Chrome 'Issues' tab) flagging an a11y violation: a <label for="X"> references an element id that doesn't exist in the DOM. Triggered on a timeline surface — could be the verfahrensablauf timeline, the deadlines timeline, the project Verlauf timeline, or appointment timeline.

What to do

  • Audit all <label htmlFor="..."> / <label for="..."> in frontend/src/ paired with their target ids. Mismatch sources:
    • Stale id after a refactor / rename
    • Dynamic ids (e.g. UUID-suffixed) where the label captures the static prefix
    • Multi-instance forms (modals stacked) producing duplicate ids the label can't disambiguate
  • Fix the offending cases. Either correct the id, or scope per-instance (UUID-suffix the id + thread the same suffix into the label's for).
  • Run a smoke pass on Chrome's Issues tab + Lighthouse a11y audit on the affected pages.

Out of scope

  • Full a11y audit beyond the label-for issue (deferred to a broader sweep).
  • Adding new ARIA attributes beyond fixing the violation.

Role

coder direct — audit + targeted fixes. Group with other UI items.

## Trigger m 2026-05-20 14:13: > The label's for attribute doesn't match any element id. This might prevent the browser from correctly autofilling the form and accessibility tools from working correctly. > > To fix this issue, make sure the label's for attribute references the correct id of a form field. > > 1 resource. Violating node. Learn more: The label elements. > > I get this issue / error, too — on a normal timeline. Browser dev-tools (Chrome 'Issues' tab) flagging an a11y violation: a `<label for="X">` references an element id that doesn't exist in the DOM. Triggered on a timeline surface — could be the verfahrensablauf timeline, the deadlines timeline, the project Verlauf timeline, or appointment timeline. ## What to do - Audit all `<label htmlFor="...">` / `<label for="...">` in `frontend/src/` paired with their target ids. Mismatch sources: - Stale id after a refactor / rename - Dynamic ids (e.g. UUID-suffixed) where the label captures the static prefix - Multi-instance forms (modals stacked) producing duplicate ids the label can't disambiguate - Fix the offending cases. Either correct the id, or scope per-instance (UUID-suffix the id + thread the same suffix into the label's `for`). - Run a smoke pass on Chrome's Issues tab + Lighthouse a11y audit on the affected pages. ## Out of scope - Full a11y audit beyond the label-for issue (deferred to a broader sweep). - Adding new ARIA attributes beyond fixing the violation. ## Role **coder direct** — audit + targeted fixes. Group with other UI items.
mAi self-assigned this 2026-05-20 12:13:40 +00:00
mAi commented 2026-05-20 12:44:38 +00:00
Author
Collaborator
Copy Link

Shipped via euler's batch on mai/euler/coder-small-ux-polish, merged into main at https://mgit.msbls.de/m/paliad/commit/a5ae214. Live after next Dokploy deploy.

Shipped via euler's batch on `mai/euler/coder-small-ux-polish`, merged into main at https://mgit.msbls.de/m/paliad/commit/a5ae214. Live after next Dokploy deploy.
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
Labels
Clear labels
deferred
Parked — not pursuing now, may un-park later
done
Work completed by an agent; awaiting m to close
No Label
Milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
mAi m
No Assignees mAi
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: m/paliad#60
No description provided.
Delete Branch "%!s()"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?