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).
Context
PR #157 gave
MarkdownEditor's formatting buttonsrole="toolbar", real names, and a hand-rolled roving tabindex (activeButtonstate + a keydown handler for Arrow/Home/End).Problem
The roving tabindex is ~30 lines of bespoke focus management that duplicates what Radix's
Toolbarprimitive already does (roving focus, orientation,Home/End, RTL, and correcttabIndexbookkeeping).radix-uiis already a dependency ofapps/web(radix-ui@^1.4.3) and exportsToolbar, so no new package is needed.Proposal
Replace the
<div role="toolbar">+handleToolbarKeyDown+toolbarRefs/activeButtonwithToolbar.Root/Toolbar.Buttonfromradix-ui, keeping thearia-label="Formatting"and per-button names.apps/web/tests/MarkdownEditor.test.tsxalready covers the single-tab-stop and Arrow/Home/End behaviour and should pass unchanged.Deferred from
plans/a11y-mechanical.md(PR #157).