Storybook: Storybook keyboard shortcuts overlap in IE/Edge and Firefox

[MaDDmin]

That particular combination is taken on Firefox and opens a new private tab instead of toggling the Searchbox as it was meant to.

Here is the relation of Firefox shortcuts in which can be found that particular one: https://support.mozilla.org/en-US/kb/keyboard-shortcuts-perform-firefox-tasks-quickly?redirectlocale=en-US&redirectslug=Keyboard+shortcuts#w_windows-tabs

Control + Shift + P = private window
Control + Shift + L = new tab address bar

[ndelangen]

So what should the new shortcut be?

[danielduan]

Same problem in IE #1691

[Hypnosphi]

And Edge as well

[Hypnosphi]

As soon as we rename "left panel" to "stories panel" we can introduce Ctrl + Shift + S while keeping to support Ctrl + Shift + L for backward compatibility. For showing search panel, it seems quite natural to use Ctrl + Shift + F.

[Hypnosphi]

Oh, Ctrl + Shift + F is reserved for fullscreen already.

[Hypnosphi]

Here's a table with all the used Cmd/Ctrl + Shift + shortcut keys in major brawsers (sorted by usage data from caniuse), excluding text field shortcuts, and some highly contextual shortcuts:

|⌘/Ctrl+Shift+|A|B|C|D|E|F|G|H|I|J|K|L|M|N|O|P|Q|R|S|T|U|V|W|X|Y|Z|
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
|Chrome||+||+||||+|+|+|||+|+||||+||+|||+||||
|Firefox|+|+||+||||+||+||||+||+||+||+||+|+|||+|
|IE 11||||||||||||+||||+|||||||||||
|Safari||||+||||||||||||||||+|||||||
|Edge||||||||||||+|+|||+||+||+|||||||
|Opera||+||+||||+|+|||+||||+|||+|+|+|+|||||

Those keys are therefore safe for now: C E F G K O Q X Y. U is also quite safe, it's used only in Opera ("View source of active frame")
We're using F for fullscreen, and need to pick four of the remaining ones for other shortcuts instead of D L P J.

For search, we could use Q (stands for "query") As for panels, I can suggest using the key positions relative to F. Here's how available keys are laid out on standard keyboard:

|Q||E|||Y|U||O||
|---|---|---|---|---|---|---|---|---|---|
||||(F)|G|||K||
|||X|C|||||

So here's my suggestion:

• Q for search box
• E for stories panel
• C for addons panel
• G for addons panel in right

@ndelangen what do you think?

[ndelangen]

I like it @Hypnosphi ❤️

[stale[bot]]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 60 days. Thanks!

[dutzi]

@Hypnosphi Cmd+Shift+C is Chrome's Devtools Inspect Element shortcut :\