 Hey, folks. Rob here. Welcome to the very first official episode of Ali Casts. Today on the show, what I wanted to do was just kind of like get my hands dirty and start hacking on some real world components to show some accessibility issues and how we can fix them. Over here on my laptop, I've got a little side nav that my teammate Paul Lewis has built over on his show, supercharged. And the side nav, many of you, I'm sure, are familiar with this. You go over and you click on the little hamburger menu and a drawer slides out, and inside of that drawer you've got a bunch of anchors that you can click on to go to different sections of a website. Now, the interesting accessibility issue that this side nav presents, and which I see on a lot of websites, in fact, is particularly around focus and for our keyboard users. So let's look at what happens when I try and tab through this experience. So I hit tab, and my focus is directed to that hamburger menu. And then you would think that since I have this link down here, the next time I press tab, my focus would travel down there into the main content of the page. But what actually happens as we press tab is that focus just seems to sort of disappear, right? And I'm tabbing, and I'm tabbing, and I'm tabbing, and I'm not really seeing anything until it eventually arrives back in our main content. So what's going on there? Well, if you remember, inside of that side nav we had a whole bunch of anchor tags and a button, other sort of focusable things. So focus isn't really disappearing, it's just moving off screen and focusing other elements. The problem with this is if you're a keyboard user or someone who relies on keyboard focus, that can be a pretty confusing experience, especially if there's a complex sidebar with a number of interactive controls off screen. When all you want to do is tab down and start interacting with the main content, it can be pretty frustrating. So there's no real easy way to fix this problem. We could set the drawer to display none, but that will actually cause our animations to jank when we slide the drawer back in. We could try setting tab index negative one on all of the focusable children, and that would kind of work, maybe. Or we could try setting maybe pointer events none, but that's probably not gonna affect our keyboard behavior. So basically we're kind of missing a core primitive in the platform. Some way to take a tree of elements and make all of them inert. So they could still be in the DOM, we could still animate them really fast with transforms, but they wouldn't be keyboard-focasable. Now recently a group of folks have been working on a sort of new part of the HTML spec, a new attribute called inert. And if we go over to GitHub, we can actually see that there is this GitHub repo on the WICG GitHub org for this inert attribute. There's an explainer written by my teammate, Alice Boxhol on why we need inert and why it would benefit developers who are trying to roll accessibility into their apps. And most importantly, there is this awesome little polyfill that we can use to actually start working with inert today in our applications. So that's what I'm gonna do here today. I'm gonna add this inert polyfill to our side nav and see if we can improve the focus experience. So over in GitHub, I'll just grab the raw.js version of inert. I'll switch over to my code editor and I'm gonna create a new file for inert.js and I will just drop that polyfill in there. And then over in my index file, I've already gone ahead and I've got the side nav set up and everything. So the first thing I wanna do is just add in the script tag that includes inert.js. So I'll drop in inert.js as a script at the bottom of the page. And then we need to have the side nav sort of self-apply its inert state. So if we go to our side nav.js inside the constructor for this element, there's a bunch of things going on here. But basically it's just kind of getting itself ready to be interactive, setting up handlers and things like that. So this seems like a good place to go ahead and just say, all right, when this thing first boots up, let's set its inert state to true. So the element is inert. It's initially off-screen. The user's not gonna be able to tab to it or anything. We go over to our browser and refresh the page. We should see now that I can tab to that first hamburger menu. I tab again and my focus moves right into the main content area, right to that click me link, which is what I'd expect. Now we need to un-inert this element when the drawer slides out. So going back to our code editor, we'll drop down into some of these event handlers. We've got one here called show side nav. So if the side nav is showing, we do not want it to be inert. So when that gets set, we'll just go ahead and say, this dot side nav l dot inert equals false. And the flip side to that, when we hide the side nav, we'll set inert back to true. Pretty easy so far. Let's go check that out in our application. So we'll refresh the page. I can tab to the hamburger menu. I can tab down into the main content area. That looks like it's working. I can press enter to open the drawer and I can tab through the interactive elements inside the drawer. I close it. I again tab to the hamburger menu and tab down into the main content area. So pretty easy. We didn't have to do a ton of work to add proper accessibility to this side nav. And the experience for our keyboard users is just a lot better. Now there's a bunch of other topics that I haven't touched on today. I haven't really gone into the core foundation of how focus works and how tab index works and all these other really cool things. I want to save those for some future episodes. But for now, if this seems interesting to you, definitely be sure to go check out that inner polyfill. Go leave some plus ones on the GitHub there to encourage the folks who are working on that. And if you have any questions about the stuff that we showed in this episode today, you can leave us some comments down below. I'll be happy to answer all of those questions. As always, thank you so much for watching. And I'll see you next time.