[6.x] CodeMirror traps focus

[daun]

Bug description

It's currently impossible to tab out of a CodeMirror instance after tabbing into it. A mouse click outside of the editor is required to focus the next or previous input. A possible solution might be to blur the CodeMirror instance when pressing esc.

https://github.com/user-attachments/assets/001a75e8-21fa-420c-b6af-06bec9f9e9e1

How to reproduce

• Add a markdown field to a blueprint
• Tab into the field using tab
• Try to get out of it using tab or shift+tab

Logs

Environment

6.0-alpha.16

Installation

Fresh statamic/statamic site via CLI

Additional details

No response

[jasonvarga]

Pretty standard behavior. Even happens right here on GitHub.

But yes you can hit escape to unfocus and then continue tabbing. I like that. 👍

[daun]

GitHub's markdown editor doesn't seem to react to tab presses at all. CodeMirror v6 also disables tab presses by default for a11y reasons. Probably safe to disable tabs in the current v5 instance in use in the control panel? Especially with a breaking change with lots of other a11y improvements on the horizon.

By default, CodeMirror does not handle the Tab key. This isn't an oversight—it is an intentional decision to make the default configuration pass the "no keyboard trap" criterion of the W3C Web Content Accessibility Guidelines.

[jasonvarga]

GitHub's markdown editor doesn't seem to react to tab presses at all.

It definitely does.

[daun]

Funny. Mine doesn't. Maybe it's a setting somewhere? Couldn't find anything related though.

[daun]

Behavior seems consistent across Chrome/Safari/Firefox, so must be a flag somewhere, whether editable by the user or not.

Strange 🙃

[jasonvarga]

Ah sorry its the Redefined GitHub extension enabling it. 😅

Anyway! Being able to tab in a code field is pretty important. So hitting escape to let you tab away from the field sounds like a good direction.