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

未关闭适合新手

#169 创建于 2026年9月9日 0 条评论 0 个 reaction 已指派 0 人在 GitHub 查看

还没有人认领这个 Issue。

评估

难度: 2/5
预计耗时: 1-3 小时
新手友好度: 82/100

Issue 类型: 重构
描述清晰度: 描述清楚
活跃度: 活跃
技术栈: react, typescript
领域: accessibility, frontend

调研方向

从 MarkdownEditor 的实现开始，将其工具栏标记、activeButton 状态、toolbarRefs 和 keydown 处理程序与 Radix Toolbar API 进行比较。运行 apps/web/tests/MarkdownEditor.test.tsx；当手写的焦点管理被替换，并且现有的单一 Tab 停止点以及 Arrow/Home/End 行为仍然通过测试时，即视为完成。

由索引模型根据 Issue 内容生成。

描述

enhancement

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 <div role="toolbar"> + 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).

主要语言: TypeScript
星标: 1
派生: 1
平均合并: 1 天 20 小时
30 天内合并 PR: 25

贡献指南

这个仓库没有索引到贡献指南

从这里开始

先读完整个 Issue，再读项目的贡献指南。
在 Issue 下留言说明你要接手 —— 这能避免两个人做同样的事。
Fork 仓库，在一个分支上完成修改。
提交 Pull Request，并在描述里引用这个 Issue 编号。

CodeForPhilly/codeforphilly-ng 的其他 Issue

docs(ops): cutover runbook drift found during the real cutover 未关闭

难度 2/5 1-3 小时新手友好度 84/100

CodeForPhilly/codeforphilly-ng#178 · 2026年9月17日创建
openPublicStore: tighten bare-repo guard with git rev-parse --is-bare-repository 未关闭

难度 2/5 1-3 小时新手友好度 76/100

CodeForPhilly/codeforphilly-ng#89 · 2026年5月28日创建
docs: document push-daemon-as-durability + fix stale PVC/working-tree language in runbook 未关闭

难度 2/5 1-3 小时新手友好度 88/100

CodeForPhilly/codeforphilly-ng#87 · 2026年5月28日创建
ops: write docs/operations/update-saml2-certificate.md 未关闭

难度 2/5 1-3 小时新手友好度 74/100

CodeForPhilly/codeforphilly-ng#50 · 2026年5月17日创建
auth.md: clarify status codes vs redirect for OAuth error modes 未关闭

难度 1/5 1 小时以内新手友好度 82/100

CodeForPhilly/codeforphilly-ng#42 · 2026年5月17日创建

查看 CodeForPhilly/codeforphilly-ng 的全部 Issue

相似的 Issue

Tapping "Use video" more than once submits the verification twice 未关闭

难度 2/5 1-3 小时新手友好度 84/100

bcgov/bc-wallet-mobile#4761 · 1 条评论 · 2026年9月24日创建
fix(pg-meta): schemas.update and schemas.remove DO blocks fail when a name contains "$$" 未关闭

external-issue to-triage

难度 2/5 1-3 小时新手友好度 88/100

supabase/supabase#50882 · 2026年9月24日创建
Azure Sandboxes: Small and ExtraSmall tiers always fail to deploy (disk request exceeds tier maximum) 未关闭

area-deployment area-integrations triage:bot-seen

难度 2/5 半天新手友好度 86/100

microsoft/aspire#20459 · 1 条评论 · 2026年9月24日创建
Mobile builds drop the telemetry and crash-reporting keys, so opting in sends nothing 未关闭

难度 2/5 1-3 小时新手友好度 82/100

0xMiden/wallet#1118 · 2026年9月24日创建
[P3] Handle clipboard failures and announce copy status accessibly 未关闭

refactor

难度 2/5 1-3 小时新手友好度 84/100

nteract/semiotic#1534 · 2026年9月24日创建

更多 TypeScript Issue