This is a handy utility function for getting the first focusable element within a certain scope.

getFirstFocusableElementByScope.js

const getFirstFocusableElementByScope = (scope = '') => {
  const focusableSelectors = [
    'button',
    '[href]',
    'input',
    'select',
    'textarea',
    '[tabindex]:not([tabindex="-1"])'
  ]
  .map(x => `${scope} ` + x)
  .join(', ')
  const focusables = document.querySelectorAll(focusableSelectors)
  return focusables[0]
}