diff --git a/js/foundation.reveal.js b/js/foundation.reveal.js index 87ed493bf9..c86d24bcc5 100644 --- a/js/foundation.reveal.js +++ b/js/foundation.reveal.js @@ -274,10 +274,12 @@ if(_this.options.overlay){ Foundation.Motion.animateIn(_this.$overlay, 'fade-in', function(){ Foundation.Motion.animateIn(_this.$element, _this.options.animationIn, function(){ + _this.focusableElements = Foundation.Keyboard.findFocusable(_this.$element); }); }); }else{ Foundation.Motion.animateIn(_this.$element, _this.options.animationIn, function(){ + _this.focusableElements = Foundation.Keyboard.findFocusable(_this.$element); }); } }else{ @@ -316,10 +318,7 @@ */ Reveal.prototype._extraHandlers = function(){ var _this = this; - var visibleFocusableElements = this.$element.find('a[href], area[href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), iframe, object, embed, *[tabindex], *[contenteditable]').filter(function() { - if (!$(this).is(':visible') || $(this).attr('tabindex') < 0){ return false; }//only have visible elements and those that have a tabindex greater or equal 0 - return true; - }); + this.focusableElements = Foundation.Keyboard.findFocusable(this.$element); if(!this.options.overlay && this.options.closeOnClick && !this.options.fullScreen){ $('body').on('click.zf.reveal', function(e){ @@ -329,16 +328,17 @@ } if(this.options.closeOnEsc){ $(window).on('keydown.zf.reveal', function(e){ - if (visibleFocusableElements.length === 0) { // no focusable elements inside the modal at all, prevent tabbing in general - e.preventDefault(); - } Foundation.Keyboard.handleKey(e, _this, { close: function() { if (this.options.closeOnEsc) { this.close(); + this.$anchor.focus(); } } }); + if (_this.focusableElements.length === 0) { // no focusable elements inside the modal at all, prevent tabbing in general + e.preventDefault(); + } }); } @@ -348,31 +348,33 @@ // handle keyboard event with keyboard util Foundation.Keyboard.handleKey(e, _this, { tab_forward: function() { - if (this.$element.find(':focus').is(visibleFocusableElements.eq(-1))) { // left modal downwards, setting focus to first element - visibleFocusableElements.eq(0).focus(); + if (this.$element.find(':focus').is(_this.focusableElements.eq(-1))) { // left modal downwards, setting focus to first element + _this.focusableElements.eq(0).focus(); e.preventDefault(); } }, tab_backward: function() { - if (this.$element.find(':focus').is(visibleFocusableElements.eq(0)) || this.$element.is(':focus')) { // left modal upwards, setting focus to last element - visibleFocusableElements.eq(-1).focus(); + if (this.$element.find(':focus').is(_this.focusableElements.eq(0)) || this.$element.is(':focus')) { // left modal upwards, setting focus to last element + _this.focusableElements.eq(-1).focus(); e.preventDefault(); } }, open: function() { - if ($target.is(visibleFocusableElements)) { // dont't trigger if acual element has focus (i.e. inputs, links, ...) + if (_this.$element.find(':focus').is(_this.$element.find('[data-close]'))) { + setTimeout(function() { // set focus back to anchor if close button has been activated + _this.$anchor.focus(); + }, 1); + } else if ($target.is(_this.focusableElements)) { // dont't trigger if acual element has focus (i.e. inputs, links, ...) this.open(); } }, close: function() { if (this.options.closeOnEsc) { this.close(); + this.$anchor.focus(); } } }); - if (visibleFocusableElements.length === 0) { // no focusable elements inside the modal at all, prevent tabbing in general - e.preventDefault(); - } }); };