ERM comparisons: 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 ERM comparisons app by keyboard. 

Description

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

A user of the ERM comparisons 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 ERM comparisons 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 report - alt + n
   2. Save form changes - ctrl + s
   3. Expand all accordions - ctrl + alt + b
   4. Collapse all accordions - ctrl + alt + g
   5. Go to Search & Filter pane - ctrl + alt + h
   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 ERM comparisons app menu

Then there is an option "Keyboard shortcuts"

 

Given display of the ERM comparisons 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 ERM comparisons 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 ERM comparisons 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 ERM comparisons 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.

 

Dev task breakdown

• Using[ this component|https://github.com/folio-org/stripes-components/blob/master/lib/KeyboardShortcutsModal/KeyboardShortcutsModal.js], add a shortcut to open the modal.
• Existing shortcut code can be found by searching for HasCommand component
• No existing shortcut code in `defaultKeyboardShortcuts` for this, so append a new one for now  Check with Claudia who knows shortcuts code best atm