fix: allow tabbing out of CodeMirror editors#66
Conversation
|
@yT0n1 just FYI, I haven't forgotten about the bug you reported in the review. 😉 |
There was a problem hiding this comment.
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
falseat 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.
| nextIndex = index + direction; | ||
| if (nextIndex < 0 || nextIndex >= tokens.length) { | ||
| view.dispatch({ effects: setActiveTokenEffect.of(null) }); | ||
| return false; | ||
| } |
There was a problem hiding this comment.
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).
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
After
Checklist
Ensure you provide everything we need to review your contribution:
Closes {LINK_TO_ISSUE}orRelated to {LINK_TO_ISSUE}@bpmn-io/srtool