Keyboard Navigation

About this document:  Outline FOLIO keyboard shortcuts and process for app POs/Devs to implement keyboard shortcuts.

Platform-wide keyboard shortcuts (if using standard stripes-components) 

Platform-wide keyboard shortcuts (each app must implement) 

App specific keyboard shortcut Implementation 

What POs need to know

1. Do not get shortcut key happy
   1. If your app requires 10+ shortcut keys outside of the platform wide ones described above then there may be a UX issue that needs to be addressed. Shortcut keys should be used to streamline workflows but the hope is the UX supports this and shortcut keys are a complement. Also we want to minimize the number of shortcut keys to minimize the risk of conflict with browser/screenreader/and operating system keys. 
2. POs should have someone test Platform-wide keyboard shortcuts (if using standard stripes-components) are functional on his/her app(s). 
3. Overall for any shortcut implemented for your app, please have someone test to verify implementation. 

Questions to ask SIGs when considering app-specific keyboard shortcuts 

• Ask SIG members to describe repeated actions/workflows. Then ask yourself - can a keyboard shortcut streamline the described action/workflow? 
• Is there an action that is cumbersome that a keyboard shortcut can address? 

Keyboard shortcut requirements

1. Stripes-force team will create user stories that POs can clone to support platform-wide keyboard shortcuts that each app must implement. 
2. If your app requires a shortcut then 
   • Write a requirement that describes the action it should execute and where keyboard focus should be when executing action AND where keyboard focus should be once action is executed. 
   • Work with your development team to define keyboard shortcut combination. Team needs to make sure that combination does not conflict with browser/screenreader/and operating system keys. 
   • Review this document to ensure the shortcut to be implemented does not conflict with platform-wide keyboard shortcuts. 
   • After implementation then have users Test!!!!
   • After testing,  document your shortcut keys on a To be created page that will list all apps' shortcut keys.

Defining keyboard shortcuts  - Best practices 

1. Keep it Simple 
2. Avoid using the following characters for shortcut keys: @ {} [] \ ~ | ^ ' < >
3. Avoid case-sensitive letters 
4. Ask SIG(s) to document (or provide links) what keyboard shortcuts are used in current system. If possible, try to implement a similar/same shortcut to support a familiar user experience. 
5. Think of the user workflow when defining keys. For example, if a user takes an action and it is typically followed by another action then the shortcuts should have a similar keyboard shortcut pattern.  
6. You must define keyboard shortcuts for MacOS and Windows. For MacOS - use  Command + [] and avoid Control. 
7. Keyboard shortcut pattern: 
   1. Primary actions keyboard shortcut pattern:  cmd / crtl + [letter, if possible the first character in the action name, for example cmd /ctrl+s = Save record]
   2. Secondary actions keyboard shortcut pattern:  cmd / ctrl + alt + [letter, if possible the first character in the action name, for example cmd/ctrl + alt + h = Go to Search & Filter pane 

FRONTEND Developer Information: Keyboard shortcuts modal implementation

There is an API! https://github.com/folio-org/stripes-components/tree/master/lib/Commander. Also, keyboard shortcuts will be displayed for each app in a modal, accessed from the app menu or via the shortcut key combination cmd/ctrl + alt + k. The below guidelines should be applied to achieve consistency across apps. 

Guideline 1 - Presentation of shortcut key combinations in the modal

Shortcut key combinations should be presented in Camel Case with spaces between the components.

Guideline 2 - Presentation of shortcut actions/descriptions in the modal

Shortcuts should be described and ordered as per the below list of actions, to achieve consistency across applications.

If a shortcut is not relevant to an app it should be omitted.

A shortcut can be renamed to make it more relevant. For example in eHoldings "Create a new record" is renamed to "Create a new custom package or title record".

1. Create a new record
2. Edit a record
3. Save a record
4. Duplicate a record
5. Expand all accordions
6. Collapse all accordions
7. Expand or collapse an accordion
8. Go to Search & filter pane
9. Open keyboard shortcuts modal
10. Close a modal or pop-up
11. Copy
12. Cut
13. Paste
14. Find

Guideline 3 - Display of app specific shortcuts

App specific shortcuts should be displayed at the top of the list, or inserted into the list at a point where they make most sense.