Keyboard interaction

Overview

Keyboard interactions can enhance the filtering and navigation experience within the CoreView portal. You can efficiently navigate through tables, manage group elements, enter edit modes, and adjust selections by utilizing keyboard shortcuts and specific keys. This guide aims to make the CoreView portal more accessible and user-friendly through these keyboard-based interactions.

General navigation

Skip to main content

• Pressing the first ⇥ Tab key in a page will open a “Skip to main content” modal. Clicking ↵ Enter key will let you skip all the navigation elements (top toolbar & left menu) and skip directly to the title element of the page.

• Esc allows you to close the dialog/modals.

Left menu & Toolbar

• Pressing ⇥ Tab/⇧ Shift+⇥ Tab will move focus forward and backward between menus.
• Clicking ↵ Enter or ␣ Space key will open the focused toolbar option or menu. 

Forms

Button

• When focus is on a button (icon or text), clicking ↵ Enter or ␣ Space key will trigger the button.

Input

• Pressing ⇥ Tab/⇧ Shift+⇥ Tab will move focus forward and backward between inputs.
• In number-only inputs, use ↑ ↓ to increase or decrease the number.

• In inputs with chips: type in the value and press ↵ Enter to include it; use Backspace to delete a chip.
• When focused on multi-chip input: press ← → (Windows) or ⇥ Tab/⇧ Shift+⇥ Tab (Mac) to move focus from one chip to another.

Dropdown

• When focused on dropdown input, clicking ↵ Enter or ␣ Space key opens the dropdown list.
• Navigate through dropdown options with ↑ ↓ arrow keys.
• Press ↵ Enter to select the option.

Suggester

• For autocomplete/suggester inputs, typing opens a dropdown list; navigate options with ↑ ↓ arrows.
• Press ↵ Enter to select an option.

Radio button

• Navigate through radio options with ↑ ↓ arrows.

Checkboxes

• Navigate through the checkbox options with ⇥ Tab / ⇧ Shift+⇥ Tab.
• Press ␣ Space key to select/deselect an option.
• Some checkboxes have 3 states (e.g. Manage Service Plan). Press ␣ Space key to toggle through the states.

Toggle switch

• Toggle between enable/disable by clicking ↵ Enter or ␣ Space key.

Date picker

General

• ↵ Enter or ␣ Space (Windows) or ⌥ Alt+↓ (Mac) to open the calendar pop-up.
• Esc to close the calendar pop-up.

Month view

Year view

Multi-year view

Tables

The table (grid) responds to keyboard interactions and emits events on grid cells. Below are all supported keyboard interactions:

General table navigation

• Use arrow keys (← ↑ → ↓) to move focus between cells. If already at the boundary, the key has no effect.
• Use Ctrl+← (Fn+← on Mac) to move to the start of the row and Ctrl+→ (Fn+→ on Mac) to move to the end.
• If on the first grid row and you press ↑, focus moves to the grid filters/headers.
• In headers: arrow keys move between header cells, ⇥ Tab moves focus forward, ⇧ Shift+⇥ Tab moves focus backward.
• Use Page Up and Page Down to scroll one page up or down, Home and End to move to the first and last rows.

Groups

• If on a group element, hitting the ↵ Enter key will expand/collapse.
• If the cell contains a link, pressing ↵ Enter will open the link.

Inline action

• Press ␣ Space or ↵ Enter in a cell with an inline action to trigger it.

Selection

• Press ␣ Space to select/deselect the row focused. If multi-select is enabled, previous selections aren't removed.
• Press ↵ Enter in the Column Header checkbox selection to select all items in the page.
• Press ␣ Space in the Column Header checkbox selection to toggle between "select all on all pages" and "select all on current page" options.

Column headers

The grid header supports full keyboard navigation; behavior differs by header type. To access all header functions:

Column sorting

• Press ↵ Enter to toggle sort state on a column.
• Press ⇧ Shift+↵ Enter to enable multi-sort for the column.

Column text filter & floating filter

• Press ↵ Enter to focus the text filter for the focused header, then ⇥ Tab to move focus to the filter icon for floating filter options.
• Press ↵ Enter to open the floating filter for the focused header.

• When a floating filter menu is open, press Esc to close and return focus to the header.
• Use ⇥ Tab / ⇧ Shift+⇥ Tab to move between header filter options.

WYSIWYG text editor

General navigation

• ⌥ Alt + F10 or (⌥ Option + Fn + F10 on Mac) to focus on the toolbar.
• Move around tools with ⇥ Tab/⇧ Shift+⇥ Tab or ←/→.

Common Actions

• Ctrl + X or ⌘ Cmd + X Cuts the selection to clipboard.
• Ctrl + C or ⌘ Cmd + C Copies selection to clipboard.
• Ctrl + V or ⌘ Cmd + V Pastes from clipboard.
• Ctrl + Z or ⌘ Cmd + Z Undo.
• Ctrl + Y or ⌘ Cmd + ⇧ Shift + Z Redo.
• Ctrl + K or ⌘ Cmd + K Opens insert link popup.
• Ctrl + P or ⌘ Cmd + P Opens insert image popup (JavaScript editor only).

Basic Formatting

• Ctrl + A or ⌘ Cmd + A Selects all text.
• Ctrl + B or ⌘ Cmd + B Bold.
• Ctrl + I or ⌘ Cmd + I Italic.
• Ctrl + U or ⌘ Cmd + U Underline.
• Ctrl + S or ⌘ Cmd + S Strikethrough.
• Ctrl + ] or ⌘ Cmd + ] Indents paragraph.
• Ctrl + [ or ⌘ Cmd + [ Outdents paragraph.

Quote

• Ctrl + ' or ⌘ Cmd + ' Increases quote level.
• Ctrl + ⇧ Shift + ' or ⌘ Cmd + ⇧ Shift + ' Decreases quote level.

Image / Video

• Ctrl + + or ⌘ Cmd + + Resizes current image/video larger.
• Ctrl + - or ⌘ Cmd + - Resizes smaller.

Table

• Ctrl + Alt + Space Selects table cell where cursor is.
• ⇧ Shift + Left/Right arrow: extend table selection left/right.
• ⇧ Shift + Up/Down arrow: extend table selection up/down.