CKEditor 5 toolbar and balloon focus order inconsistent in Drupal 10/11

Focus Order and Accessibility in CKEditor 5

In the current Drupal 10/11 bundled CKEditor 5 build, focus management is handled by the editor's internal focus controller rather than the standard DOM tab order. The focus flow is designed as follows:

• Toolbar to Editor: Focus moves linearly through the persistent toolbar buttons and then enters the editing surface.
• Editor to Toolbar: Depending on the build configuration, users typically use specific keyboard shortcuts (e.g., Alt+F10) to jump back to the toolbar, as the editing surface often acts as a focus trap to prevent accidental exits during content creation.
• Contextual Balloons: When a balloon (such as the Link or Image editor) is triggered, focus is programmatically shifted to the balloon's UI. This creates a temporary focus trap; the user must interact with the balloon or dismiss it before focus returns to the triggering element in the editing surface.

Screen Reader Exposure

Toggleable formatting buttons and balloon controls are exposed using the following ARIA patterns:

Element	Role	State/Attribute	Purpose
Formatting Button	button	aria-pressed	Indicates if the style (e.g., Bold) is active.
Balloon Input	textbox / button	aria-label	Provides a descriptive name for the specific field.

Verification Steps

To verify if the focus order is behaving as expected in your specific Drupal theme, perform these scoped checks:

1. Inspect the Accessibility Tree: Use browser DevTools (Accessibility tab) to confirm that aria-pressed="true" is applied when a formatting button is active.
2. Tab-Sequence Audit: Trigger a link balloon and attempt to Tab out of it. Focus should remain within the balloon until it is saved or cancelled.
3. Focus Return: Confirm that closing a balloon returns focus to the exact cursor position or button that opened it, rather than resetting to the top of the page.

Assumptions and Uncertainties

This analysis assumes the use of the Classic Editor build. Focus behavior differs in the Inline Editor. Because Drupal themes can inject custom CSS (e.g., outline: none), visual focus indicators may be missing even if the programmatic focus order is correct. We recommend verifying if any custom ckeditor5-toolbar.css overrides are present in your project.

Missing Diagnostic: Are you using a custom CKEditor 5 build or the standard Drupal core bundled version? Custom builds may omit specific accessibility plugins that manage these transitions.