MarkdownEditor toolbar: use Radix Toolbar from radix-ui instead of the hand-rolled roving tabindex
Maintainers usually reply within 1 day
Nobody has claimed this yet.
Assessment
- Difficulty
- 2/5
- Estimated time
- 1-3 hours
- Newbie friendliness
- 82/100
- Issue type
- Refactor
- Clarity
- Clearly specified
- Activity status
- Active
- Tech stack
- react, typescript
- Domain
- accessibility, frontend
Research direction
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.
Written by the indexing model from the issue text.
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 <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).
- Dominant language
- TypeScript
- Stars
- 1
- Forks
- 1
- Avg merge
- 1d 20h
- Merged PRs (30d)
- 25
Getting set up
We have not checked this project's setup files yet. Start from its README, and see our first-contribution guide for the general steps.
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
More from CodeForPhilly/codeforphilly-ng
-
Difficulty 2/5 1-3 hours Newbie friendliness 84/100
CodeForPhilly/codeforphilly-ng#178 ·
Maintainers usually reply within 1 day
-
Difficulty 2/5 1-3 hours Newbie friendliness 76/100
CodeForPhilly/codeforphilly-ng#89 ·
Maintainers usually reply within 1 day
-
Difficulty 2/5 1-3 hours Newbie friendliness 88/100
CodeForPhilly/codeforphilly-ng#87 ·
Maintainers usually reply within 1 day
-
Difficulty 2/5 1-3 hours Newbie friendliness 74/100
CodeForPhilly/codeforphilly-ng#50 ·
Maintainers usually reply within 1 day
-
Difficulty 1/5 Under an hour Newbie friendliness 82/100
CodeForPhilly/codeforphilly-ng#42 ·
Maintainers usually reply within 1 day
All issues in CodeForPhilly/codeforphilly-ng
Similar issues
-
check:passed streams:add
Difficulty 2/5 1-3 hours Newbie friendliness 72/100
Maintainers usually reply within 1 day
-
Difficulty 2/5 1-3 hours Newbie friendliness 88/100
Fission-AI/OpenSpec#1986 ·
Maintainers usually reply within 1 day
-
Difficulty 2/5 1-3 hours Newbie friendliness 75/100
nestjs/docs.nestjs.com#3554 ·
Maintainers usually reply within 1 day
-
Difficulty 2/5 1-3 hours Newbie friendliness 74/100
publicodes/publicodes#868 ·
-
namespace operations
Difficulty 1/5 Under an hour Newbie friendliness 78/100
EclipseFdn/open-vsx.org#13488 ·
Maintainers usually reply within 2 days