Enhancing the HTML Details Element

[00:00:00]
>> Another one came from Zach Leatherman who works on 11ty, details-utils. If you've ever used details element, who's used the details element? It's relatively new. Okay, yeah, so if you've ever used details element, it's maybe the coolest new interactive element in HTML. It's like a free drop-down disclosure.

[00:00:25]
You could do it on a forum like you want to get birthday reminders, and you click it and you drop down, show them the birthday form or whatever. It's very cool. But there's a few problems, or just it lacks some features, or maybe it's more apt to say I want to use this everywhere.

[00:00:44]
I wanna use this in navigations drop-down menus. I wanna use it everywhere, but there's a few features. Adrian Roselli, yeah, this post sort of shook my brain, but Adrian Roselli is a accessibility expert. And he had this post called Details/Summary Are Not [insert control here]. And in the post, he says, they are not an accordion.

[00:01:12]
And I was like, wait, what? [LAUGH] Why is it not an accordion? And I wrote a whole blog post on that. It's not a tab set. And I'm like, well, I may not guess it. It's not menu navigation. Wait a minute, what? And he goes on. He kinda points out, hey, it's kinda just a bad pattern just from accessibility.

[00:01:33]
But purely, they lack the ability to hit Esc on close, right? So if you have a details element and I hit Esc, nothing happens. But if we go to our details-utils, I can wrap it in the details-utils here. And then I can add some behaviors like close to click outside, right?

[00:01:59]
So if I click outside, I have to get my browser real big. Let me go embiggen this again. So if I do this and I click outside, do I have to go bigger? No, let's zoom out, there, I'm bigger, I'm big enough. [LAUGH] I finally made it. So you can close to click outside if it's over 48.

[00:02:22]
And then another feature has close on Esc. So if I open my demo and I hit Esc, it closes. Tada, I now, according to Adrian's post, am safe to use it as a dropdown menu in my main navigation or something like that. That's pretty cool. Zero lines of JavaScript for me.

[00:02:47]
Zach wrote some, but it's probably very minimal JavaScript. Animation, I don't know if you've ever tried to animate the details element, but it's not fun cuz you have to measure the height and then do an animation between a known height and an unknown height. The default details kinda looks like, all right, let's see if I can save this.

[00:03:07]
And the default details kinda looks like this, on, off, on, off. Not very cool, doesn't pass to your designer sensibility. So you put animate on there, and guess what? Now, we are cool, and our boss will give us a raise because we are wowing with surprise and delight.

[00:03:28]
All by just wrapping a details element in sort of the utility element outside of it.