CodeForPhilly / CodeForPhilly/codeforphilly-ng

Form error ids should derive from useId (hardcoded title-error/slug-error collide across screen + modal)

Open
#164 0 comments 0 reactions 0 assignees View on GitHub
Dominant language
TypeScript
Stars
1
Forks
1
Avg merge
5d 3h
Merged PRs (30d)
9

Description

Follow-up from PR #155 (ARIA correctness).

The form error wiring in that PR gives every error `

` an id and points the control at it with `aria-describedby`. Several of those ids are hardcoded string literals — `title-error`, `slug-error`, and siblings in ProjectEdit, ProjectBuzzNew, TagEditModal, etc. When a screen and a modal that both use one of those ids are mounted at the same time (e.g. ProjectEdit with PostHelpWantedModal open), the ids collide and `aria-describedby` can resolve to the wrong element.

Derive the ids from `useId()` (as SearchBox and TagPicker already do) so each mounted form instance owns unique ids. Consider a tiny helper so the `${id}-error` convention stays in one place.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

https://claude.ai/code/session_01RdRwHvDupRLV8GuJpYKzEr

Contributor guide

No contributing guide indexed for this repository

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.