 Hey, everybody. What's up? It's Rob Dodson. Welcome back to the Alicast show. Today, I want to talk about how we label custom elements. And when I talk about custom elements, I'm specifically referring to the web component specification that lets you, the developer, create your own custom HTML tags. And custom elements are really cool. They let you make all these awesome components. But it's really important when we do that, that we also make sure we're including all of the accessibility and usability affordances that native elements have. So follow me over here to my laptop, and I want to walk you through a little example. So here I've got some HTML. And right now, I'm just using native elements. So I've got a label tag here, and I've got an input inside of it, just a regular text field. And then down below, I've got another label element. And this time, I'm using the for attribute for the label element to point at the ID for this checkbox control. So let's go see what that looks like in our browser. So we can see renders, as we would expect. Now, the cool thing here is we can actually go and look at our input field. And if we look at the accessibility inspector in the DevTools panel, we can see that the name for the element, the computed accessible name, is username. And that name comes from our label control. And the reason why that name is important is because if someone is using assistive technology, like a screen reader, when they land on that control, that is what the screen reader will announce to them. It'll say username, input text. And another cool benefit that we get from working with the label element is when we click on these controls, it will actually focus them. So if I click on the Join Newsletter thing here, it'll check or uncheck my checkbox. Click on username. It focuses my input field. And that's really useful because we're effectively increasing the touch or the click target size for those elements. So a checkbox can be kind of small. But when it's got a nice big touch target associated with the label, it just makes it easier to interact with. Now let's look at the same example. But this time, we'll use some custom elements. So over here, I will go down and I will uncomment this bitcode here. So here I've got a label tag. And I'm wrapping a how to checkbox. So this how to checkbox, this is just a custom checkbox that I created. And we've got some text next to it which says, click me. So if we look at that in our browser, it renders as we would expect. And we can check or uncheck the checkbox and everything. But let's inspect it in our DevTools. And you'll see that the computed name for this checkbox element is empty. And similarly, when we go and we click on this label field right here, it does not check or uncheck the checkbox, not like the built-in element did. So what's going on here? Well, the native label element really has no way of knowing that a custom element is meant to be an interactive control. We don't have any APIs in the custom element spec that lets an author hook into that behavior. And so that means if you're building a custom element, and you want to label it, you're going to have to do some additional work. Now, since there aren't built-in APIs, the solution that I've landed on is to just go ahead and build my own custom label element that works a lot like the native built-in one, but also knows how to work with other custom controls. So follow me back to my laptop, and I'll show you what I mean by that. So here I've got a little div, and we will uncomment this. And inside of here, you can see that there is a how to label element now, along with our how to checkbox. And so if we go back to Chrome and we see this in action, it renders the same, but the important bit is when we go and inspect our how to checkbox now, we can see that yes, it does now have a computed name coming from that label. And similarly, we can go and we can just click on the label and it will check or uncheck the checkbox, just like the built-in label element. So let's look a little bit at what's going on in our elements panel and sort of see how this works. So looking at our how to label up here, we can see that it auto-generated an ID for itself. And looking at our checkbox, we can see that it's aria-labeled-by attribute has been set, and it's referring back to that auto-generated ID. So under the hood, what how to label is doing is just looking at any children inside of it. It's generating an ID for itself, and it's building this association using aria-labeled-by. Now, if you don't remember how aria-label or aria-labeled-by works, I'll include some links down in the show notes so you can get a refresher there. But basically, it's just a way for an element to point at another control and say, hey, that control over there, that's where I get my accessible name from. And there's other cool things that we can do with a how to check box. So if we scroll down here and look at this example, we can use the for attribute that we had with the built-in label. So we can say for equals foo, and then we can point it at this other label or this other element who has an ID of foo. So it says, give us some money, and we go and we inspect that. Basically the same thing. We can see that we have that as this association. We can see that we have the computed name, clicking or unclicking works. And we can even do some fancier things. So if we wanted to, inside of our label, we might have multiple elements that we're trying to use to style our label, so it looks really fancy. So inside of here, I've got a strong tag and I've got some emphasis tags. And then I've got my check box. And in order to differentiate which of these elements is the one that should be labeled, the how to label element also supports this little attribute. So we say how to label target. We put that on our control, and that tells that how to label element. Hey, that's the thing I should be labeling. So we go and we look at this in Chrome, refresh the page, or save it, and then refresh the page. So now we've got this very fancy label. And then we can still click on this. We get all the same behavior, same name association. Now I'd like to show you how we actually implemented how to label. But to be honest, it's way too much code to fit into just this one episode. So instead, what I want to do is I want to point you at a project that we've been working on called the how to components. You've already seen a few of them in this example. But if you go over to github.com slash Google Chrome slash how to components, we've got a repository here of a number of custom element examples. And the idea behind the how to components is we want to create what we're calling literate code examples. So these are not elements that you should ship into production or anything. Most of them are not even styled. But what we wanted to do was implement common UI patterns and show how to do so in an accessible fashion. So if you look in the elements directory, you will see we've got our check box and accordion and other things like that. I've actually got a pull request right now to add how to label to the set. But you can go through and you can look at the elements. And if you look at their JavaScript files, you'll see that there's heavily, heavily code commented. And that's because we want folks to read these implementations, understand the concepts, and then port those over to their own elements that they're writing. On the repo, you can also see up at the top, there is a link to developers.google.com. So there's actually a section over there where we've extracted a few sort of like exemplary how to elements and done little write ups on them. So here's our check box again. And one of the things that we did, which I think is kind of cool, is we've got sort of side by side the code along with some comments. So you can actually understand very clearly like what we did, why we did it, when we did it, how we did it, things like that. So definitely go check out the how to components on GitHub. And also check out the section on developers.google.com. That about covers it for today. So if you have any questions for me, as always, you can leave them down below in the comments or hit me up on a social network of your choosing. Also, thank you so much for watching. And I'll see you next time.