Escape Focus

Note: Spartacus 4.x is no longer maintained. Please upgrade to the latest version.

Note: Spartacus 4.x was tested with SAP Commerce Cloud versions 1905 to 2205. Spartacus 4.x has not been verified to work with (and is not guaranteed to work with) SAP Commerce Cloud 2211 or later releases.

Note: This feature is introduced with version 2.0 of the Spartacus libraries.

The cxFocus directive provides a feature to focus the host element when the ESC key is captured. This is useful for dialogs, as well as for larger parts of the UI that should trap the focus.

When the ESC key is captured while the element is already focused, the event is let go, and will “bubble up” to the ancestor tree (this is how browsers treat certain UI events).

Spartacus uses the escape focus for the so-called “skip links”, for dialogs (such as modals), and for element groups that must be unlocked initially (for example, a facet).

Whenever the escape focus is handled, an output (esc) is emitted, so that additional logic can be applied if needed.

Configuration

The escape focus only happens if it is configured. The following is an example of configuring the escape focus:

<div [cxFocus]="{ focusOnEscape: true }"></div>

The focusOnDoubleEscape property can be used to force an auto focus in the case of a recurring escape key.