CodeForPhilly / CodeForPhilly/codeforphilly-ng

Extract a shared combobox hook for SearchBox and TagPicker

オープン
#165 コメント 0 件 リアクション 0 件 担当者 0 名 GitHub で見る
主要言語
TypeScript
スター
1
フォーク
1
平均マージ
5日 3時間
マージ済み PR(30日)
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 を動作の契約として使用します。共有フックまたは採用した Command アプローチによって契約が一元化され、どちらのウィジェットのレンダリングおよびアクティベーションの動作も変更されず、両方のテストスイートが通れば完了です。

索引モデルが issue の本文から書いたものです。

評価

技術スタック
react, typescript
領域
accessibility, frontend, testing
issue の種類
リファクタリング
難易度
4/5
見積もり時間
3〜5日
活発さ
活発
明瞭さ
おおむね明確
初心者へのやさしさ
52/100

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。