JetBrains: Improve keyboard navigation
Created by: philipp-spiess
Closes #36004 (closed)
This PR fixes two keyboard accessibility issues in the JetBrains web view:
- We want tab navigation only to work on the search input related fields and not jump inside the result list. However since there are link components that we use to render the list items, it was previously possible to jump to them. I've fixed this by forking the React component and adding
tabIndex={-1}to make them non intractable via tab. Keep in mind that we already have custom keyboard navigation via arrow keys set up anyways. - We need to prevent the focus to be moved to the
<body>element because of #36004 (closed). This was currently only applied as an event handler for clicks in the result list but I've moved this logic to the root so that any area can now be clicked without the focus moving to the<body>
Test plan
Manual testing:
https://user-images.githubusercontent.com/458591/170258702-b9be6603-481c-4633-97ea-55c825695da1.mov
App preview:
Check out the client app preview documentation to learn more.
Merge request reports
Merged by
(Jun 6, 2025 7:34am UTC)
Activity
Created by: vdavid
Review: Approved
Niiice! I've noticed this behavior and I'd have sworn that I had added an issue for this, but I can't seem to be able to find it anywhere. Anyway, thanks for recognizing and fixing this! Keyboard navigation and accessibility questions might cause us some headache in the future (like how do I navigate to the links in the search results via the keyboard) but for now I'm 100% fine if we don't solve this.
Please register or sign in to reply