Problem/Motivation

When the Ace editor replaces a textarea on an edit form (the text-editor integration and the field widget), Ace binds the Tab key to indent and Shift+Tab to outdent. A keyboard-only user who tabs into the editor cannot tab back out to reach the text-format select, the Save button or the next field. This is a WCAG 2.1.2 (No Keyboard Trap, Level A) problem. Read-only editors (the formatter and filter) are not affected.

Steps to reproduce

  1. Edit a node whose body uses the Ace text editor, using only the keyboard.
  2. Tab into the editor. Tab no longer moves focus out of it.

Proposed resolution

  • Enable Ace's own keyboard-accessibility mode on the editable editors: after creating the editor call editor.setOption('enableKeyboardAccessibility', true). This frees Tab and adds Esc to leave the editor. Guarded so older Ace builds that do not know the option are unaffected.
  • Follow-up (this issue or a child): give the replacement editor an accessible name and keep the field label associated with it.

Remaining tasks

  • ✅ File an issue
  • ✅ Addition/Change/Update/Fix
  • ✅ Testing to ensure no regression
  • ➖ Automated unit/functional testing coverage
  • ➖ UX/UI designer responsibilities
  • ❌ Accessibility and Readability
  • ❌ Reviewed by a human
  • ❌ Code review by maintainers
  • ❌ Full testing and approval
  • ❌ Credit contributors
  • ❌ Review with the product owner
  • ❌ Update Release Notes
  • ❌ Release

User interface changes

  • Tab and Shift+Tab move focus out of an editable Ace editor; Esc leaves it.

API changes

  • N/A

Data model changes

  • N/A

Release notes snippet

  • Editable Ace editors no longer trap the keyboard: Tab moves out of the editor and Esc leaves it.

Issue fork ace_editor-3618888

Command icon Show commands

Start within a Git clone of the project using the version control instructions.

Or, if you do not have SSH keys set up on git.drupalcode.org:

Comments

rajab natshah created an issue. See original summary.

  • rajab natshah committed 76150d9e on 2.0.x
    fix: #3618888 Free the Tab key and give the editors an accessible name
    
rajab natshah’s picture

Status: Needs review » Fixed

Fixed on 2.0.x.

Now that this issue is closed, review the contribution record.

As a contributor, attribute any organization that helped you, or if you volunteered your own time.

Maintainers, credit people who helped resolve this issue.

rajab natshah’s picture

Issue tags: +ace_editor-2.0.4

✅ Released ace_editor-2.0.4

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.