Skip to content

fix: allow tabbing out of CodeMirror editors#66

Merged
jarekdanielak merged 1 commit intomainfrom
fix-keyboard-trap
Mar 25, 2026
Merged

fix: allow tabbing out of CodeMirror editors#66
jarekdanielak merged 1 commit intomainfrom
fix-keyboard-trap

Conversation

@jarekdanielak
Copy link
Contributor

@jarekdanielak jarekdanielak commented Mar 24, 2026

Related to https://github.com/camunda/camunda-hub/pull/21494#pullrequestreview-3966387333

Proposed Changes

Allow tabbing out of CodeMirror editors in the variable value box.

In the screencasts I'm spamming TAB.

Before

vo-before

After

vo-after

Checklist

Ensure you provide everything we need to review your contribution:

  • Contribution meets our definition of done
  • Pull request establishes context
    • Link to related issue(s), i.e. Closes {LINK_TO_ISSUE} or Related to {LINK_TO_ISSUE}
    • Brief textual description of the changes
    • Screenshots or short videos showing UI/UX changes
    • Steps to try out, i.e. using the @bpmn-io/sr tool

@jarekdanielak jarekdanielak requested review from a team and barinali March 24, 2026 11:26
@jarekdanielak jarekdanielak self-assigned this Mar 24, 2026
@bpmn-io-tasks bpmn-io-tasks bot added the needs review Review pending label Mar 24, 2026
@jarekdanielak
Copy link
Contributor Author

@yT0n1 just FYI, I haven't forgotten about the bug you reported in the review. 😉

Copy link

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

This PR updates the CodeMirror JSON “interactive controls” tab-navigation so users can tab out of the read-only value editor, instead of being trapped in a wrap-around focus loop. This improves keyboard accessibility and usability in the variable value box.

Changes:

  • Update moveFocus() to stop wrapping focus when tabbing past the first/last interactive token.
  • Clear the active token and return false at bounds so the browser can handle Tab/Shift+Tab and move focus out of the editor.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Comment on lines +246 to +250
nextIndex = index + direction;
if (nextIndex < 0 || nextIndex >= tokens.length) {
view.dispatch({ effects: setActiveTokenEffect.of(null) });
return false;
}
Copy link

Copilot AI Mar 24, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This changes the Tab/Shift+Tab focus behavior (no wrap-around, allow leaving the editor) but there’s no automated test covering it. Since CodeMirror behavior can regress easily with extension/keymap changes, please add a browser test (e.g., in lib/components/VariableRow/test/ValueDisplay.spec.jsx) that focuses the editor, presses Tab until the last interactive token, and verifies focus moves to the next focusable element (and similarly Shift+Tab moves to the previous element when tabbing past the first token).

Copilot uses AI. Check for mistakes.
@jarekdanielak jarekdanielak merged commit 9751745 into main Mar 25, 2026
7 checks passed
@jarekdanielak jarekdanielak deleted the fix-keyboard-trap branch March 25, 2026 07:42
@bpmn-io-tasks bpmn-io-tasks bot removed the needs review Review pending label Mar 25, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants