I have an modal window that will open when the user press on some button in the process.

I need, for accessibility, that the tab will be trap inside the modal window.

Now , unfortunately, the tab work on all the page.

How can I trap the tab inside the modal?

Demo : https://codesandbox.io/s/jolly-wood-pequk1?file=/src/App.js

The children prop will be two buttons components that I pass dynamically for each page.

import React from 'react'
import E from './Modal.style'

const Modal = (props) => {
  const {
    children,
    modalHeader,
    modalText,
    left,
  } = props

  window.onload = () => {
    const firstAnchor = document.getElementById('dialog-start');
    const lastAnchor = document.getElementById('dialog-end');

    function keydownHandler(e) {
      const evt = e || window.event;
      const keyCode = evt.which || evt.keyCode;
      if (keyCode === 9) { // TAB pressed
        if (evt.preventDefault) evt.preventDefault();
        else evt.returnValue = false;
        firstAnchor.focus();
      }
    }

    if (lastAnchor.addEventListener) lastAnchor.addEventListener('keydown', keydownHandler, false);
    else if (lastAnchor.attachEvent) lastAnchor.attachEvent('onkeydown', keydownHandler);
  }
  return (
    <E.Root left={left}>
      <div className="modal" tabIndex="-1" id="dialog-start">
        <button type="button" className="xButton" onFocus>X</button>
        {modalHeader && <h3>{modalHeader}</h3>}
        {modalText && <span className="modalText">{modalText}</span>}
        <E.ButtonWrapper id="dialog-end">
          {children}
        </E.ButtonWrapper>
      </div>
    </E.Root>
  )
};

export default Modal;