graphql / graphql/graphiql

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

Open
#3,766 2 comments 1 reaction 0 assignees View on GitHub
bug graphiql
Dominant language
TypeScript
Stars
16.9k
Forks
1.9k
Avg merge
22h 45m
Merged PRs (30d)
70

Description

### Is there an existing issue for this?

- [x] 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_

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.