Archive for May, 2023

JS Trap focus

posted in JS on May 9, 2023 - 0 Comments 
containerElement = document.getElementById('id');

focusableElements = [
    ...containerElement.querySelectorAll('a[href], button, input, textarea, select, details, [tabindex]:not([tabindex="-1"])')
  ].filter(
    el => (el.offsetParent != null) && el => !el.hasAttribute('disabled') && !el.getAttribute('aria-hidden')
);

firstFocusableEl = focusableElements[0];
lastFocusableEl = focusableElements[focusableElements.length - 1];

lastFocusableEl.addEventListener('keydown', function(event) {
  if (event.shiftKey === false && event.key === 'Tab') {
    event.preventDefault();
    firstFocusableEl.focus();
  }
});

firstFocusableEl.addEventListener('keydown', function(event) {
  if (event.shiftKey === true && event.key === 'Tab') {
    event.preventDefault();
    lastFocusableEl.focus();
  }
});