graphql / graphql/graphiql

[graphiql] Accessibility: Window Splitter Not Keyboard Accessible

Open
#3,767 4 comments 0 reactions 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

The window splitter in GraphiQL is not accessible via keyboard. It is only accessible and operable with a mouse. This creates a significant barrier for keyboard users, resulting in a degraded user experience as they cannot adjust the layout of the interface.

### Expected Behavior

The window splitter should be fully accessible and operable via keyboard:
- Users should be able to focus on the splitter using the Tab key
- Once focused, users should be able to adjust the splitter using arrow keys
- The functionality should be equivalent to what is currently possible with mouse interaction

### Steps To Reproduce

1. Open GraphiQL in a web browser
2. Attempt to navigate to the window splitter using the Tab key
3. Try to operate the window splitter using keyboard controls (arrow keys)
4. Observe that it's not possible to interact with the splitter using only the keyboard

### Environment

- GraphiQL Version: 3.7.1
- OS: MacOS
- Browser: Chrome
- Bundler: Not specified
- 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.