CodeForPhilly / CodeForPhilly/codeforphilly-ng

MarkdownEditor toolbar: use Radix Toolbar from radix-ui instead of the hand-rolled roving tabindex

未关闭 适合新手
#169 0 条评论 0 个 reaction 已指派 0 人 在 GitHub 查看
enhancement
主要语言
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 `

` + `handleToolbarKeyDown` + `toolbarRefs`/`activeButton` with `Toolbar.Root` / `Toolbar.Button` from `radix-ui`, keeping the `aria-label="Formatting"` and per-button names. `apps/web/tests/MarkdownEditor.test.tsx` already covers the single-tab-stop and Arrow/Home/End behaviour and should pass unchanged.

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

把新 issue 发到你的邮箱

精选适合新手参与的 GitHub issue 摘要。