Extract a shared combobox hook for SearchBox and TagPicker
メンテナーはふだん 1 日以内に返信
まだ誰も着手していません。
評価
- 難易度
- 4/5
- 見積もり時間
- 3〜5日
- 初心者へのやさしさ
- 52/100
- issue の種類
- リファクタリング
- 明瞭さ
- おおむね明確
- 活発さ
- 活発
- 技術スタック
- react, typescript
- 領域
- accessibility, frontend, testing
調査の方向性
まず SearchBox と TagPicker を見つけ、次にそれぞれの既存の combobox の状態、ARIA ID、キーボードハンドラー、フォーカスアウト時の動作を比較します。SearchBox.test.tsx と TagPicker.test.tsx を動作の契約として使用します。共有フックまたは採用した Command アプローチによって契約が一元化され、どちらのウィジェットのレンダリングおよびアクティベーションの動作も変更されず、両方のテストスイートが通れば完了です。
索引モデルが issue の本文から書いたものです。
説明
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
- 主要言語
- TypeScript
- スター
- 1
- フォーク
- 1
- 平均マージ
- 11分
- マージ済み PR（30日）
- 22
環境構築
- Dockerfile または Docker Compose ファイルあり
- プルリクエストのテンプレートなし
- コントリビューションガイドなし
はじめの一歩
- issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
- 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
- リポジトリをフォークし、ブランチを切って変更します。
- issue 番号を参照したプルリクエストを送ります。
CodeForPhilly/codeforphilly-ng のほかの issue
-
難易度 2/5 1〜3時間 初心者へのやさしさ 84/100
CodeForPhilly/codeforphilly-ng#178 ·
メンテナーはふだん 1 日以内に返信
-
MarkdownEditor toolbar: use Radix Toolbar from radix-ui instead of the hand-rolled roving tabindexオープンenhancement
難易度 2/5 1〜3時間 初心者へのやさしさ 82/100
CodeForPhilly/codeforphilly-ng#169 ·
メンテナーはふだん 1 日以内に返信
-
難易度 2/5 1〜3時間 初心者へのやさしさ 76/100
CodeForPhilly/codeforphilly-ng#89 ·
メンテナーはふだん 1 日以内に返信
-
難易度 2/5 1〜3時間 初心者へのやさしさ 88/100
CodeForPhilly/codeforphilly-ng#87 ·
メンテナーはふだん 1 日以内に返信
-
難易度 2/5 1〜3時間 初心者へのやさしさ 74/100
CodeForPhilly/codeforphilly-ng#50 ·
メンテナーはふだん 1 日以内に返信
CodeForPhilly/codeforphilly-ng の issue をすべて見る
似ている issue
-
bug confirmed perf
難易度 2/5 1〜3時間 初心者へのやさしさ 72/100
videojs/video.js#9400 · コメント 1 件 ·
メンテナーはふだん 1 日以内に返信
-
good first issue hacktoberfest
難易度 2/5 半日 初心者へのやさしさ 70/100
HelpCode-ai/anythingmcp#996 ·
メンテナーはふだん 1 日以内に返信
-
check:passed streams:add
難易度 1/5 1〜3時間 初心者へのやさしさ 72/100
メンテナーはふだん 2 日以内に返信
-
beta technical-medium ui
難易度 2/5 1〜3時間 初心者へのやさしさ 62/100
walletbeat/walletbeat#1625 ·
メンテナーはふだん 1 日以内に返信
-
[Good First Issue]: Add unit tests for NetworkVersionInfo対応中かも このイシューにリンクされたプルリクエストがオープン中、またはマージ済みです。 オープンGood First Issue hacktoberfest
難易度 2/5 1〜3時間 初心者へのやさしさ 85/100
hiero-ledger/hiero-sdk-js#4489 ·
メンテナーはふだん 1 日以内に返信