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.