Git Product home page Git Product logo

Comments (1)

dotherightthing avatar dotherightthing commented on June 24, 2024

Modaal/source/js/modaal.js

Lines 209 to 259 in 68a5abc

// Body keydown
self.dom.on('keydown.Modaal', function(e) {
var key = e.keyCode;
var target = e.target;
// look for tab change and reset focus to modal window
// done in keydown so the check fires repeatedly when you hold the tab key down
if (key == 9 && self.scope.is_open) {
if (!$.contains(document.getElementById(self.scope.id), target) ) {
$('#' + self.scope.id).find('*[tabindex="0"]').focus();
}
}
});
// Body keyup
self.dom.on('keyup.Modaal', function(e) {
var key = e.keyCode;
var target = e.target;
if ( (e.shiftKey && e.keyCode == 9) && self.scope.is_open) {
// Watch for shift + tab key press. if open shift focus to close button.
if (!$.contains(document.getElementById(self.scope.id), target) ) {
$('#' + self.scope.id).find('.modaal-close').focus();
}
}
if ( !self.options.is_locked ){
// On escape key press close modal
if (key == 27 && self.scope.is_open ) {
if ( $(document.activeElement).is('input:not(:checkbox):not(:radio)') ) {
return false;
}
self.modaal_close();
return;
}
}
// is gallery open and images length is > 1
if ( self.options.type == 'image' ) {
// arrow left for back
if (key == 37 && self.scope.is_open && (!$('#' + self.scope.id + ' .modaal-gallery-prev').hasClass('is_hidden')) ) {
self.gallery_update('prev');
}
// arrow right for next
if (key == 39 && self.scope.is_open && (!$('#' + self.scope.id + ' .modaal-gallery-next').hasClass('is_hidden')) ) {
self.gallery_update('next');
}
return;
}
});
watch_events() appears to handle this already. However when I test this, the focus is still 'lost' for a couple of tab presses. One of these is a top-of-page skip link. I'm unsure if this is a problem with our codebase or not.

from modaal.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.