/
Keyboard Navigation

Keyboard Navigation

Aug 29, 2022

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) 

Action

Keyboard shortcut

Action

Keyboard shortcut

Navigate main toolbar

Tab / Shift + Tab 

Open a menu dropdown

Enter

Navigate menu dropdown

up and down arrows (To be implemented with STCOR-382 and STCOR-383 for main toolbar) 

Select an item in a menu dropdown

Enter 

Navigate the entire Search and Filter pane 

Tab

Select/Un-select checkbox filters

Spacebar

Reset all or Reset a filter

Spacebar

Expand / Collapse filter

Spacebar 

Go to the Results List pane (or go to the first result) 

To be implemented STRIPES-662

Navigate the results list

Tab / 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 pane

Focus on Tag icon and hit Enter (Will implement requirement to move focus to Tags pane when Enter is hit) 

View Record: Navigate result

Tab/Shift + Tab and up/down arrows 

View Record: Expand/Collapse accordion

Enter 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 accordion

Tab / 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 link

Enter

Select/Unselect any checkbox or radio button 

Spacebar

Cancel any changes/updates

esc

Close a modal window

esc

Copy

ctrl + c

Cut

ctrl + x

Paste

ctrl + v

Find

ctrl + f

Platform-wide keyboard shortcuts (each app must implement) 

Action 

Keyboard shortcut

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 list

cmd/ctrl + alt + k

Duplicate a record 

alt + c

Export results (csv)

TBD

Delete a record

TBD

Add a repeatable field

TBD

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 dropdown

TBD 

Go to Result pane header dropdown

TBD

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

Shortcut key combination example

Correct or incorrect?

Shortcut key combination example

Correct or incorrect?

Ctrl + Alt + E

correct

Ctrl+alt+e

incorrect

ctrl + alt + e

incorrect



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.