Tab locking system.
This is based on code and examples provided in the ARIA specification. https://www.w3.org/TR/wai-aria-practices/examples/dialog-modal/dialog.html
- Source:
- Copyright:
- 2019 Andrew Nicols
- 2019 Andrew Nicols
- License:
- http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
Methods
(static) trapFocus(newLockRegion)
Start trapping the focus and lock it to the specified newLockRegion.
Parameters:
| Name | Type | Description |
|---|---|---|
newLockRegion |
HTMLElement | The container to lock focus to |
(static) untrapFocus()
Stop trapping the focus.
(inner) addLockRegionToStack(newLockRegion)
Add a new lock region to the stack.
Parameters:
| Name | Type | Description |
|---|---|---|
newLockRegion |
HTMLElement |
(inner) attemptFocus(focusTarget) → {Bool}
Attempt to focus the supplied focusTarget.
Note: This example is a heavily inspired by the WCAG example.
Parameters:
| Name | Type | Description |
|---|---|---|
focusTarget |
HTMLElement |
Returns:
Whether focus was successful o rnot.
- Type
- Bool
(inner) focusFirstDescendant() → {Bool}
Focus the first descendant of the current lock region.
Returns:
Whether a node was focused
- Type
- Bool
(inner) focusLastDescendant() → {Bool}
Focus the last descendant of the current lock region.
Returns:
Whether a node was focused
- Type
- Bool
(inner) getCurrentLockRegion() → {HTMLElement}
Get the current lock region from the top of the stack.
Returns:
- Type
- HTMLElement
(inner) hasTrappedRegionsInStack() → {Bool}
Whether any region is left in the stack.
Returns:
- Type
- Bool
(inner) isFocusable(focusTarget) → {Bool}
Check whether the supplied focusTarget is actually focusable. There are cases where a normally focusable element can reject focus.
Note: This example is a wholesale copy of the WCAG example.
Parameters:
| Name | Type | Description |
|---|---|---|
focusTarget |
HTMLElement |
Returns:
- Type
- Bool
(inner) lockHandler(event)
The lock handler.
This is the item that does a majority of the work. The overall logic from this comes from the examles in the WCAG guidelines.
The general idea is that if the focus is not held within by an Element within the lock region, then we replace focus on the first element in the lock region. If the first element is the element previously selected prior to the user-initiated focus change, then instead jump to the last element in the lock region.
This gives us a solution which supports focus locking of any kind, which loops in both directions, and which prevents the lock from escaping the modal entirely.
Parameters:
| Name | Type | Description |
|---|---|---|
event |
Event | The event from the focus change |
(inner) removeLastLockRegionFromStack()
Remove the top lock region from the stack.