Improve toolbar accessibility by following W3C APG Toolbar example by riasvdv · Pull Request #114 · panphora/overtype

riasvdv · 2026-06-10T20:02:37Z

This improves the toolbar accessibility by following the W3C APG Toolbar example and standards.

Gives the toolbar a roving tabindex
Left / Right / Home / End toolbar navigation
Toolbar focus is remembered between edits and going back to the toolbar

Summary by cubic

Makes the formatting toolbar follow the W3C APG Toolbar pattern for better accessibility. Adds predictable keyboard navigation, accurate pressed states, and stable focus between the editor and toolbar.

New Features
- Roving tabindex across toolbar items with Left/Right/Home/End navigation; focus is remembered when returning from the toolbar.
- ARIA: toolbar now links to the textarea via aria-controls; auto-ids are created when missing; toggle buttons update aria-pressed.
- Button API: added isActive to set pressed state and the active class, plus optional actionId for canonical actions.
- Docs and tests: README documents isActive; added test/toolbar.test.js; npm test includes the new suite.

^{Written for commit 80b9f7a. Summary will update on new commits.}

riasvdv

Added some comments to explain some of the decisions made

riasvdv · 2026-06-10T20:03:27Z

+    /**
+     * Ensure the textarea can be referenced by aria-controls
+     * @private
+     */
+    _ensureTextareaId() {
+      if (!this.textarea.id) {
+        this.textarea.id = `overtype-${this.instanceId}-input`;
+      }
+    }
+


This was needed for the toolbar to correctly be able to reference the instance with aria-controls

riasvdv · 2026-06-10T20:06:53Z

-        let isActive = false;
-
-        switch(name) {
-          case 'bold':
-            isActive = activeFormats.includes('bold');
-            break;
-          case 'italic':
-            isActive = activeFormats.includes('italic');
-            break;
-          case 'code':
-            isActive = false; // Disabled: unreliable in code blocks
-            break;
-          case 'bulletList':
-            isActive = activeFormats.includes('bullet-list');
-            break;
-          case 'orderedList':
-            isActive = activeFormats.includes('numbered-list');
-            break;
-          case 'taskList':
-            isActive = activeFormats.includes('task-list');
-            break;
-          case 'quote':
-            isActive = activeFormats.includes('quote');
-            break;
-          case 'h1':
-            isActive = activeFormats.includes('header');
-            break;
-          case 'h2':
-            isActive = activeFormats.includes('header-2');
-            break;
-          case 'h3':
-            isActive = activeFormats.includes('header-3');
-            break;


Not every button can be toggled, which was causing aria-pressed issues, this moves the logic into the button itself so custom buttons can also determine if they're active

riasvdv · 2026-06-10T20:08:00Z

@@ -139,14 +294,20 @@ export class Toolbar {
   * Not exposed to users - viewMode button behavior is fixed
   */
  toggleViewModeDropdown(button) {


There's a lot of viewMode dropdown specific logic in the toolbar file now. I'd suggest maybe moving all the implementation to a separate file at some point

…JSON, Safari fix Bundles several community fixes and features into one minor release. Added: - transformLinkUrl option for the link tooltip (#85) - Tab/Shift+Tab indent on selection, Cmd/Ctrl+] and Cmd/Ctrl+[ shortcuts, and public indentSelection()/outdentSelection() (#115) - JSON-aware data-ot-* parsing and data-ot-textarea-* shortcuts so textareaProps (e.g. required) works from HTML (#112) - Autocomplete recipe for @mention/#issue popups in docs/AUTOCOMPLETE.md (#96) Fixed: - Keyboard focus trap: collapsed Tab/Shift+Tab now uses native focus traversal so keyboard users can leave the editor, WCAG 2.1.2 (#113) - Toolbar accessibility following the W3C APG Toolbar pattern: roving tabindex, aria-pressed on toggle buttons only, aria-controls, menu-button semantics (#114) - Safari: re-flow the textarea after edits so caret/wrap stop desyncing from the overlay (#116) - exports.browser pointed to a non-existent file (overtype.iife.min.js); now overtype.min.js - Link tooltip sanitizes the URL before opening, closing a latent javascript: vector dist/ rebuilt from source. Full test suite passes, including the new keyboard-accessibility and toolbar a11y suites. Claude-Session: https://claude.ai/code/session_013uxKmCY2gqHzfV2jBQq27J

panphora · 2026-06-18T23:06:06Z

Landed in v2.4.0 (22742e0). I integrated your toolbar accessibility work, rebuilt dist/ from source, and shipped it as a combined accessibility release alongside #115: roving tabindex, aria-pressed on toggle buttons only, aria-controls linking the toolbar to the textarea, and full menu-button semantics for the view-mode dropdown.

Thank you for the thorough, well-tested PR! Closing manually since it landed via a rebuilt combined commit rather than a direct GitHub merge.

…JSON, Safari fix Bundles several community fixes and features into one minor release. Added: - transformLinkUrl option for the link tooltip (#85) - Tab/Shift+Tab indent on selection, Cmd/Ctrl+] and Cmd/Ctrl+[ shortcuts, and public indentSelection()/outdentSelection() (#115) - JSON-aware data-ot-* parsing and data-ot-textarea-* shortcuts so textareaProps (e.g. required) works from HTML (#112) - Autocomplete recipe for @mention/#issue popups in docs/AUTOCOMPLETE.md (#96) Fixed: - Keyboard focus trap: collapsed Tab/Shift+Tab now uses native focus traversal so keyboard users can leave the editor, WCAG 2.1.2 (#113) - Toolbar accessibility following the W3C APG Toolbar pattern: roving tabindex, aria-pressed on toggle buttons only, aria-controls, menu-button semantics (#114) - Safari: re-flow the textarea after edits so caret/wrap stop desyncing from the overlay (#116) - exports.browser pointed to a non-existent file (overtype.iife.min.js); now overtype.min.js - Link tooltip sanitizes the URL before opening, closing a latent javascript: vector dist/ rebuilt from source. Full test suite passes, including the new keyboard-accessibility and toolbar a11y suites.

Improve toolbar accessibility by following W3C APG Toolbar example

80b9f7a

riasvdv commented Jun 10, 2026

View reviewed changes

riasvdv marked this pull request as ready for review June 10, 2026 20:08

panphora closed this Jun 18, 2026

panphora mentioned this pull request Jun 18, 2026

Don't focus trap tab by default #115

Closed

Navigation Menu

Improve toolbar accessibility by following W3C APG Toolbar example - #114

Improve toolbar accessibility by following W3C APG Toolbar example#114
riasvdv wants to merge 1 commit into
panphora:mainfrom
riasvdv:improve-toolbar-accessibility

riasvdv commented Jun 10, 2026 •

edited by cubic-dev-ai Bot

Loading

Uh oh!

riasvdv left a comment

Uh oh!

riasvdv Jun 10, 2026

Uh oh!

riasvdv Jun 10, 2026

Uh oh!

riasvdv Jun 10, 2026

Uh oh!

panphora commented Jun 18, 2026 •

edited

Loading

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Conversation

riasvdv commented Jun 10, 2026 • edited by cubic-dev-ai Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary by cubic

Uh oh!

riasvdv left a comment

Choose a reason for hiding this comment

Uh oh!

riasvdv Jun 10, 2026

Choose a reason for hiding this comment

Uh oh!

riasvdv Jun 10, 2026

Choose a reason for hiding this comment

Uh oh!

riasvdv Jun 10, 2026

Choose a reason for hiding this comment

Uh oh!

panphora commented Jun 18, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

riasvdv commented Jun 10, 2026 •

edited by cubic-dev-ai Bot

Loading

panphora commented Jun 18, 2026 •

edited

Loading