Keyboard Trap

Create a keyboard trap to enhance accessibility on UI components such as modals and toggled navigation.

Example

HTML

<div class="modal">
  <button class="close">Close</button>
  
  <form>
    <label>Name<input type="text" /></label>
    <button>Submit</button>
  </form>
</div>
<button class="toggle">Open modal</button>

Javascript

const trap = new KeyboardTrap(document.querySelector('.modal'));

document.querySelector('.toggle').addEventListener('click', (e) => {
  trap.setFocusVisibleByPointerType(e); // Determines visibility of focus based on event pointer type
  trap.enable = !trap.enable;
});

document.querySelector('.close').addEventListener('click', () => {
  trap.setFocusVisibleByPointerType(e); // Determines visibility of focus based on event pointer type
  trap.enable = false;
});