Transcript from the "Tabtrapping" Lesson
>> Jon Kuperman: So there's this really cool concept, it's like tab trapping or focus trapping, anything like that. So again now that we're all experts at tabbing around on our websites. Going back to my Twitter modal example, so when you're on Twitter.com and you start tabbing, you would start at the navigation.
[00:00:19] But then from a tweet, when you modal you still wanna be able tab around, but we really should restrict you to only being able to tab around in that modal, right? What we don't want is like you tabbing all the way through the back or something like that.
[00:00:53] So say you have a modal that has two input fields and a Submit button. You'd grab the first input field and the Submit button, as your first and your last. And then what you wanna do is you just have keyboard listeners where if they're on the last item and they hit tab, instead of taking them wherever, put it back on the first item, and then vice versa.
[00:01:11] If they're on the first item and they hit Shift-Tab, send them back around. And so basically you're like kinda trapping the user for their own good into this modal so they can tab through and see where they're at. And so, yeah, basically the three steps are grabbing all the focusable children, listening for both tab and shift tab, and then only doing something if they're gonna go off the edge of the modal.
[00:01:35] So if they're gonna go off that edge, send them back around. Cool, so this one, basically, after you have all of the elements, you would do something like this, if o n a key app listener if the current element is the first tab stop and they're going backwards, prevent default and then focus on the last one, is the basic logic of that thing.
[00:01:59] It is really helpful again it's just one of those things, if you're gonna have modals, you really should have, you know some way of allowing keep only users to go through here.