Lock 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 locking of the focusable elements of a host element. The focusable elements receive a tabindex of -1, so that the default tabbing in the browser is temporarily disabled.

The locked focus is used for groups of elements that should be skipped by keyboard users. A good example is a child navigation panel, or the facet navigation on the product listing page. Keyboard users can skip larger groups of focusable elements, until they unlock the group by pressing the ENTER or SPACE key.

Locked elements leverage the auto focus feature, unless the auto focus configuration is explicitly set to false. This results in the first focusable element being selected when the group is unlocked. For more information, see Auto Focus.

An unlocked group can be locked again by pressing the ESC key. The locked focus feature uses the escape focus feature, so that the host element is focused again when pressing ESC. For more information, see Escape Focus.