Accessibility Issue #2 – Improper Tab Key Behavior Inside the Editor

[Srifi19]

Title:

Pressing Tab inside the editor creates indentation instead of moving focus out of the text area.

Description:

By default, when a user presses the Tab key while focused inside the Quill editor, the editor inserts an indentation (a tab character or padding) into the text content. However, for accessibility compliance and consistency with standard web form behavior, pressing Tab should move focus to the next interactive element (such as a button, link, or form field).

This deviation from expected keyboard behavior can confuse users who navigate forms using the keyboard or assistive technology.

Expected Behavior:

Pressing Tab should move focus to the next focusable element in the page (same as behavior).

Pressing Shift + Tab should move focus to the previous focusable element.

Actual Behavior:

Pressing Tab inside the editor inserts an indentation in the text.

Users cannot tab out of the editor using the keyboard.

This breaks standard form navigation flow.

Impact:

Users who rely on keyboard navigation may become trapped in the editor.

Creates inconsistency with native text fields.

Causes accessibility issues for screen reader and switch device users who expect Tab to change focus, not edit text.

WCAG References:

WCAG 2.1 – 2.1.1 Keyboard

WCAG 2.1 – 2.4.3 Focus Order

Severity:

🔴 High – Causes a keyboard trap that prevents navigation for users relying solely on keyboard input.

Recommendation / Fix:

Override Quill’s default Tab behavior and allow standard focus traversal:

quill.root.addEventListener('keydown', (e) => { if (e.key === 'Tab') { e.preventDefault(); // Move focus to next element const focusable = Array.from(document.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])')); const index = focusable.indexOf(document.activeElement); if (e.shiftKey) { focusable[index - 1]?.focus(); } else { focusable[index + 1]?.focus(); } } });

Optionally, allow indentation via a custom keyboard shortcut (e.g., Ctrl + ] or Cmd + ]) instead of hijacking Tab

[elmatadorinho]

Hello @Srifi19 I just came across the same issue. I found a way to modify the behavior after reading the documentation for the keyboard module.

const quill = new Quill('#editor', {
  modules: {
    keyboard: {
      bindings:  {
            // This will overwrite the default binding also named 'tab'
          tab: {
            key: 9,
            shiftKey: null,
            handler: function() {
              console.log('Tab key pressed in quill editor');
              return true;
            }
          }
       },
    }
  }
});

Try it and give us an update

[ghabriel25]

Hi @Srifi19 , just as @elmatadorinho mentioned, you can modify the handler like this

handler: () => {
    window.focus();
    if (document.activeElement) document.activeElement.blur();
}

reference: https://stackoverflow.com/a/6976583