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
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.
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
mdcFocusInitial on a child element if a specific element needs to get
focus upon activation of the trap. In the absense of an
or when that element can't be focused, the focus trap will activate the first tabbable
child element of the focus trap.