Tengo una ventana modal que se abrirá cuando el usuario presione algún botón en el proceso.
Necesito, para accesibilidad, que la pestaña quede atrapada dentro de la ventana modal.
Ahora, desafortunadamente, la pestaña funciona en toda la página.
¿Cómo puedo atrapar la pestaña dentro del modal?
Demostración: https://codesandbox.io/s/jolly-wood-pequk1?file=/src/App.js
El accesorio para niños serán dos componentes de botones que paso dinámicamente para cada página.
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;Si está dispuesto a usar un paquete, entonces este paquete es realmente simple de usar para lograr esto https://www.npmjs.com/package/focus-trap-react
El ejemplo que dan también usa un modal :)
<FocusTrap> <div id="modal-dialog" className="modal" > <button>Ok</button> <button>Cancel</button> </div> </FocusTrap>Así que podrías hacer:
<FocusTrap> <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> </FocusTrap>