About this document: Outline FOLIO keyboard shortcuts and process for app POs/Devs to implement keyboard shortcuts.
...
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 | |
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 |
...
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 |
...
- Keep it Simple
- Avoid using the following characters for shortcut keys: @ {} [] \ ~ | ^ ' < >
- Avoid case-sensitive letters
- 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.
- 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.
- You must define keyboard shortcuts for MacOS and Windows. For MacOS - use Command + [] and avoid Control.
- Keyboard shortcut pattern:
- Primary actions keyboard shortcut pattern: cmd / crtl + [letter, if possible the first character in the action name, for example cmd /ctrl+s = Save record]
- 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 | ||
---|---|---|
|
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
- Keep it Simple
- Avoid using the following characters for shortcut keys: @ {} [] \ ~ | ^ ' < >
- Avoid case-sensitive letters
- 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.
- 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.
- You must define keyboard shortcuts for MacOS and Windows. For MacOS - use Command + [] and avoid Control.
- Keyboard shortcut pattern:
- Primary actions keyboard shortcut pattern: cmd / crtl + [letter, if possible the first character in the action name, for example cmd /ctrl+s = Save record]
- 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
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.
...