 Hey there, folks. Rob here. Welcome back to the show. So in the last episode, we were talking a little bit about tab index and how you can add focusability to some of the custom controls that you're working on. I promised in this episode that we would be talking more about tab index, and I'd show you how to build some custom components. But before I get into that, I realized I was getting a little ahead of myself. And I should actually spend a bit more time singing the praises of native HTML. In particular, the humble button element. It's one of those things that I see a lot of developers actually not using in their projects, using alternatives like divs, or maybe even abusing the anchor tag. And so today, what I wanted to do was to show off why, instead of building your own custom button, you should always just use a button. Now, follow me over here to my code editor. And I'm going to walk you through the process of building like a fake button, and then demonstrate why we should stick with the native button. So here, I've got just a div tag. And I'm going to turn this into a sign up button. And one of the things I think a lot of developers feel is that maybe the button element is not super stylable. So they'll drop in their own styles for this div button. We'll give it a class button or something like that. Actually, I'm going to call this fancy, because this is a really fancy looking button. So we'll give this class fancy. So now I've got this very fancy looking sign up button that I've created here. If you remember from the previous episodes, though, one of the most important things for our users to make sure that our controls, our interactive controls at least, are focusable. And as you know, this div, if we go and we try it with our keyboard and we press the Tab key, we're not going to see any sort of focus indicator actually on this element. And again, that's because to the browser, a div semantically is just sort of like a grouping element. There's nothing implicitly interactive about it. And so there's no reason why it should be in a tab order. So if you're creating a fancy div button, you might realize that and say, ah, OK. Well, I saw that last episode that Rob did. So I know that I should maybe add a tab index to this thing. So ah, OK. I'll give it a tab index of 0. Now I can go and I can tab to this button. And sure enough, it is in the focus order. But remember, keyboard focus is not the total story. We've also got our screen reader users out there. So let's see what happens when we try and interact with this control using something like voiceover. Sign up, group. So you saw there that instead of saying sign up button, it said sign up group. Again, because semantically to the browser a div is just sort of like a generic, containing, grouping element type thing. Now we haven't really talked about aria much. But to fix this, we need to add our own role. And now we're starting to kind of get to a point where creating our own custom button has diminishing returns. Let's instead look at what we get when we just use a native button tag. So I'll drop another button in here, just a regular old button element. I'll also write sign up next to this one. I'll say sign up for real, OK. And right away, you can see that we don't have that really cool, beautiful styling that we had on our custom button. But a native button element is totally styleable. So I'm just going to give it that same class of fancy. And then boom, now we have two buttons that look pretty much identical. We can see that they are both in the tab order, which is cool. I didn't have to add anything to my button element. It just sort of like gets that for free. And now let's try this out with a screen reader and see what we get. VoiceOver on Chrome, JS bin, sign up, group, sign up for real button. So you can see there with that second button, it actually announced the proper role to our user. So had they previously just been working with that first thing, they wouldn't really know that it was an interactive control. They might think it's maybe just some text on the page that tells them to sign up. Whereas now we've kind of explicitly told them, hey, this is an action that you can take to sign up for our application. But there are some more reasons why the humble button is pretty awesome. Another one is that we can add our own click handlers to this element. And I want to show you kind of an important distinction that happens here. So I'm going to just drop in a little bit of JavaScript into my page. And what this JavaScript is doing, I'll hide the CSS there, what this JavaScript is doing is it's selecting everything that has the class of fancy. So we have this array of buttons now that have that fancy class. For each of those, we're adding a click event listener. And when we click on the element, it should alert this little message that says, I was clicked. OK, so I'll go click on the first button. You can see it says, I was clicked. Let's go click on the second one. We can see it also says, I was clicked. Well, that makes sense. Now let's try this with our keyboard, though. So typically on a keyboard, pressing the space bar or maybe the inner key in some situations will interact with the control. So let's see what we get here. We will focus the first button and hit space bar. Nothing's happening. Hit Enter. Nothing's happening. Let's go over to that actual, the native button element. We hit space bar. Ah, now we get our alert message. We hit Enter. We get our alert message as well. So this little trick that I'm showing off here in the HTML spec, I believe it's referred to as synthetic click activation. And basically it's a little bit of black magic that the browser does that says, hey, if you have a button element and you add a click handler, I'm just going to assume that you would also like that to run when someone presses the space bar or the inner key. So again, you're not going to get that with a div button. To add that kind of keyboard support, now you're going to have to add key down handlers. You're going to have to look at the key codes and differentiate was that a space bar or an inner key. If so, run my click handler. OK, so now we're really, really getting diminishing returns with that div button. The last thing that I want to show off is the disabled attribute. So it can be really, really handy to just turn a control off sometimes based on the state of your application. So I'll write a little bit of CSS here just so we can see what's going on. So I'll say, hey, anytime anything that is fancy is disabled, then we're just going to set its background to gray. And I'll add that disabled attribute to both of these controls. So we'll say 1, 2. All right, now they both look disabled. But let's see here now. When I go and I click on the sign up button, it's not actually disabled. I'm still seeing that click message running. If I go and I click on sign up for real, nothing's happening. And again, as we saw here, we can see the focus ring is on this control because we added tab index to it. But we really don't want it to be focused right now because it should be disabled. And so you can see I cannot tab to that sign up for real button. The native button has been removed from the focus order because of that attribute. So again, I just wanted to highlight, there's a lot of reasons why you want to use the native controls whenever possible. You're getting a ton of built-in behavior. And you might not realize it until you actually go to use one of these attributes and one of these features. And then notice, oh, shoot, this is not implemented in my button. I'm going to have to add a bunch of JavaScript to make that work. So you see this button. You see this with other controls, like select and input. There's a lot of reasons why whenever possible, you want to stick to the native elements. So that's it for today. If you have any questions, please leave them for me down below in the comments. Or you can always hit me up on a social network of your choosing. As always, thank you so much for watching. And I'll see you next time.