Blox Material v1.0.0-beta.3

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

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


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] [mdcDialog] [mdcDrawer]

Directive for trapping the tab key focus within an element. To be used for e.g. modal dialogs, where focus must be constrained for an accesssible experience.

This will only trap the keyboard focus (when using tab or shift+tab). It will not prevent the focus from moving out of the trapped region due to mouse interaction. You can use a background scrim element that overlays the window to achieve that. (Like mdcDialog does).

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.