Add keyboard shortcut ("/" key) to focus search input

[navidadelpour]

Overview

This pull request adds a keyboard shortcut ("/" key) functionality in GraphQL Voyager, enabling users to focus on the search input. This enhancement aims to improve accessibility and empower users to search without relying on mouse interactions.

[navidadelpour]

Hi @IvanGoncharov,

Can you please review this PR and let me know if there is any issue?

[IvanGoncharov]

@navidadelpour Good idea 👍
Thank you for PR.

Since we heavily depend on MUI we should use their component to handle hotkeys.
I did a quick googling and found this:
https://github.com/mui/material-ui/pull/10725/files

Can please try the same approach in Voyager?

[navidadelpour]

@IvanGoncharov thanks for reviewing.

I will definitely check that in the next couple of days and let you know when it is updated.

[navidadelpour]

@IvanGoncharov Hi,

I Updated the PR and it's much more simpler. thanks for guidance. I didn't installed the react-event-listener because it's not compatible with react 18 and is archived on Github, I used an alternative package.

Also, as I was checking the PR#10725 you've sent and MUI code, I realized that this PR is not actually merged to the main branch right now. they are using @docsearch/react package and the way the package is implementing this feature is here.

Can you please review again?

[LunaticMuch]

@navidadelpour can you actually run tests and lint on your branch? PR tests for linting are failing

[navidadelpour]

Hi @LunaticMuch

Thanks for reminding me. I should have run them before my push! Would you please check again?