OCP Keyboard Navigation

This page documents the keyboard navigation standards for OCP miniApps, following ARIA guidelines to ensure accessible and consistent keyboard interactions across the platform.

Key	Action
Tab	Move focus to the next focusable element
Shift + Tab	Move focus to the previous focusable element
Enter	Activate the selected/focused element (e.g., link, button)
Escape	Close modal dialogs, popovers, or menus
Spacebar	Activate a button or toggle a checkbox when focused
Arrow keys (↑ ↓ ← →)	Navigate between menu items, sliders, tabs, or within composite widgets (e.g., radio groups)

Form Controls

Key	Action
Enter	Submit the form (when inside an input field)
Spacebar	Toggle checkboxes or activate buttons
Arrow keys	Navigate between options in a radio button group or dropdown (when expanded)
Home / End	Jump to the first or last item in a list or menu

Tables & Grids

Key	Action
Arrow keys	Move between cells
Ctrl + Home / Ctrl + End	Jump to first/last cell in the table
Enter	Edit content in a cell (for editable grids)

Dialogs / Modals

Key	Action
Escape	Close the dialog
Tab / Shift + Tab	Move between focusable elements inside the modal

Focus should not move outside the modal when it is open (focus trap).

Custom Components

Accordion

Key	Action
Enter or Space	Expand / collapse the accordion panel
Arrow keys	Move between accordion headers

Tabs

Key	Action
Arrow keys	Move between tabs
Tab	Move focus to the tab panel content

Menus

Key	Action
Arrow keys	Navigate between menu items
Enter / Space	Activate the focused menu item
Escape	Close the menu

Shortcut	Action
`Tab`	Move to the next selectable element in Platform/Enter the canvas (focus entry point)
`Shift+Tab`	Leave the canvas
`↑ ↓ ← →`	Move focus to the nearest node or link in that direction
`Esc`	Clear selection, return focus to canvas entry point

Selection

Shortcut	Action
`Enter` / `Space`	Select focused node or link
`Enter` / `Space` (on selected node)	Open node settings
`Enter` / `Space` (on selected link from condition)	Open condition link settings
`Shift+Enter` / `Shift+Space`	Toggle multi-select on focused node or link
`Ctrl+A`	Drag and drop the selected node on the Canvas

Editing

Shortcut	Action
`Delete` / `Backspace` / `X`	Delete selected items
`Cmd/Ctrl+Z`	Undo
`Cmd/Ctrl+Shift+Z` / `Ctrl+Y`	Redo
`Cmd/Ctrl+C`	Copy selected node(s)
`Cmd/Ctrl+V`	Paste

Pan & Zoom

Shortcut	Action
`Shift+↑ ↓ ← →`	Pan the canvas
`Alt/Cmd+↑ ↓ ← →`	Move selected node(s)
`=` / `+`	Zoom in
`-`	Zoom out
`0`	Zoom to fit all nodes

Linking Mode (activated on a node in focus)

Shortcut	Action
`L`	Enter link mode (selected node gets highlighted in yellow)
`↑ ↓ ← →`	Navigate to target node (skips links and nodes that would create a loop)
`Enter` / `Space`	Confirm linking to the focused target node
`L` / `Esc`	Cancel link mode