Dashboard: display the keyboard shortcuts modal

User story statement

As a librarian I want to display a list of shortcut keys for the operating system I am using (WIndows or Mac) that I can use to navigate the Dashboard app by keyboard. 

Description

The Dashboard app has a set of keyboard shortcuts but no way to make them known to the user.

A user of the Dashboard app should be able to open the keyboard shortcuts modal in two ways:

1. via an app menu option "Keyboard shortcuts" or 
2. via the shortcut combination cmd + option + k (mac) or ctrl + alt + k (windows)

Keyboard shortcuts for Mac and Windows users are different. Where the user's operating system can be detected the shortcuts for the OS should be displayed. Where the OS cannot be detected both sets of shortcuts should be displayed.

The work comprises the addition of:

1. a Dashboard app menu with one menu option "Keyboard shortcuts"
2. the keyboard shortcuts modal displaying the shortcuts. Windows shortcuts are shown as an example below, the same shortcuts should be listed for Mac OS (with the appropriate key combinations):
   1. Create a new widget - alt + n
   2. Edit a widget - ctrl + alt + e
   3. Save form changes - ctrl + s
   4. Expand all accordions - ctrl + alt + b
   5. Collapse all accordions - ctrl + alt + g
   6. Open keyboard shortcuts modal - ctrl + alt + k
   7. Expand or collapse an accordion - spacebar
   8. Close a modal or pop-up - esc
   9. Copy - ctrl + c
   10. Cut - ctrl + x
   11. Paste - ctrl + v
   12. Find - ctrl + f

The work should be implemented as per ERM-1642 for the Agreements app.

Scenarios

Given the Dashboard app menu

Then there is an option "Keyboard shortcuts"

 

Given display of the Dashboard app menu option "Keyboard shortcuts" on a Mac operating system

When I select the menu option

Then the "Keyboard shortcuts" modal for is displayed showing Mac shortcuts

And focus is on the modal.

 

Given display of the Dashboard app menu option "Keyboard shortcuts" on a Windows operating system

When I select the menu option

Then the "Keyboard shortcuts" modal for is displayed showing Windows shortcuts

And focus is on the modal.

 

Given the Dashboard app on a Mac operating system

When I press the shortcut key combination cmd + option + k

Then the Keyboard shortcuts modal is displayed showing Mac shortcuts

And focus is on the modal.

 

Given the Dashboard app on a Windows operating system

When I press the shortcut key combination ctrl + alt + k

Then the Keyboard shortcuts modal is displayed showing Windows shortcuts

And focus is on the modal.

 

Given display of the "Keyboard shortcuts" modal

When the operating system cannot be detected 

Then the Keyboard shortcuts modal is displayed showing Mac and Windows shortcuts

And focus is on the modal.