 Hey there, folks. Rob here. Welcome back to the show. So in the last episode, we were talking about focus and what it means for elements to be implicitly focusable and inserted into the tab order. Now, whenever possible, if you're building a custom control, you'd want to try and use the native elements if you can because you're going to get all that sort of cool focus behavior essentially for free. But I realize there are times when you're building something that is unique and maybe doesn't have a native analog in the browser. So you've got to go kind of off-road and build your own custom control and perhaps add your own keyboard support. Now, to do something like that, the first thing you're going to need to do is make sure that element is focusable. And to do that, we're going to use the tab index attribute. So follow me over here to my editor. What I've done is I've set up a little example here using a few divs and a button element. If you recall from the last episode, the button element is an interactive control. So it's implicitly focusable. It's automatically inserted in the tab order. Whereas those divs, just being generic content containers, there's no reason for them to be in the tab order. And so if we look at our output here, and I go and I press the tab key, you'll see that the only thing that receives focus is the button at the bottom of the page. So let's change this now. Let's imagine that we're trying to make some cool interactive controls out of some of these divs. I'll leave this first one just as is, so it can serve as kind of like a control. But for the second div here, I want to insert it into the natural tab order so the user could reach it using either their tab or their shift tab keys. To do that, I'll give it a tab index value of zero. Now if I go to my output and I press tab, you'll see that focus immediately travels to that first div. And now if I start pressing other keys on my keyboard, those keyboard events will be directed at that element. The other thing to note about tab index zero is that it means that the element is also programmatically focusable. So I could call its focus method in JavaScript or something like that, and that would direct focus to it. That can be useful if you need to send a user to a particular control, perhaps after they complete some action or some event happens on your page. Now for this next div here, I've added the message that it's not going to be in the tab order, but it will still be focusable. So to do that, I'm going to give it a tab index value of negative one. So now you can see here as I press tab, my focus moves to that first element that had the tab index value of zero. I press tab again, and we skip over that element. So it's not in the natural tab order. I can't reach it by pressing the tab key on my keyboard. But I can go down here with this little piece of JavaScript, uncomment it, and now you'll see that focus directed to that element because I'm query selecting it and I'm calling its focus method. So tab index negative one can be useful for situations where maybe you need to manage focus. Perhaps you don't even want it to be interactive, but you just want to move focus somewhere else in the page that the user has an easier, more efficient tabbing experience. Or you can use it when you need to perhaps temporarily disable a custom interactive control. So if you have something that maybe still has to be in the DOM, but maybe needs to be off screen, then you can set it to tab index negative one. And that's actually what that inert polyfill that we were showing in the previous episode does under the hood. It just sets all its children to tab index negative one. Now the last example I want to show here is the ability to set something to a tab index of greater than zero. So for this last div, I'll set it equal to a tab index value of like five or something like that. So I'm going to go and enter output mode in JS bin. Now there's nothing interfering with my tab order. I can press tab, and you'll see that it first focuses that element that has tab index five. I press tab again. It focuses that element that has tab index zero. I press tab again, and then it goes down to that button that was implicitly focusable. So what is going on there? Well, a tab index value of greater than zero means that that element will be jumped ahead of everything else in the natural tab order. The way it works is it starts at the value that is lowest, that is greater than zero, and kind of counts its way up. Why would you want to use this? Well, in general, you actually probably don't want to use this. A tab index value of greater than zero is kind of considered an anti-pattern. And the reason is because if you have a bunch of different components on your page all with different tab index values that are greater than zero, your focus order is just going to kind of bounce around like a pinball. It might not make a lot of sense to your users. Furthermore, for your users who use a screen reader, a screen reader navigates the DOM in a linear fashion. So you really don't have any guarantee that those users are going to necessarily land on those higher tab index controls before something else in the document. So the general best practice, if you want something to be higher in the tab order, you should just move it earlier in the DOM. Now, that about covers it for today. I just wanted to go ahead and sort of set a baseline for how tab index works so that can set us up in the next episode so we can actually start exploring how we can build some custom components that use different tab index design patterns. If you have any questions about what we talked about today, as always, you can leave them for me down in the comments or you can ping me on a social network of your choosing. As always, I'm Rob, and thanks for watching.