Skip to content

Latest commit

 

History

History
247 lines (147 loc) · 4.62 KB

keyboard-handling-for-sapui5-ui-elements-6b741a6.md

File metadata and controls

247 lines (147 loc) · 4.62 KB

Keyboard Handling for SAPUI5 UI Elements

SAPUI5 UI elements provide keyboard handling in order to improve accessibility and speed up work.

Keyboard Shortcuts for End Users

Some users operate their computer almost exclusively with the keyboard. For those users, focus is critical and the entire page functionality should be available using the keyboard. SAPUI5 supports keyboard navigation with a predefined tab order sequence.

In this topic we introduce the main keyboard combinations that are used by SAPUI5 UI elements.

Main Keyboard Combinations

Key Combination

What it does

Specific Behavior

[Tab]

[Shift] ⁠+⁠ [Tab]

Focuses UI elements in order (forward / backward)

You can cycle through all interactive, enabled and visible UI elements that are part of a given dialog or other container. When the last UI element is focused, pressing the key again will move the focus to first element.

[Space]

Triggers an action (reversible)

Pressing and releasing the key triggers the action that is associated with a UI element (for example, open a link or toggle a button).

Tip:

If you press and hold the key, you can cancel the trigger action by pressing [Shift].

[Enter]

Triggers an action (immediate)

Triggers the action that is associated with a UI element (for example, open a link or toggle a button). The action is triggered immediately after the key is pressed.

[Arrow  Keys]

Navigates between elements

You can move the focus between elements within a complex UI element (for example a table or a list). Depending on the structure, this navigation is either one-directional (left/right or up/down) or two-directional (left, right, up, down).

[Home]

[End]

Navigates between elements

You can move the selection to the first/last element within a set of elements.

Tip:

When using UI elements like sliders and rating indicators, pressing these keys will set the selected value to the maximum/minimum respectively.

[Page  Up]

[Page  Down]

Skips elements during navigation

You can move the selection forward/backward by several elements at a time. If the remaining number of elements is less than the step size, selection will move to the last/first element.

[Escape]

Closes element / Reverts changes

Depending on your situation, you can do the following:

  • Close an additionally opened element (for example, a pop-up).

  • Revert the execution to a previous step - one step at a time.

  • If you have made changes to the content of an element (for example, a text field), pressing this key will revert those changes.

[F4] or

[Alt] + [Down] or

[Alt] + [Up]

Opens / closes a drop-down menu

You can open the options and elements available in a drop-down menu, if the UI element in question provides this type of information.

[F6] or

[Ctrl] + [Alt/Option] + [Down]

Forward fast navigation

UI elements within an application can be grouped together (for example, all elements in the header of an application). You can forward-skip focusing every element within such a group by using these keys.

[Shift] + [F6] or

[Ctrl] + [Alt/Option] + [Up]

Backward fast navigation

Skips focus of UI elements backward.

Related Information

Keyboard Handling in the Developing Apps Section

Keyboard Handling for SAPUI5 Controls for Developers