CodeForPhilly / CodeForPhilly/codeforphilly-ng

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

オープン
#164 コメント 0 件 リアクション 0 件 担当者 0 名 GitHub で見る
主要言語
TypeScript
スター
1
フォーク
1
平均マージ
5日 3時間
マージ済み PR(30日)
9

説明

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

コントリビューションガイド

このリポジトリのコントリビューションガイドは索引されていません

調査の方向性

Start by locating the form error wiring in ProjectEdit, ProjectBuzzNew, TagEditModal, and related components, then compare the existing useId usage in SearchBox and TagPicker. Centralize or consistently derive each error id from the form instance, and verify that simultaneously mounted forms have unique ids and matching aria-describedby references.

索引モデルが issue の本文から書いたものです。

評価

技術スタック
typescript
領域
accessibility, frontend
issue の種類
バグ
難易度
3/5
見積もり時間
1〜2日
活発さ
活発
明瞭さ
おおむね明確
初心者へのやさしさ
72/100

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。