Get user-focusable elements within a context in tab order

tabitha.js

// Source
const tabitha = (context = document) =>  
  [
    ...context.querySelectorAll('*')
  ]
    .filter(element => {
      const style = 
        window.getComputedStyle(element)
      
      return (
        element.tabIndex != -1
          &&
        style.display    != 'none'
          &&
        style.visibility != 'hidden'
      )
    })
    .sort((a, b) =>
      a.tabIndex > b.tabIndex ? 1 : 0
    )

const elements = tabitha()

// Proof (?)
let lastIndex

document.addEventListener('focus', ({target}) => {
  const index = elements.indexOf(target)

  console.log(target, index)

  if(index == -1)
    debugger
  
  if(lastIndex === undefined)
    return
  
  if(index < lastIndex && !(index === 0 && lastIndex +1 === elements.length))
    debugger
}, {
  capture: true,
})