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.
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] [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.