CodeForPhilly / CodeForPhilly/codeforphilly-ng
MarkdownEditor toolbar: use Radix Toolbar from radix-ui instead of the hand-rolled roving tabindex
- 主要言語
- TypeScript
- スター
- 1
- フォーク
- 1
- 平均マージ
- 5日 3時間
- マージ済み PR（30日）
- 9
説明
## Context
PR #157 gave `MarkdownEditor`'s formatting buttons `role="toolbar"`, real names, and a hand-rolled roving tabindex (`activeButton` state + a keydown handler for Arrow/Home/End).
## Problem
The roving tabindex is ~30 lines of bespoke focus management that duplicates what Radix's `Toolbar` primitive already does (roving focus, orientation, `Home`/`End`, RTL, and correct `tabIndex` bookkeeping). `radix-ui` is already a dependency of `apps/web` (`radix-ui@^1.4.3`) and exports `Toolbar`, so no new package is needed.
## Proposal
Replace the `
Deferred from `plans/a11y-mechanical.md` (PR #157).
コントリビューションガイド
このリポジトリのコントリビューションガイドは索引されていません
調査の方向性
Start with the MarkdownEditor implementation and compare its toolbar markup, activeButton state, toolbarRefs, and keydown handler with the Radix Toolbar API. Run apps/web/tests/MarkdownEditor.test.tsx; done means the hand-rolled focus management is replaced while the existing single-tab-stop and Arrow/Home/End behavior still passes.
索引モデルが issue の本文から書いたものです。
評価
- 技術スタック
- react, typescript
- 領域
- accessibility, frontend
- issue の種類
- リファクタリング
- 難易度
- 2/5
- 見積もり時間
- 1〜3時間
- 活発さ
- 活発
- 明瞭さ
- 明確に書かれている
- 初心者へのやさしさ
- 82/100