feat: Make search usable via keyboard (CTRL + K)

[MoritzWeber0]

Let users open the search via the CTRL + K keyboard shortcut.

[netlify]

✅ Deploy Preview for fipguide ready!

Name	Link
🔨 Latest commit	857e35f
🔍 Latest deploy log	https://app.netlify.com/sites/fipguide/deploys/681c6c770777f8000934d569
😎 Deploy Preview	https://deploy-preview-119--fipguide.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[MoritzWeber0]

Have to check the macOS behaviour, it doesn't work with the COMMAND key on macOS

EDIT: Fixed

[therobrob]

Is it that common to open search via CTRL + K (i didnt know it)? Some other websites (like github.com itself) uses / to open search bar.

[MoritzWeber0]

Is it that common to open search via CTRL + K (i didnt know it)? Some other websites (like github.com itself) uses / to open search bar.

At least all common frontend frameworks use it on their websites:

• https://vuejs.org/
• https://nextjs.org/
• https://angular.dev/
• https://react.dev/

On GitHub, CTRL + K also works for the search.

CTRL + K is usually the shortcut for omnibox, i.e., using the search bar of the browser of the page. It got common to overwrite the shortcut to implement a custom search functionality.

[therobrob]

On these websites, it works from every page; we only have the search on home. I don't want to block the feature, but I wonder if it adds much value to our website.

Another question: is this shortcut also supported by the A11Y community? Is it also supported by screen readers, or are there other shortcuts here?

[MoritzWeber0]

On these websites, it works from every page; we only have the search on home. I don't want to block the feature, but I wonder if it adds much value to our website.

It does. You can navigate on the page via keyboard more easily. My usual workflow (that I use for other pages as well): Open the website via the URL, use CTRL + K to search and navigate to the target page.

But nevertheless, page search on the whole website would be even better and I already created #120 for it.

Another question: is this shortcut also supported by the A11Y community? Is it also supported by screen readers, or are there other shortcuts here?

Nothing that I have knowledge about, but ChatGPT summarized it as:

• Ctrl + K is generally accepted in web apps as a convention for search or command bar, but it is not officially standardized in accessibility guidelines like WCAG.
• Screen readers do not reserve Ctrl + K for their own functions, so it's usually safe to use as a custom shortcut.
• Developers are encouraged to provide accessible alternatives (like a visible search box or accessible buttons).

I'd argue that it improves accessibility since it's easier to navigate via keyboard.

[lenderom]

Docusaurus also uses this: