focusTrap

focusTrap

description

Traps keyboard tabbing focus within a node; so if you open a modal and you want the users tab focus to stay within that modal. Helps accessibility as users won't be able to tab focus outside of the active element.

requires

• setFocusOnTarget (handled automatically)

parameters

• none

returns

• nothing

example usage:

Setup:

import { focusTrap } from './functions'

document.addEventListener('DOMContentLoaded', function(){
  // listen for focus trap requests
  focusTrap();
});

To trap focus, where element is the node you want to trap focus within:

triggerCustomEvent(document, 'focus:trap', {
  element: modalNode
});

To un-trap focus:

triggerCustomEvent(document, 'focus:untrap');