[graphiql] Keyboard Trap: Unable to Tab Out of Query Editor

[juanrgon]

Is there an existing issue for this?

• I have searched the existing issues

Current Behavior

When using GraphiQL, the cursor becomes trapped in the query editor, preventing users from tabbing out to other elements of the interface. This creates an accessibility barrier, particularly for keyboard-only users, as it hinders navigation through the application.

Expected Behavior

Users should be able to tab into the query editor, interact with it, and then tab out to access other parts of the GraphiQL interface, such as the "Run" button, variables section, or other UI elements.

Steps To Reproduce

1. Open GraphiQL in a web browser
2. Use the Tab key to navigate to the query editor
3. Enter or modify a query in the editor
4. Attempt to use the Tab key to move focus out of the editor

Environment

• GraphiQL Version: 3.7.1
• OS: MacOS
• Browser: Chrome
• Bundler:
• react Version: 18.3.1
• graphql Version: 16.9.0

Anything else?

No response