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,
and Reset password email. In general any action/button on the Edit record.
...
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
- Stripes-force team will create user stories that POs can clone to support platform-wide keyboard shortcuts that each app must implement.
- 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
...
,
...
keyboard
...
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.
...
Shortcut key combinations should be presented in Camel Case with spaces between the components.
| 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. Delete a record
6. Expand all accordions
76. Collapse all accordions
87. Expand or collapse an accordion
98. Go to Search & filter pane
109. Open keyboard shortcuts modal
1110. Close a modal or pop-up
1211. Copy
1312. Cut
1413. Paste
1514. Find
Guideline 3 - Display of app specific shortcuts
...