CodeForPhilly / CodeForPhilly/codeforphilly-ng
MarkdownEditor toolbar: use Radix Toolbar from radix-ui instead of the hand-rolled roving tabindex
- 主要语言
- TypeScript
- 星标
- 1
- 派生
- 1
- 平均合并
- 5 天 3 小时
- 30 天内合并 PR
- 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