CodeForPhilly / CodeForPhilly/codeforphilly-ng
Extract a shared combobox hook for SearchBox and TagPicker
- Langage dominant
- TypeScript
- Étoiles
- 1
- Forks
- 1
- Merge moyen
- 5 j 3 h
- PR mergées (30 j)
- 9
Description
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
Guide de contribution
Aucun guide de contribution indexé pour ce dépôt
Piste de recherche
Start by locating SearchBox and TagPicker, then compare their existing combobox state, ARIA IDs, keyboard handlers, and focus-out behavior. Use SearchBox.test.tsx and TagPicker.test.tsx as the behavioral contract; done means the shared hook or adopted Command approach centralizes the contract without changing either widget's rendering and activation behavior, and both test suites pass.
Rédigé par le modèle d'indexation à partir du texte de l'issue.
Évaluation
- Stack technique
- react, typescript
- Domaine
- accessibility, frontend, testing
- Type d'issue
- Refactorisation
- Difficulté
- 4/5
- Temps estimé
- 3-5 jours
- Activité
- Active
- Clarté
- Plutôt claire
- Accessibilité débutants
- 52/100