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

Description

The Agreements app has a set of keyboard shortcuts but no way to make them known to the user. Work has been completed as part of STCOM-811 to centralize the display of an app's keyboard shortcuts in a modal.

A user of the Agreements 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. an agreements app menu with one menu option "Keyboard shortcuts"
2. the shortcut key combination cmd + option + k / ctrl + alt + k
3. the keyboard shortcuts modal

Note: check the Users app for an example implementation.

Mockups

Modals

1. Windows modal (windows.png - attached)
2. Mac modal (mac.png - attached)
3. Unknown operating system (unknown.png - attached)

 Note: all shortcuts should be presented in lower case and key combinations separated with spaces e.g. "ctrl + alt + k"

Scenarios

Given the Agreement app menu

Then there is an option "Keyboard shortcuts"

 

Given display of the Agreements 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 Agreements 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 Agreements 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 Agreements 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, 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