Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
1 task done
juanrgon opened this issue Sep 4, 2024 · 0 comments
Open
1 task done

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

juanrgon opened this issue Sep 4, 2024 · 0 comments

Comments

@juanrgon
Copy link

juanrgon commented Sep 4, 2024

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

@acao acao added this to the graphiql@4.0.0 milestone Sep 5, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants