focus-trap demo

Return to the repository

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.)

demo one

Default behavior: When this focus trap activates, the first element in its tab order receives focus.

Here is a focus trap with some focusable parts.

demo two

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.

Here is a focus trap with some focusable parts.

demo three

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.

demo four

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.

demo five

Focusable nodes are initially hidden and then revealed within the trap.

demo six

Nested focus traps

demo seven

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.

Return to the repository