overleaf/services/web/frontend/js/shared/components/accessible-modal.js
Timothée Alby f36269ef0a Merge pull request #3466 from overleaf/ta-accessible-modal
Fix Aria-Hidden Modals

GitOrigin-RevId: bcce61104220ebcf04e9c348d9f3ab84bff8804a
2021-01-06 03:08:14 +00:00

36 lines
1.1 KiB
JavaScript

import React, { 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