In the demos below, you'll be able to tell that a focus trap is active because it will turn pink. You should also be able to tell because it will trap your focus: you won't be able to do anything outside of the focus trap.
When a trap is active, you can deactivate it by pushing its deactivate button or pushing the Escape key.
(Note that tab order is a little wonky on this page because of demo three.)
Default behavior: When this focus trap activates, the first element in its tab order receives focus.
When this focus trap activates, focus jumps to a specific, manually specified element.
Also, in this demo the Escape key does not deactivate the focus trap. You must click the button.
When this focus trap activates, the first element in its tab order receives focus, but because of positive tabindex attributes the tab order is not the same as the source order.
Also, clicking outside of this trap deactivates it and does not prevent the click's intended action.
Initial focus on a containing element with a tabindex of -1 and no focus outline; so when you "tab" you are within the trap, but by tabbing through focus does not return to the container.
Focusable nodes are initially hidden and then revealed within the trap.
Nested focus traps
In this focus traps, the single focusable button are hidden. If you activate the trap in this state, the "fallbackFocus" option is used to focus the container. If, however, you make the focusable button visible, it will receive focus when you activate the trap.