Hotkeys: find a standard way to handle them

[humitos]

We want to understand how to handle keyboard hotkeys for our addons in a standard and well supported way. Note that we cannot just use / to trigger the search or Ctrl + d to show the docdiff because those are hotkeys the browser (and the user) expect to behave differently.

Here, we would like to find a way to make this in a friendly way for our users. We need hotkeys for:

• enable/disable docdiff
• show search modal
• etc

(from #78 (comment))

Useful to find Javascript keyboard events https://www.toptal.com/developers/keycode

[humitos]

GitHub uses ? on most of its pages to show a modal with the keyboard shortcuts:

The documentation for all the keyboard shortcuts is at https://docs.github.com/en/get-started/using-github/keyboard-shortcuts

I also found they have a "Managing accessibility" that mentions this hotkeys can be disabled from a setting: https://docs.github.com/en/account-and-profile/setting-up-and-managing-your-personal-account-on-github/managing-personal-account-settings/managing-accessibility-settings

So, I think we can move forward with the original idea of using the single-stroke hotkeys we consider¹ and add a way to disable these hotkeys with a UI element and save the config in a cookie (we probably don't want to use user-specific settings because we want to be able to cache /_/addons/, see readthedocs/readthedocs.org#10536)

Footnotes

1. having confirmation of this idea from GitHub makes me think it's not bad ↩

[humitos]

I found people talking about accesskey HTML attribute, but it seems it's not well supported and its usage is discouraged:

because browsers and assistive technologies implement accesskey support inconsistently, ineffectively, or not at all, the accesskey attribute should typically be avoided or implemented with great care.

Due to numerous problems with implementation, accesskey is typically best avoided

(from https://webaim.org/techniques/keyboard/accesskey) and more on https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/accesskey

[zanderle]

I don't have deep experience with hotkeys, but I think it's a good approach to try and copy some of the bigger sites. I think Github is a great example.

TailwindCSS comes to mind as well with its "ctrl/cmd + K" hotkey for searching. I bring them up because I like how they show that shortcut in the search bar itself:

And if we'll need it, this is how they implement it, but I think there's nothing special happening here: https://github.com/tailwindlabs/tailwindcss.com/blob/999563f465729da931813489568e35822314adab/src/components/Search.js#L162

[humitos]

With #117, we have a nice and customizable way to handle these keyboard shortcuts. It would be awesome to create a modal to show them as GitHub does when pressing ?, for example.