Hacktoberfest 2026: los issues que los mantenedores marcaron para octubre, abiertos y aptos para principiantes. Explorar issues de Hacktoberfest

Extract a shared combobox hook for SearchBox and TagPicker

Abierto
#165 0 comentarios 0 reacciones 0 asignados Ver en GitHub

Nadie ha tomado este issue todavía.

Evaluación

Dificultad
4/5
Tiempo estimado
3-5 días
Aptitud para principiantes
52/100
Tipo de issue
Refactorización
Claridad
Bastante claro
Estado de actividad
Activo
Stack tecnológico
react, typescript
Área
accessibility, frontend, testing

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.

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.ai/code/session_01RdRwHvDupRLV8GuJpYKzEr

Lenguaje dominante
TypeScript
Estrellas
1
Forks
1
Merge medio
1 d 20 h
PR fusionados (30 d)
25

Guía de contribución

No hay ninguna guía de contribución indexada para este repositorio

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Más de CodeForPhilly/codeforphilly-ng

Todos los issues de CodeForPhilly/codeforphilly-ng

Issues similares

Más issues de TypeScript

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.