Breaking News: Grepper is joining You.com. Read the official announcement!

Trap tab navigation inside a modal, when opened

Erik Olsen answered on February 18, 2023 Popularity 1/10 Helpfulness 1/10

answer Trap tab navigation inside a modal, when opened

Trap tab navigation inside a modal, when opened

Comment

const getElements = (
  container,
  selector = 'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
) => {
  const focusableElements = [...container.querySelectorAll(selector)]
  const firstFocusableElement = focusableElements[0]
  const lastFocusableElement = focusableElements[focusableElements.length - 1]
  return { focusableElements, firstFocusableElement, lastFocusableElement }
}
const trapFocus = (container, className = 'modal-opened') => {
  if (!(container instanceof Element)) {
    return
  }
  document.addEventListener('keydown', (e) => {
    const isTabPressed = e.key === 'Tab' || e.keyCode === 9
    const isInside = container.contains(document.activeElement)
    const isOpened = document.activeElement.closest(`.${className}`)
    const { focusableElements, firstFocusableElement, lastFocusableElement } =
      getElements(container)
    if (isTabPressed) {
      focusableElements.forEach((el) => {
        el.setAttribute('tabindex', isOpened ? '0' : '-1')
      })
      if (e.shiftKey) {
        if (document.activeElement === firstFocusableElement) {
          lastFocusableElement.focus()
          e.preventDefault()
        }
      } else if (document.activeElement === lastFocusableElement) {
        firstFocusableElement.focus()
        e.preventDefault()
      }
      if (!isInside && isOpened) {
        firstFocusableElement.focus()
        e.preventDefault()
      }
    }
  })
}
export { trapFocus as default }

Popularity 1/10 Helpfulness 1/10 Language javascript

Source: Grepper

Tags: javascript navigation when

Link to this answer
Share Copy Link

Contributed on Feb 18 2023

Erik Olsen

0 Answers Avg Quality 2/10

Trap tab navigation inside a modal, when opened

Contents

More Related Answers

Trap tab navigation inside a modal, when opened

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.