Focus Trap

The mdcFocusTrap directive makes it possible to trap focus inside a subtree of the DOM. An activated focus trap prevents users from interacting with elements outside the trapped area. This can be used to create an accessible experience for modal dialogs. Therefore mdcFocusTrap is typically used in combination with mdcDialog.

Focus Trap Demo

Input Focus is currently not trapped. You can focus any element on the page.

API

Directive: MdcFocusInitialDirective

Selector: [mdcFocusInitial]

When placed on a child element of an mdcFocusTrap, the focus trap will try to move focus to this element when the focus trap is activated.

Directive: MdcFocusTrapDirective

Selector: [mdcFocusTrap]

Directive for trapping focus (by key and/or mouse input) inside an element. To be used for e.g. modal dialogs, where focus must be constrained for an accesssible experience. Use mdcFocusInitial on a child element if a specific element needs to get focus upon activation of the trap. In the absense of an mdcFocusInitial, or when that element can't be focused, the focus trap will activate the first tabbable child element of the focus trap.

PropertyDescription
@Input()
untrapOnOutsideClick
any

Set this property to have clicks outside the focus area untrap the focus. The value is taken when the trap is activated. Thus changing the value while a focus trap is active does not affect the behavior of that focus trap.

@Input()
ignoreEscape
any

Set this property to ignore the escape key. The default is to deactivate the trap when a user presses the escape key. The value is taken when the trap is activated. Thus changing the value while a focus trap is active does not affect the behavior of that focus trap.