overleaf/services/web/frontend/js/shared/components/accessible-modal.js
Alf Eaton 7c97f8ab6e Switch to new JSX runtime (#4225)
* Use new JSX runtime and update Babel Node target
* Update .eslintrc
* Remove React imports

GitOrigin-RevId: 559de0267f8f2934c56a860ea8701bb522aa861a
2021-06-24 02:06:59 +00:00

36 lines
1.1 KiB
JavaScript

import { useCallback } from 'react'
import PropTypes from 'prop-types'
import { Modal } 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 }) {
// 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} />
}
AccessibleModal.propTypes = {
show: PropTypes.bool,
}
export default AccessibleModal