1.0.0 • Published 6 years ago
@appnest/focus-trap v1.0.0
- Does one things very very well - it traps the focus!
- Pierces through the shadow roots when looking for focusable elements.
- Works right out of the box (just add it to your markup)
- Created using only vanilla js - no dependencies and framework agnostic!
➤ Installation
npm i @appnest/focus-trap
➤ Usage
Import @appnest/focus-trap
somewhere in your code and you're ready to go! Simply add the focus trap to your html
and it'll be working without any more effort from your part.
<focus-trap>
<button>Focus 1</button>
<button>Focus 2</button>
<button>Focus 3</button>
<button>Focus 4</button>
<button>Focus 5</button>
</focus-trap>
➤ API
The focus-trap
element implements the following interface.
interface IFocusTrap {
// Returns whether or not the focus trap is inactive.
inactive: boolean;
// Returns whether the focus trap currently has focus.
readonly focused: boolean;
// Focuses the first focusable element in the focus trap.
focusFirstElement: (() => void);
// Focuses the last focusable element in the focus trap.
focusLastElement: (() => void);
// Returns a list of the focusable children found within the element.
getFocusableElements: (() => HTMLElement[]);
}
➤ License
Licensed under MIT.
1.0.0
6 years ago
0.0.27
6 years ago
0.0.26
6 years ago
0.0.25
7 years ago
0.0.24
7 years ago
0.0.23
7 years ago
0.0.22
7 years ago
0.0.21
7 years ago
0.0.20
7 years ago
0.0.19
7 years ago
0.0.18
7 years ago
0.0.17
7 years ago
0.0.16
7 years ago
0.0.15
7 years ago
0.0.14
7 years ago
0.0.13
7 years ago
0.0.12
7 years ago
0.0.11
7 years ago
0.0.10
7 years ago
0.0.9
7 years ago
0.0.8
7 years ago
0.0.7
7 years ago
0.0.6
7 years ago
0.0.5
7 years ago
0.0.4
7 years ago