Shortcut/hotkeys keys for html portal - concept
New here? Learn about Bountify and follow @bountify to get notified of new bounties! x

We want to test the UX of using shortcut keys in our portal. I have stood up this repl.it for us

https://replit.com/@quotient1/shortcuts

The nav on left is just dummy links but will simulate actually going to those pages so when you fork this you can just make empty pages for those.

Here are the shortcuts and functions we need

Navigation changes:

Dashboard

Alt + D

Resources

Alt + R

Manuals

Alt + M

Questions & Answers

Alt + Q

Knowledge Base

Alt + K

Dashboard triggers

Opens search bar (search bar found in the header, open it and put cursor focus in it)
Control + /
Slides the user to the "Sales" widget near the bottom of the page)
Control + Shift + F

Move between tabs in the "Sales" widget
Control →, Control ←

I have seen some libs to help with stuff like these below but its up to you which you think is going to work best for the page. Our final portal is actually in angular so if you can find a lib that doesnt require jquery it would be awesome

https://craig.is/killing/mice

https://www.npmjs.com/package/hotkeys-js

https://www.jqueryscript.net/blog/best-keyboard-shortcut.html

awarded to EmmyMay
Tags
javascript

Crowdsource coding tasks.

1 Solution

Winning solution

https://replit.com/@EmmyMay1/shortcuts#index.html

Here is my solution for the bounty.

I made use of HotkeysJS library which I believe is a vanilla solution.

The code that handles the shortcuts is in a script tag in the index.html file.