CodeForPhilly / CodeForPhilly/codeforphilly-ng

Extract a shared combobox hook for SearchBox and TagPicker

Ouverte
#165 0 commentaires 0 réactions 0 personnes assignées Voir sur GitHub
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

Recevez les nouvelles issues par e-mail

Un résumé court des issues GitHub adaptées aux débutants.