Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

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

...

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

...

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

...

  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

...

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

Table of Contents
indenth2

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

...

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

...

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

...

.

...

Platform-wide keyboard shortcuts (each app must implement) 

...

App specific keyboard shortcut Implementation 

What POs need to know

...

Also

...

,

...

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

...

keyboard

...

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 

What developers need to know

  1. There is an API! https://github.com/folio-org/stripes-components/tree/master/lib/Commander

Keyboard shortcuts modal implementation

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. 

...