CodeForPhilly / CodeForPhilly/codeforphilly-ng
MarkdownEditor toolbar: use Radix Toolbar from radix-ui instead of the hand-rolled roving tabindex
Open
enhancement
- Dominant language
- TypeScript
- Stars
- 1
- Forks
- 1
- Avg merge
- 5d 3h
- Merged PRs (30d)
- 9
Description
## 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).
Contributor guide
No contributing guide indexed for this repository
Assessment
This issue has not been assessed yet.