@material-ui/core
Version:
React components that implement Google's Material Design.
213 lines (181 loc) • 6.63 kB
JavaScript
/* eslint-disable consistent-return, jsx-a11y/no-noninteractive-tabindex */
import React from 'react';
import ReactDOM from 'react-dom';
import PropTypes from 'prop-types';
import warning from 'warning';
import ownerDocument from '../utils/ownerDocument';
import { useForkRef } from '../utils/reactHelpers';
/**
* @ignore - internal component.
*/
function TrapFocus(props) {
const {
children,
disableAutoFocus = false,
disableEnforceFocus = false,
disableRestoreFocus = false,
getDoc,
isEnabled,
open
} = props;
const ignoreNextEnforceFocus = React.useRef();
const sentinelStart = React.useRef(null);
const sentinelEnd = React.useRef(null);
const nodeToRestore = React.useRef();
const rootRef = React.useRef(null); // can be removed once we drop support for non ref forwarding class components
const handleOwnRef = React.useCallback(instance => {
// #StrictMode ready
rootRef.current = ReactDOM.findDOMNode(instance);
}, []);
const handleRef = useForkRef(children.ref, handleOwnRef); // ⚠️ You may rely on React.useMemo as a performance optimization, not as a semantic guarantee.
// https://reactjs.org/docs/hooks-reference.html#usememo
React.useMemo(() => {
if (!open) {
return;
}
nodeToRestore.current = getDoc().activeElement;
}, [open]); // eslint-disable-line react-hooks/exhaustive-deps
React.useEffect(() => {
if (!open) {
return;
}
const doc = ownerDocument(rootRef.current); // We might render an empty child.
if (!disableAutoFocus && rootRef.current && !rootRef.current.contains(doc.activeElement)) {
if (!rootRef.current.hasAttribute('tabIndex')) {
process.env.NODE_ENV !== "production" ? warning(false, ['Material-UI: the modal content node does not accept focus.', 'For the benefit of assistive technologies, ' + 'the tabIndex of the node is being set to "-1".'].join('\n')) : void 0;
rootRef.current.setAttribute('tabIndex', -1);
}
rootRef.current.focus();
}
const contain = () => {
if (disableEnforceFocus || !isEnabled() || ignoreNextEnforceFocus.current) {
ignoreNextEnforceFocus.current = false;
return;
}
if (rootRef.current && !rootRef.current.contains(doc.activeElement)) {
rootRef.current.focus();
}
};
const loopFocus = event => {
// 9 = Tab
if (disableEnforceFocus || !isEnabled() || event.keyCode !== 9) {
return;
} // Make sure the next tab starts from the right place.
if (doc.activeElement === rootRef.current) {
// We need to ignore the next contain as
// it will try to move the focus back to the rootRef element.
ignoreNextEnforceFocus.current = true;
if (event.shiftKey) {
sentinelEnd.current.focus();
} else {
sentinelStart.current.focus();
}
}
};
doc.addEventListener('focus', contain, true);
doc.addEventListener('keydown', loopFocus, true); // With Edge, Safari and Firefox, no focus related events are fired when the focused area stops being a focused area
// e.g. https://bugzilla.mozilla.org/show_bug.cgi?id=559561.
//
// The whatwg spec defines how the browser should behave but does not explicitly mention any events:
// https://html.spec.whatwg.org/multipage/interaction.html#focus-fixup-rule.
const interval = setInterval(() => {
contain();
}, 50);
return () => {
clearInterval(interval);
doc.removeEventListener('focus', contain, true);
doc.removeEventListener('keydown', loopFocus, true); // restoreLastFocus()
if (!disableRestoreFocus) {
// In IE 11 it is possible for document.activeElement to be null resulting
// in nodeToRestore.current being null.
// Not all elements in IE 11 have a focus method.
// Once IE 11 support is dropped the focus() call can be unconditional.
if (nodeToRestore.current && nodeToRestore.current.focus) {
nodeToRestore.current.focus();
}
nodeToRestore.current = null;
}
};
}, [disableAutoFocus, disableEnforceFocus, disableRestoreFocus, isEnabled, open]);
return React.createElement(React.Fragment, null, React.createElement("div", {
tabIndex: 0,
ref: sentinelStart,
"data-test": "sentinelStart"
}), React.cloneElement(children, {
ref: handleRef
}), React.createElement("div", {
tabIndex: 0,
ref: sentinelEnd,
"data-test": "sentinelEnd"
}));
}
process.env.NODE_ENV !== "production" ? TrapFocus.propTypes = {
/**
* A single child content element.
*/
children: PropTypes.element.isRequired,
/**
* If `true`, the modal will not automatically shift focus to itself when it opens, and
* replace it to the last focused element when it closes.
* This also works correctly with any modal children that have the `disableAutoFocus` prop.
*
* Generally this should never be set to `true` as it makes the modal less
* accessible to assistive technologies, like screen readers.
*/
disableAutoFocus: PropTypes.bool,
/**
* If `true`, the modal will not prevent focus from leaving the modal while open.
*
* Generally this should never be set to `true` as it makes the modal less
* accessible to assistive technologies, like screen readers.
*/
disableEnforceFocus: PropTypes.bool,
/**
* If `true`, the modal will not restore focus to previously focused element once
* modal is hidden.
*/
disableRestoreFocus: PropTypes.bool,
/**
* Return the document to consider.
* We use it to implement the restore focus between different browser documents.
*/
getDoc: PropTypes.func.isRequired,
/**
* Do we still want to enforce the focus?
* This prop helps nesting TrapFocus elements.
*/
isEnabled: PropTypes.func.isRequired,
/**
* If `true`, the modal is open.
*/
open: PropTypes.bool.isRequired
} : void 0;
/*
In the future, we should be able to replace TrapFocus with:
https://github.com/facebook/react/blob/master/packages/react-events/docs/FocusScope.md
```jsx
import FocusScope from 'react-dom/FocusScope';
function TrapFocus(props) {
const {
children
disableAutoFocus = false,
disableEnforceFocus = false,
disableRestoreFocus = false,
open,
} = props;
if (!open) {
return children;
}
return (
<FocusScope
autoFocus={!disableAutoFocus}
contain={!disableEnforceFocus}
restoreFocus={!disableRestoreFocus}
>
{children}
</FocusScope>
);
}
```
*/
export default TrapFocus;