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) 

ActionKeyboard shortcut
Navigate main toolbarTab / Shift + Tab 
Open a menu dropdownEnter
Navigate menu dropdownup and down arrows (To be implemented with STCOR-382 and STCOR-383 for main toolbar) 
Select an item in a menu dropdownEnter 
Navigate the entire Search and Filter pane Tab
Select/Un-select checkbox filtersSpacebar
Reset all or Reset a filterSpacebar
Expand / Collapse filterSpacebar 
Go to the Results List pane (or go to the first result) To be implemented STRIPES-662
Navigate the results listTab / Shift + Tab
Select a result/View result in third pane

Enter (To be implemented move focus to the Results once user hits Enter key STRIPES-652

Access Tags paneFocus on Tag icon and hit Enter (Will implement requirement to move focus to Tags pane when Enter is hit) 
View Record: Navigate resultTab/Shift + Tab and up/down arrows 
View Record: Expand/Collapse accordionEnter or Spacebar 
View Record: Any action/button Enter or Spacebar 
Create/Edit Record: Navigate fields Tab / Shift + Tab
Create/Edit Record: Expand / Collapse accordion Spacebar 
Create/Edit Record: Navigate by accordionTab / Shift + Tab or up/down arrows
Create/Edit Record: Save / Cancel Spacebar (Will implement requirement to support hitting Enter key UIU-1252)

Create/Edit Record: Add a service point, Assign permission/proxy/sponsor, Add address,

and Reset password email. In general any action/button on the Edit record. 

Spacebar (Will implement requirement to support hitting Enter key too - UIU-1256)
Activate a linkEnter
Select/Unselect any checkbox or radio button Spacebar
Cancel any changes/updatesesc
Close a modal windowesc
Copyctrl + c
Cutctrl + x
Pastectrl + v
Findctrl + f

Platform-wide keyboard shortcuts (each app must implement) 

Action Keyboard shortcut
Create new record (focus must be on any element on the Users app) alt + n 
Expand all accordions on detail record (focus must be on any element on the detail record)cmd / ctrl + alt + b
Collapse all accordions on detail record (focus must be on any element on the detail record)cmd / ctrl + alt + g
Edit selected detail record (focus must be on any element on the detail record)cmd / ctrl + alt + e
Save edit / new form changes (focus must be on any element on the detail record)cmd / ctrl + s 
Go to Search & Filter pane (aka first pane) cmd / ctrl + alt + h
View shortcuts listcmd/ctrl + alt + k
Duplicate a record alt + c
Export results (csv)TBD
Delete a recordTBD
Add a repeatable fieldTBD
Delete a repeatable field TBD
Go to Results List pane (aka second pane)TBD - STRIPES-651
Go to Result pane (aka third pane) TBD - STRIPES-652 
Go to Results List pane header dropdownTBD 
Go to Result pane header dropdownTBD
Go to Tags pane (aka fourth pane) TBD

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! 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.

Shortcut key combination exampleCorrect or incorrect?
Ctrl + Alt + Ecorrect
ctrl + alt + eincorrect

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.