CodeForPhilly / CodeForPhilly/codeforphilly-ng
Extract a shared combobox hook for SearchBox and TagPicker
- Lenguaje dominante
- TypeScript
- Estrellas
- 1
- Forks
- 1
- Merge medio
- 5 d 3 h
- PR fusionados (30 d)
- 9
Descripción
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
Guía de contribución
No hay ninguna guía de contribución indexada para este repositorio
Línea de trabajo
Comienza localizando SearchBox y TagPicker; después, compara su estado actual de combobox, los IDs de ARIA, los manejadores de teclado y el comportamiento al perder el foco. Usa SearchBox.test.tsx y TagPicker.test.tsx como contrato de comportamiento; se considera terminado cuando el hook compartido o el enfoque de Command adoptado centraliza el contrato sin cambiar el comportamiento de renderizado y activación de ninguno de los dos widgets, y ambas suites de pruebas pasan.
Escrito por el modelo de indexación a partir del texto del issue.
Evaluación
- Stack tecnológico
- react, typescript
- Área
- accessibility, frontend, testing
- Tipo de issue
- Refactorización
- Dificultad
- 4/5
- Tiempo estimado
- 3-5 días
- Estado de actividad
- Activo
- Claridad
- Bastante claro
- Aptitud para principiantes
- 52/100