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