Extract a shared combobox hook for SearchBox and TagPicker
维护者通常 1 天内回复
还没有人认领这个 Issue。
评估
- 难度
- 4/5
- 预计耗时
- 3-5 天
- 新手友好度
- 52/100
- Issue 类型
- 重构
- 描述清晰度
- 基本清楚
- 活跃度
- 活跃
- 技术栈
- react, typescript
- 领域
- accessibility, frontend, testing
调研方向
首先定位 SearchBox 和 TagPicker，然后比较它们现有的 combobox 状态、ARIA ID、键盘处理器以及失去焦点时的行为。使用 SearchBox.test.tsx 和 TagPicker.test.tsx 作为行为契约；当共享 hook 或采用的 Command 方案将该契约集中化，且不改变任一组件的渲染和激活行为，并且两套测试都通过时，即视为完成。
由索引模型根据 Issue 内容生成。
描述
Follow-up from PR #155 (ARIA correctness).
SearchBox and TagPicker now both implement the ARIA APG combobox-with-listbox pattern by hand: open / activeIndex state, clamped activeIdx, useId()-derived listbox/option ids, aria-activedescendant, wrapping ArrowUp/ArrowDown, Enter/Escape, guarded onMouseMove highlight, and close-on-focus-out. The two copies have already drifted in small ways (SearchBox swallows mousedown on the popup and closes on input blur; TagPicker uses a container onBlur + relatedTarget check with tabIndex={-1} options).
Extract a useCombobox hook (or adopt shadcn's Command) so the keyboard/ARIA contract lives in one place and the two widgets only differ in how they render options and what activation does. Keep the existing SearchBox.test.tsx / TagPicker.test.tsx as the behavioural contract.
🤖 Generated with Claude Code
- 主要语言
- TypeScript
- 星标
- 1
- 派生
- 1
- 平均合并
- 8 分钟
- 30 天内合并 PR
- 16
环境准备
- 提供 Dockerfile 或 Docker Compose 文件
- 没有 Pull Request 模板
- 没有贡献指南
从这里开始
- 先读完整个 Issue，再读项目的贡献指南。
- 在 Issue 下留言说明你要接手 —— 这能避免两个人做同样的事。
- Fork 仓库，在一个分支上完成修改。
- 提交 Pull Request，并在描述里引用这个 Issue 编号。
CodeForPhilly/codeforphilly-ng 的其他 Issue
-
难度 2/5 1-3 小时 新手友好度 84/100
CodeForPhilly/codeforphilly-ng#178 ·
维护者通常 1 天内回复
-
MarkdownEditor toolbar: use Radix Toolbar from radix-ui instead of the hand-rolled roving tabindex未关闭enhancement
难度 2/5 1-3 小时 新手友好度 82/100
CodeForPhilly/codeforphilly-ng#169 ·
维护者通常 1 天内回复
-
难度 2/5 1-3 小时 新手友好度 76/100
CodeForPhilly/codeforphilly-ng#89 ·
维护者通常 1 天内回复
-
难度 2/5 1-3 小时 新手友好度 88/100
CodeForPhilly/codeforphilly-ng#87 ·
维护者通常 1 天内回复
-
难度 2/5 1-3 小时 新手友好度 74/100
CodeForPhilly/codeforphilly-ng#50 ·
维护者通常 1 天内回复
查看 CodeForPhilly/codeforphilly-ng 的全部 Issue
相似的 Issue
-
难度 1/5 1 小时以内 新手友好度 83/100
维护者通常 1 天内回复
-
Feil lovtekst i bekreftelsen når leder melder unntak fra oppfølgingsplan可能已有人在做 @AudunSorheim 今天认领。 未关闭
难度 1/5 1 小时以内 新手友好度 92/100
navikt/syfo-oppfolgingsplan-frontend#1110 ·
维护者通常 1 天内回复
-
难度 2/5 1-3 小时 新手友好度 78/100
db-ux-design-system/core-web#8461 ·
维护者通常 1 天内回复
-
难度 2/5 1-3 小时 新手友好度 78/100
维护者通常 1 天内回复
-
Cannot run an integration on windows when power shell is selected as the default profile terminal未关闭Priority/Blocker Type/Bug
难度 2/5 1-3 小时 新手友好度 76/100
wso2/product-integrator#2767 ·
维护者通常 1 天内回复