CodeForPhilly / CodeForPhilly/codeforphilly-ng

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

未关闭
#164 0 条评论 0 个 reaction 已指派 0 人 在 GitHub 查看
主要语言
TypeScript
星标
1
派生
1
平均合并
5 天 3 小时
30 天内合并 PR
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

贡献指南

这个仓库没有索引到贡献指南

调研方向

首先定位 ProjectEdit、ProjectBuzzNew、TagEditModal 及相关组件中的表单错误连接逻辑,然后比较 SearchBox 和 TagPicker 中现有的 useId 用法。集中管理每个错误 id,或从表单实例中以一致的方式派生它们,并验证同时挂载的表单具有唯一的 id 以及相匹配的 aria-describedby 引用。

由索引模型根据 Issue 内容生成。

评估

技术栈
typescript
领域
accessibility, frontend
Issue 类型
缺陷
难度
3/5
预计耗时
1-2 天
活跃度
活跃
描述清晰度
基本清楚
新手友好度
72/100

把新 issue 发到你的邮箱

精选适合新手参与的 GitHub issue 摘要。