Skip to content

Commit

Permalink
[added] shouldReturnFocusAfterClose to control focus.
Browse files Browse the repository at this point in the history
  • Loading branch information
kloots authored and diasbruno committed Oct 25, 2017
1 parent 400ac13 commit 42d724c
Show file tree
Hide file tree
Showing 3 changed files with 30 additions and 4 deletions.
5 changes: 5 additions & 0 deletions docs/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -84,6 +84,11 @@ import ReactModal from 'react-modal';
Note: By disabling the esc key from closing the modal you may introduce an accessibility issue.
*/
shouldCloseOnEsc={true}
/*
Boolean indicating if the modal should restore focus to the element that
had focus prior to its display.
*/
shouldReturnFocusAfterClose={true}
/*
String indicating the role of the modal, allowing the 'dialog' role to be applied if desired.
*/
Expand Down
2 changes: 2 additions & 0 deletions src/components/Modal.js
Original file line number Diff line number Diff line change
Expand Up @@ -54,6 +54,7 @@ export default class Modal extends Component {
ariaHideApp: PropTypes.bool,
shouldFocusAfterRender: PropTypes.bool,
shouldCloseOnOverlayClick: PropTypes.bool,
shouldReturnFocusAfterClose: PropTypes.bool,
parentSelector: PropTypes.func,
aria: PropTypes.object,
role: PropTypes.string,
Expand All @@ -71,6 +72,7 @@ export default class Modal extends Component {
shouldFocusAfterRender: true,
shouldCloseOnEsc: true,
shouldCloseOnOverlayClick: true,
shouldReturnFocusAfterClose: true,
parentSelector() {
return document.body;
}
Expand Down
27 changes: 23 additions & 4 deletions src/components/ModalPortal.js
Original file line number Diff line number Diff line change
Expand Up @@ -44,6 +44,7 @@ export default class ModalPortal extends Component {
closeTimeoutMS: PropTypes.number,
shouldFocusAfterRender: PropTypes.bool,
shouldCloseOnOverlayClick: PropTypes.bool,
shouldReturnFocusAfterClose: PropTypes.bool,
role: PropTypes.string,
contentLabel: PropTypes.string,
aria: PropTypes.object,
Expand Down Expand Up @@ -137,8 +138,23 @@ export default class ModalPortal extends Component {
afterClose = () => {
// Remove body class
bodyClassList.remove(this.props.bodyOpenClassName);
focusManager.returnFocus();
focusManager.teardownScopedFocus();

if (this.shouldReturnFocus()) {
focusManager.returnFocus();
focusManager.teardownScopedFocus();
}
};

shouldReturnFocus = () => {
// Don't restore focus to the element that had focus prior to
// the modal's display if:
// 1. Focus was never shifted to the modal in the first place
// (shouldFocusAfterRender = false)
// 2. Explicit direction to not restore focus
return (
this.props.shouldFocusAfterRender ||
this.props.shouldReturnFocusAfterClose
);
};

open = () => {
Expand All @@ -147,8 +163,11 @@ export default class ModalPortal extends Component {
clearTimeout(this.closeTimer);
this.setState({ beforeClose: false });
} else {
focusManager.setupScopedFocus(this.node);
focusManager.markForFocusLater();
if (this.shouldReturnFocus()) {
focusManager.setupScopedFocus(this.node);
focusManager.markForFocusLater();
}

this.setState({ isOpen: true }, () => {
this.setState({ afterOpen: true });

Expand Down

0 comments on commit 42d724c

Please sign in to comment.