CodeForPhilly / CodeForPhilly/codeforphilly-ng

Extract a shared combobox hook for SearchBox and TagPicker

未关闭
#165 0 条评论 0 个 reaction 已指派 0 人 在 GitHub 查看
主要语言
TypeScript
星标
1
派生
1
平均合并
5 天 3 小时
30 天内合并 PR
9

描述

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](https://claude.com/claude-code)

https://claude.ai/code/session_01RdRwHvDupRLV8GuJpYKzEr

贡献指南

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

调研方向

首先定位 SearchBox 和 TagPicker,然后比较它们现有的 combobox 状态、ARIA ID、键盘处理器以及失去焦点时的行为。使用 SearchBox.test.tsx 和 TagPicker.test.tsx 作为行为契约;当共享 hook 或采用的 Command 方案将该契约集中化,且不改变任一组件的渲染和激活行为,并且两套测试都通过时,即视为完成。

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

评估

技术栈
react, typescript
领域
accessibility, frontend, testing
Issue 类型
重构
难度
4/5
预计耗时
3-5 天
活跃度
活跃
描述清晰度
基本清楚
新手友好度
52/100

把新 issue 发到你的邮箱

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