overleaf/services/web/frontend/js/shared/components/accessible-modal.tsx
ilkin-overleaf 0055858629 Merge pull request #8705 from overleaf/ii-cm6-advanced-references-search-close
[cm6] Prevent the moving of cursor to the top of the document

GitOrigin-RevId: 3cc3c2c260a668f96ff7f6b6f1dcf7edf33ed6c7
2022-07-08 08:05:27 +00:00

31 lines
1 KiB
TypeScript

import { useCallback } from 'react'
import { Modal, ModalProps } from 'react-bootstrap'
// a bootstrap Modal with its `aria-hidden` attribute removed. Visisble modals
// should not have their `aria-hidden` attribute set but that's a bug in our
// version of react-bootstrap.
function AccessibleModal({ show, ...otherProps }: ModalProps) {
// use a callback ref to track the modal. This will re-run the function
// when the element node or any of the dependencies are updated
const setModalRef = useCallback(
element => {
if (!element) return
const modalNode = element._modal && element._modal.modalNode
if (!modalNode) return
if (show) {
modalNode.removeAttribute('aria-hidden')
} else {
modalNode.setAttribute('aria-hidden', 'true')
}
},
// `show` is necessary as a dependency, but eslint thinks it is not
// eslint-disable-next-line react-hooks/exhaustive-deps
[show]
)
return <Modal show={show} {...otherProps} ref={setModalRef} />
}
export default AccessibleModal