Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Fixed reveal #7341

Merged
merged 2 commits into from
Dec 1, 2015
Merged

Fixed reveal #7341

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
65961a0
Fixed interaction with key events and animated modals caused by the f…
Owlbertz Dec 1, 2015
15d7156
Focus is now shifted back to the anchor when modal is closed using th…
Owlbertz Dec 1, 2015
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
32 changes: 17 additions & 15 deletions js/foundation.reveal.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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{
Expand Down Expand Up @@ -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){
Expand All @@ -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();
}
});
}

Expand All @@ -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();
}
});

};
Expand Down