From 63cea2c7b17e8675147468af725964dc6b4c6f2d Mon Sep 17 00:00:00 2001 From: Bruno Dias Date: Fri, 9 Feb 2018 10:28:38 -0300 Subject: [PATCH] Release v3.1.13. --- CHANGELOG.md | 6 ++++++ bower.json | 2 +- dist/react-modal.js | 6 ++++-- dist/react-modal.min.js | 2 +- package.json | 2 +- 5 files changed, 13 insertions(+), 5 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index e7e91243..05d9935b 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,9 @@ +v3.1.13 - Fri, 09 Feb 2018 10:27:15 UTC +--------------------------------------- + +- [700a28a](../../commit/700a28a) [fixed] Tab focus escapes modal on shift + tab after opening + + v3.1.12 - Mon, 05 Feb 2018 08:34:57 UTC --------------------------------------- diff --git a/bower.json b/bower.json index 058a0344..74a43fb7 100644 --- a/bower.json +++ b/bower.json @@ -1,6 +1,6 @@ { "name": "react-modal", - "version": "3.1.12", + "version": "3.1.13", "homepage": "https://github.com/reactjs/react-modal", "authors": [ "Ryan Florence", diff --git a/dist/react-modal.js b/dist/react-modal.js index 63dc604b..d85567ab 100644 --- a/dist/react-modal.js +++ b/dist/react-modal.js @@ -1944,9 +1944,11 @@ function scopeTab(node, event) { var head = tabbable[0]; var tail = tabbable[tabbable.length - 1]; - // proceed with default browser behavior + // proceed with default browser behavior on tab. + // Focus on last element on shift + tab. if (node === document.activeElement) { - return; + if (!shiftKey) return; + target = tail; } var target; diff --git a/dist/react-modal.min.js b/dist/react-modal.min.js index ff3dc78b..2c236b2c 100644 --- a/dist/react-modal.min.js +++ b/dist/react-modal.min.js @@ -9,7 +9,7 @@ * * http://api.jqueryui.com/category/ui-core/ */ -var i=/input|select|textarea|button|object/;e.exports=t.default},function(e,t,n){"use strict";function o(e,t){if(!e||!e.length)throw new Error("react-modal: No elements were found for selector "+t+".")}function r(e){var t=e;if("string"==typeof t){var n=document.querySelectorAll(t);o(n,t),t="length"in n?n[0]:n}return p=t||p}function a(e){return!(!e&&!p)||((0,f.default)(!1,["react-modal: App element is not defined.","Please use `Modal.setAppElement(el)` or set `appElement={el}`.","This is needed so screen readers don't see main content","when modal is opened. It is not recommended, but you can opt-out","by setting `ariaHideApp={false}`."].join(" ")),!1)}function u(e){a(e)&&(e||p).setAttribute("aria-hidden","true")}function s(e){a(e)&&(e||p).removeAttribute("aria-hidden")}function i(){p=null}function l(){p=null}Object.defineProperty(t,"__esModule",{value:!0}),t.assertNodeList=o,t.setElement=r,t.validateElement=a,t.hide=u,t.show=s,t.documentNotReadyOrSSRTesting=i,t.resetForTesting=l;var c=n(18),f=function(e){return e&&e.__esModule?e:{default:e}}(c),p=null},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.canUseDOM=void 0;var o=n(20),r=function(e){return e&&e.__esModule?e:{default:e}}(o),a=r.default,u=a.canUseDOM?window.HTMLElement:{};t.canUseDOM=a.canUseDOM;t.default=u},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var o=n(10),r=function(e){return e&&e.__esModule?e:{default:e}}(o);t.default=r.default,e.exports=t.default},function(e,t,n){"use strict";function o(e){return e&&e.__esModule?e:{default:e}}function r(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function a(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function u(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}function s(e){return e()}Object.defineProperty(t,"__esModule",{value:!0}),t.bodyOpenClassName=t.portalClassName=void 0;var i=Object.assign||function(e){for(var t=1;t0&&0===(j-=1)&&C.show(t),n.props.shouldFocusAfterRender&&(n.props.shouldReturnFocusAfterClose?(v.returnFocus(),v.teardownScopedFocus()):v.popWithoutFocus())},n.open=function(){n.beforeOpen(),n.state.afterOpen&&n.state.beforeClose?(clearTimeout(n.closeTimer),n.setState({beforeClose:!1})):(n.props.shouldFocusAfterRender&&(v.setupScopedFocus(n.node),v.markForFocusLater()),n.setState({isOpen:!0},function(){n.setState({afterOpen:!0}),n.props.isOpen&&n.props.onAfterOpen&&n.props.onAfterOpen()}))},n.close=function(){n.props.closeTimeoutMS>0?n.closeWithTimeout():n.closeWithoutTimeout()},n.focusContent=function(){return n.content&&!n.contentHasFocus()&&n.content.focus()},n.closeWithTimeout=function(){var e=Date.now()+n.props.closeTimeoutMS;n.setState({beforeClose:!0,closesAt:e},function(){n.closeTimer=setTimeout(n.closeWithoutTimeout,n.state.closesAt-Date.now())})},n.closeWithoutTimeout=function(){n.setState({beforeClose:!1,isOpen:!1,afterOpen:!1,closesAt:null},n.afterClose)},n.handleKeyDown=function(e){e.keyCode===_&&(0,b.default)(n.content,e),n.props.shouldCloseOnEsc&&e.keyCode===P&&(e.stopPropagation(),n.requestClose(e))},n.handleOverlayOnClick=function(e){null===n.shouldClose&&(n.shouldClose=!0),n.shouldClose&&n.props.shouldCloseOnOverlayClick&&(n.ownerHandlesClose()?n.requestClose(e):n.focusContent()),n.shouldClose=null,n.moveFromContentToOverlay=null},n.handleOverlayOnMouseUp=function(){null===n.moveFromContentToOverlay&&(n.shouldClose=!1),n.props.shouldCloseOnOverlayClick&&(n.shouldClose=!0)},n.handleContentOnMouseUp=function(){n.shouldClose=!1},n.handleOverlayOnMouseDown=function(e){n.props.shouldCloseOnOverlayClick||e.target!=n.overlay||e.preventDefault(),n.moveFromContentToOverlay=!1},n.handleContentOnClick=function(){n.shouldClose=!1},n.handleContentOnMouseDown=function(){n.shouldClose=!1,n.moveFromContentToOverlay=!1},n.requestClose=function(e){return n.ownerHandlesClose()&&n.props.onRequestClose(e)},n.ownerHandlesClose=function(){return n.props.onRequestClose},n.shouldBeClosed=function(){return!n.state.isOpen&&!n.state.beforeClose},n.contentHasFocus=function(){return document.activeElement===n.content||n.content.contains(document.activeElement)},n.buildClassName=function(e,t){var o="object"===(void 0===t?"undefined":l(t))?t:{base:T[e],afterOpen:T[e]+"--after-open",beforeClose:T[e]+"--before-close"},r=o.base;return n.state.afterOpen&&(r=r+" "+o.afterOpen),n.state.beforeClose&&(r=r+" "+o.beforeClose),"string"==typeof t&&t?r+" "+t:r},n.ariaAttributes=function(e){return Object.keys(e).reduce(function(t,n){return t["aria-"+n]=e[n],t},{})},n.state={afterOpen:!1,beforeClose:!1},n.shouldClose=null,n.moveFromContentToOverlay=null,n}return s(t,e),c(t,[{key:"componentDidMount",value:function(){this.props.isOpen&&(this.setFocusAfterRender(!0),this.open())}},{key:"componentWillReceiveProps",value:function(e){e.bodyOpenClassName!==this.props.bodyOpenClassName&&console.warn('React-Modal: "bodyOpenClassName" prop has been modified. This may cause unexpected behavior when multiple modals are open.'),!this.props.isOpen&&e.isOpen?(this.setFocusAfterRender(!0),this.open()):this.props.isOpen&&!e.isOpen&&this.close()}},{key:"componentDidUpdate",value:function(){this.focusAfterRender&&(this.focusContent(),this.setFocusAfterRender(!1))}},{key:"componentWillUnmount",value:function(){this.afterClose(),clearTimeout(this.closeTimer)}},{key:"beforeOpen",value:function(){var e=this.props,t=e.appElement,n=e.ariaHideApp,o=e.bodyOpenClassName;w.add(o),n&&(j+=1,C.hide(t))}},{key:"render",value:function(){var e=this.props,t=e.className,n=e.overlayClassName,o=e.defaultStyles,r=t?{}:o.content,a=n?{}:o.overlay;return this.shouldBeClosed()?null:p.default.createElement("div",{ref:this.setOverlayRef,className:this.buildClassName("overlay",n),style:i({},a,this.props.style.overlay),onClick:this.handleOverlayOnClick,onMouseDown:this.handleOverlayOnMouseDown,onMouseUp:this.handleOverlayOnMouseUp,"aria-modal":"true"},p.default.createElement("div",i({ref:this.setContentRef,style:i({},r,this.props.style.content),className:this.buildClassName("content",t),tabIndex:"-1",onKeyDown:this.handleKeyDown,onMouseDown:this.handleContentOnMouseDown,onMouseUp:this.handleContentOnMouseUp,onClick:this.handleContentOnClick,role:this.props.role,"aria-label":this.props.contentLabel},this.ariaAttributes(this.props.aria||{})),this.props.children))}}]),t}(f.Component);M.defaultProps={style:{overlay:{},content:{}}},M.propTypes={isOpen:y.default.bool.isRequired,defaultStyles:y.default.shape({content:y.default.object,overlay:y.default.object}),style:y.default.shape({content:y.default.object,overlay:y.default.object}),className:y.default.oneOfType([y.default.string,y.default.object]),overlayClassName:y.default.oneOfType([y.default.string,y.default.object]),bodyOpenClassName:y.default.string,ariaHideApp:y.default.bool,appElement:y.default.instanceOf(E.default),onAfterOpen:y.default.func,onRequestClose:y.default.func,closeTimeoutMS:y.default.number,shouldFocusAfterRender:y.default.bool,shouldCloseOnOverlayClick:y.default.bool,shouldReturnFocusAfterClose:y.default.bool,role:y.default.string,contentLabel:y.default.string,aria:y.default.object,children:y.default.node,shouldCloseOnEsc:y.default.bool},t.default=M,e.exports=t.default},function(e,t,n){"use strict";function o(){y=!0}function r(){if(y){if(y=!1,!d)return;setTimeout(function(){if(!d.contains(document.activeElement)){((0,f.default)(d)[0]||d).focus()}},0)}}function a(){p.push(document.activeElement)}function u(){var e=null;try{return void(0!==p.length&&(e=p.pop(),e.focus()))}catch(t){console.warn(["You tried to return focus to",e,"but it is not in the DOM anymore"].join(" "))}}function s(){p.length>0&&p.pop()}function i(e){d=e,window.addEventListener?(window.addEventListener("blur",o,!1),document.addEventListener("focus",r,!0)):(window.attachEvent("onBlur",o),document.attachEvent("onFocus",r))}function l(){d=null,window.addEventListener?(window.removeEventListener("blur",o),document.removeEventListener("focus",r)):(window.detachEvent("onBlur",o),document.detachEvent("onFocus",r))}Object.defineProperty(t,"__esModule",{value:!0}),t.handleBlur=o,t.handleFocus=r,t.markForFocusLater=a,t.returnFocus=u,t.popWithoutFocus=s,t.setupScopedFocus=i,t.teardownScopedFocus=l;var c=n(6),f=function(e){return e&&e.__esModule?e:{default:e}}(c),p=[],d=null,y=!1},function(e,t,n){"use strict";function o(e,t){var n=(0,a.default)(e);if(!n.length)return void t.preventDefault();var o=t.shiftKey,r=n[0],u=n[n.length-1];if(e!==document.activeElement){var s;if(u!==document.activeElement||o||(s=r),r===document.activeElement&&o&&(s=u),s)return t.preventDefault(),void s.focus();var i=/(\bChrome\b|\bSafari\b)\//.exec(navigator.userAgent);if(null!=i&&"Chrome"!=i[1]&&null==/\biPod\b|\biPad\b/g.exec(navigator.userAgent)){var l=n.indexOf(document.activeElement);l>-1&&(l+=o?-1:1),t.preventDefault(),n[l].focus()}}}Object.defineProperty(t,"__esModule",{value:!0}),t.default=o;var r=n(6),a=function(e){return e&&e.__esModule?e:{default:e}}(r);e.exports=t.default},function(e,t,n){"use strict";var o=function(){};o=function(e,t,n){var o=arguments.length;n=new Array(o>2?o-2:0);for(var r=2;r0&&0===(j-=1)&&C.show(t),n.props.shouldFocusAfterRender&&(n.props.shouldReturnFocusAfterClose?(v.returnFocus(),v.teardownScopedFocus()):v.popWithoutFocus())},n.open=function(){n.beforeOpen(),n.state.afterOpen&&n.state.beforeClose?(clearTimeout(n.closeTimer),n.setState({beforeClose:!1})):(n.props.shouldFocusAfterRender&&(v.setupScopedFocus(n.node),v.markForFocusLater()),n.setState({isOpen:!0},function(){n.setState({afterOpen:!0}),n.props.isOpen&&n.props.onAfterOpen&&n.props.onAfterOpen()}))},n.close=function(){n.props.closeTimeoutMS>0?n.closeWithTimeout():n.closeWithoutTimeout()},n.focusContent=function(){return n.content&&!n.contentHasFocus()&&n.content.focus()},n.closeWithTimeout=function(){var e=Date.now()+n.props.closeTimeoutMS;n.setState({beforeClose:!0,closesAt:e},function(){n.closeTimer=setTimeout(n.closeWithoutTimeout,n.state.closesAt-Date.now())})},n.closeWithoutTimeout=function(){n.setState({beforeClose:!1,isOpen:!1,afterOpen:!1,closesAt:null},n.afterClose)},n.handleKeyDown=function(e){e.keyCode===_&&(0,b.default)(n.content,e),n.props.shouldCloseOnEsc&&e.keyCode===P&&(e.stopPropagation(),n.requestClose(e))},n.handleOverlayOnClick=function(e){null===n.shouldClose&&(n.shouldClose=!0),n.shouldClose&&n.props.shouldCloseOnOverlayClick&&(n.ownerHandlesClose()?n.requestClose(e):n.focusContent()),n.shouldClose=null,n.moveFromContentToOverlay=null},n.handleOverlayOnMouseUp=function(){null===n.moveFromContentToOverlay&&(n.shouldClose=!1),n.props.shouldCloseOnOverlayClick&&(n.shouldClose=!0)},n.handleContentOnMouseUp=function(){n.shouldClose=!1},n.handleOverlayOnMouseDown=function(e){n.props.shouldCloseOnOverlayClick||e.target!=n.overlay||e.preventDefault(),n.moveFromContentToOverlay=!1},n.handleContentOnClick=function(){n.shouldClose=!1},n.handleContentOnMouseDown=function(){n.shouldClose=!1,n.moveFromContentToOverlay=!1},n.requestClose=function(e){return n.ownerHandlesClose()&&n.props.onRequestClose(e)},n.ownerHandlesClose=function(){return n.props.onRequestClose},n.shouldBeClosed=function(){return!n.state.isOpen&&!n.state.beforeClose},n.contentHasFocus=function(){return document.activeElement===n.content||n.content.contains(document.activeElement)},n.buildClassName=function(e,t){var o="object"===(void 0===t?"undefined":l(t))?t:{base:T[e],afterOpen:T[e]+"--after-open",beforeClose:T[e]+"--before-close"},r=o.base;return n.state.afterOpen&&(r=r+" "+o.afterOpen),n.state.beforeClose&&(r=r+" "+o.beforeClose),"string"==typeof t&&t?r+" "+t:r},n.ariaAttributes=function(e){return Object.keys(e).reduce(function(t,n){return t["aria-"+n]=e[n],t},{})},n.state={afterOpen:!1,beforeClose:!1},n.shouldClose=null,n.moveFromContentToOverlay=null,n}return s(t,e),c(t,[{key:"componentDidMount",value:function(){this.props.isOpen&&(this.setFocusAfterRender(!0),this.open())}},{key:"componentWillReceiveProps",value:function(e){e.bodyOpenClassName!==this.props.bodyOpenClassName&&console.warn('React-Modal: "bodyOpenClassName" prop has been modified. This may cause unexpected behavior when multiple modals are open.'),!this.props.isOpen&&e.isOpen?(this.setFocusAfterRender(!0),this.open()):this.props.isOpen&&!e.isOpen&&this.close()}},{key:"componentDidUpdate",value:function(){this.focusAfterRender&&(this.focusContent(),this.setFocusAfterRender(!1))}},{key:"componentWillUnmount",value:function(){this.afterClose(),clearTimeout(this.closeTimer)}},{key:"beforeOpen",value:function(){var e=this.props,t=e.appElement,n=e.ariaHideApp,o=e.bodyOpenClassName;w.add(o),n&&(j+=1,C.hide(t))}},{key:"render",value:function(){var e=this.props,t=e.className,n=e.overlayClassName,o=e.defaultStyles,r=t?{}:o.content,a=n?{}:o.overlay;return this.shouldBeClosed()?null:p.default.createElement("div",{ref:this.setOverlayRef,className:this.buildClassName("overlay",n),style:i({},a,this.props.style.overlay),onClick:this.handleOverlayOnClick,onMouseDown:this.handleOverlayOnMouseDown,onMouseUp:this.handleOverlayOnMouseUp,"aria-modal":"true"},p.default.createElement("div",i({ref:this.setContentRef,style:i({},r,this.props.style.content),className:this.buildClassName("content",t),tabIndex:"-1",onKeyDown:this.handleKeyDown,onMouseDown:this.handleContentOnMouseDown,onMouseUp:this.handleContentOnMouseUp,onClick:this.handleContentOnClick,role:this.props.role,"aria-label":this.props.contentLabel},this.ariaAttributes(this.props.aria||{})),this.props.children))}}]),t}(f.Component);M.defaultProps={style:{overlay:{},content:{}}},M.propTypes={isOpen:y.default.bool.isRequired,defaultStyles:y.default.shape({content:y.default.object,overlay:y.default.object}),style:y.default.shape({content:y.default.object,overlay:y.default.object}),className:y.default.oneOfType([y.default.string,y.default.object]),overlayClassName:y.default.oneOfType([y.default.string,y.default.object]),bodyOpenClassName:y.default.string,ariaHideApp:y.default.bool,appElement:y.default.instanceOf(E.default),onAfterOpen:y.default.func,onRequestClose:y.default.func,closeTimeoutMS:y.default.number,shouldFocusAfterRender:y.default.bool,shouldCloseOnOverlayClick:y.default.bool,shouldReturnFocusAfterClose:y.default.bool,role:y.default.string,contentLabel:y.default.string,aria:y.default.object,children:y.default.node,shouldCloseOnEsc:y.default.bool},t.default=M,e.exports=t.default},function(e,t,n){"use strict";function o(){y=!0}function r(){if(y){if(y=!1,!d)return;setTimeout(function(){if(!d.contains(document.activeElement)){((0,f.default)(d)[0]||d).focus()}},0)}}function a(){p.push(document.activeElement)}function u(){var e=null;try{return void(0!==p.length&&(e=p.pop(),e.focus()))}catch(t){console.warn(["You tried to return focus to",e,"but it is not in the DOM anymore"].join(" "))}}function s(){p.length>0&&p.pop()}function i(e){d=e,window.addEventListener?(window.addEventListener("blur",o,!1),document.addEventListener("focus",r,!0)):(window.attachEvent("onBlur",o),document.attachEvent("onFocus",r))}function l(){d=null,window.addEventListener?(window.removeEventListener("blur",o),document.removeEventListener("focus",r)):(window.detachEvent("onBlur",o),document.detachEvent("onFocus",r))}Object.defineProperty(t,"__esModule",{value:!0}),t.handleBlur=o,t.handleFocus=r,t.markForFocusLater=a,t.returnFocus=u,t.popWithoutFocus=s,t.setupScopedFocus=i,t.teardownScopedFocus=l;var c=n(6),f=function(e){return e&&e.__esModule?e:{default:e}}(c),p=[],d=null,y=!1},function(e,t,n){"use strict";function o(e,t){var n=(0,a.default)(e);if(!n.length)return void t.preventDefault();var o=t.shiftKey,r=n[0],u=n[n.length-1];if(e===document.activeElement){if(!o)return;s=u}var s;if(u!==document.activeElement||o||(s=r),r===document.activeElement&&o&&(s=u),s)return t.preventDefault(),void s.focus();var i=/(\bChrome\b|\bSafari\b)\//.exec(navigator.userAgent);if(null!=i&&"Chrome"!=i[1]&&null==/\biPod\b|\biPad\b/g.exec(navigator.userAgent)){var l=n.indexOf(document.activeElement);l>-1&&(l+=o?-1:1),t.preventDefault(),n[l].focus()}}Object.defineProperty(t,"__esModule",{value:!0}),t.default=o;var r=n(6),a=function(e){return e&&e.__esModule?e:{default:e}}(r);e.exports=t.default},function(e,t,n){"use strict";var o=function(){};o=function(e,t,n){var o=arguments.length;n=new Array(o>2?o-2:0);for(var r=2;r