viewSource

## [00:00:00] Introduction

[00:00:00] **Aurooba Ahmed:** You are listening to viewSource, a conversation around tech, web development, and WordPress with hosts Aurooba Ahmed, that's me and Brian Coords.

[00:00:11] **Brian Coords:** Aurooba, how are we doing today?

[00:00:13] **Aurooba Ahmed:** I'm doing pretty good. How are you?

## [00:00:15] The importance of accessibility

[00:00:15] **Brian Coords:** I am excited to talk about accessibility today. How about you?

[00:00:19] **Aurooba Ahmed:** Me too. I feel like accessibility is one of those things that even though everyone talks about how important it is, we don't actually talk about the details of what we need to know and understand and do in order to actually make accessibility happen. So I'm really excited for this discussion today.

[00:00:38] **Brian Coords:** Yeah, and I've been working on some projects where we're taking older code and like making sure it's accessible and things that were built, you know, even just a handful of years ago, you look at and you go like, oh, this just wouldn't fly today. And that's, that's a really good thing. It's such a, it's such a difference from where I think the industry was like five years ago.

[00:00:57] **Aurooba Ahmed:** Definitely. I think [00:01:00] accessibility is far more accepted as this core piece of working and creating on the web and the fact that it took us this long to get here is a little bit sad, but at least we are here now and it's gaining steam and uh, you know, we're taking it a lot more seriously and I'm really excited because it's one of those things that I'm still like working to learn as well.

[00:01:22] You know, like I wouldn't say that I have a perfect handle on it.

[00:01:26] **Brian Coords:** Yeah, I would say there's like two things. One is like understanding why access, like why the choices are being made, the way they're being made. And then the second part is like just the technical specs of, you know, making sure really your HTML most of all is like super accessible. So there's like the technical knowledge, but like first there's kind of just the understanding of like, what are you trying to accomplish?

[00:01:49] What is the goal here? What. What sorts of things should you be thinking about as you are, as you're building out your code.

[00:01:57] **Aurooba Ahmed:** Yeah, and I feel like a part of learning about [00:02:00] accessibility is almost like a re-education process around the purpose of different HTML elements, because maybe in the way that the web and website making has evolved over time, sometimes we use the wrong elements and don't think about what those elements were actually meant for, and if we just use them for the things that they were supposed to be used for, we would already be making such strides towards accessibility, you know?

[00:02:26] **Brian Coords:** Yeah, and I think it's really good that this is gonna be mostly a focus on HTML, but we're in the middle of a series on React. So like, it's a good reminder that like your React really has to have good semantic HTML at its core because that's what your end user's really gonna interact with. And so, you know, unless that happens, unless that knowledge and education is there, it's, it's, you know, all the JavaScript in the world won't save you from, you know, especially with all of us who love using JavaScript to make super interactive, fun things online.

[00:02:58] **Aurooba Ahmed:** Yeah, totally. And I mean, I'm [00:03:00] really excited that, in this process of looking at React inside WordPress and then, you know, eventually growing into making an accordion block for the WordPress block editor, we are just, you know, baking accessibility into it from the beginning and not taking it as sort of an afterthought.

[00:03:17] So yeah, I'm looking forward to how we, how we look do that, you know, let's dive into that code.

## [00:03:25] The different considerations of making something accessible

[00:03:25] **Brian Coords:** Yeah. I wanted to take a step back first though, and I just wanna talk about when we're thinking about accessibility, what you're like, what you're thinking about is how is a user interacting with a website and there's really two sorts of key components when you're interacting with the website. There's like the visual component, which is, I'm looking at your website, I'm, you know, navigating it often visually.

[00:03:46] The second piece is like a motor sensory thing where I'm using a mouse, I'm using a keyboard, I'm using like, you know, physical muscles to navigate through your website. And I think those are like the two key areas where I think you have to think about, okay, [00:04:00] what if I didn't have, you know, vision or I had some sort of visual impairment, whether it's like loss of vision or colorblindness, how would that affect how I interact with this website? And if I have some sort of motor issue where I can't use a mouse, I can't click, I can't hover, I'm maybe just have one thing I can do, which is tabbing through things and hitting enter, stuff like that. So I think like those two key areas, when you think about interacting through the keyboard, through the mouse, through the screen, and through like voiceovers, that kind of helps you think about what decisions you might make for accessibility.

[00:04:34] **Aurooba Ahmed:** Yeah, definitely. I think for those of us who are maybe a little more able bodied or whatever the term is really, you know, we mostly interact and with the websites and the digital web visually, but really we need to consider a lot more of the senses. Because even though it's in front of us and we're used to use using it visually, that's not always the case.

[00:04:57] Right. Sometimes I forget about that too, but I [00:05:00] just always remind myself, you know, Hey, sometimes I listen to things. Sometimes I even have a temporary disability where I'm like washing dishes and I can't use my hand, and it would be so nice to be able to do certain things and for that to just be a natural, normal, available thing, you know?

[00:05:16] **Brian Coords:** Yeah. And.

[00:05:16] **Aurooba Ahmed:** Yeah.

[00:05:17] **Brian Coords:** Most of what we'll focus on is dealing with, how would this work with a visual impairment where like a screen reader might be explaining, you know, a user's journey through a page. Um, and how would this work? If I couldn't use my mouse and I was maybe only able to tab through things or something like that.

[00:05:33] But

[00:05:34] **Aurooba Ahmed:** Yeah.

## [00:05:35] Recapping where are are in the Accordion Block series

[00:05:35] **Brian Coords:** before we get there, do you wanna give us a recap of like, where we are in our React building journey?

[00:05:40] **Aurooba Ahmed:** Yeah. So in the very first episode of this series, we looked at how to just get, React onto the page inside WordPress, what that sort of looks like. And we created a button that says hello on it, and then when you click it, o click it, it shows the word world. And that was completely [00:06:00] inaccessible, uh, but it did have a button.

[00:06:02] So there's that and. Yes. Okay. So we're just sharing the screen here and we can see the button that says, said hello. And if you click on it, then it says the word world. Yeah, but it's not accessible. And then we sort of dove into, in the next part, we dove into the sort of meat and potatoes as I had called it back then.

[00:06:28] **Brian Coords:** once or twice.

[00:06:29] **Aurooba Ahmed:** Yeah, maybe just once or twice, uh, of, you know, what sort of React it took to create this and what a React component is. But, you know, before we actually dive into creating a block, we are, you know, shifting gears and we need to actually explore what the heck our accordion does, is, and make sure that we're looking at it as accessibly as possible.

## [00:06:50] Demo-ing an accessible accordion

[00:06:50] **Brian Coords:** So the big reveal is I did a lot of this accessibility work and I've updated our code base, so I'm gonna switch branches right now and I'm gonna reload the page. So this [00:07:00] was what? Look like last time, I'm gonna jump over to the next commit that has all of this information. I'm gonna give it a quick reload and ooh,

[00:07:11] **Aurooba Ahmed:** Ooh. It's looking different and I see. Okay, okay. Walk me through it.

[00:07:18] **Brian Coords:** Okay. So first thing is, hello world moved up into, a big kind of header area. Um, we're using more of a larger heading font, which we'll kind of get into semantically. There's a little like visual indicator that there is an accordion, and that clicking on it, will expand the content. When I click on it, I get all of my content showing.

[00:07:40] **Aurooba Ahmed:** Okay. There's a lot more there than we had before. I'm seeing a bunch of good Lorem Ipsum here.

[00:07:46] **Brian Coords:** mm-hmm. Mm-hmm. Lorem Ipsum and uh, I got a little link in here. Do you wanna give me your like, guess or theory why I changed all the content of your block?

[00:07:57] **Aurooba Ahmed:** Well first, now it actually looks like an accordion because it has [00:08:00] real content in it, so that's really good. But I'm gonna guess that it's really important to be able to navigate inside an accordion too, and that's, this is gonna help us demonstrate that and talk about it.

[00:08:12] **Brian Coords:** Yeah, so I wanted to, I wanted to put something inside of the content of the accordion that required like a user interaction and would be something they could focus on, interact with. So that's why I have a paragraph, but I have some of the text, uh, converted into a link and it's just gonna help us when we do kind of the walkthrough of all of this.

[00:08:30] But otherwise, pretty standard FAQ page accordion right here, don't you think?

## [00:08:36] Defining an accordion

[00:08:36] **Aurooba Ahmed:** Yes. But I know we were talking about this before. This is not actually an accordion, right?

[00:08:43] **Brian Coords:** Yeah, break. Break this down. I have a, I have like a list of semantic things that I want to, I want to get to here. So this is not an accordion. Explain to me, ex, you explain what is, what is this?

[00:08:57] **Aurooba Ahmed:** So when we, when we were learning [00:09:00] Bootstrap, and this was the first time I had come across this terminology, and I guess I just never thought about it before or I called it something different, but in Bootstrap they call this piece here when it's just one heading with, opening content, a collapse. Or a collapsible section. That's all it is. And then when I was researching this for this episode, in the accessibility standards, they say that an accordion, they specifically say that an accordion is a vertically stacked sections that all like multiple sections that sort of are set up together. That's what an accordion is.

[00:09:42] So is that how you always think about it?

[00:09:45] **Brian Coords:** Yeah, and it's like, I'll be honest, I never thought about that distinction, like it's kind of a semantic distinction, but like it does make a lot of sense. I think what's going to happen is, as we get further along, we will need to be stacking these elements and we [00:10:00] will want to do some of the things that an accordion does, where like, you click one and it closes the other ones and opens this one.

[00:10:05] And, you know, I, I, I sort of understand that.

[00:10:08] **Aurooba Ahmed:** A relationship.

[00:10:09] **Brian Coords:** Yeah, there's like a broader state that's gonna have to be managed and that sort of thing.

[00:10:13] **Aurooba Ahmed:** Yeah, totally. Okay.

[00:10:15] **Brian Coords:** There's also like the sections inside of it. So like we have up here what they would call like the header of it, and in here is like the body or the panel of it.

[00:10:26] **Aurooba Ahmed:** see, I always call this one whole thing a panel, but I guess it makes sense that it wouldn't be the whole thing as a panel, but instead there is a. Like it's a section that has a panel, you know? Cause that's the part that's sliding in and out.

## [00:10:40] Header versus heading

[00:10:40] **Brian Coords:** Yeah, like this is the panel, this is the heading, the one that I keep getting tricked up on, and this is like, I'm never gonna solve this problem, but it's like a heading versus a header.

[00:10:52] **Aurooba Ahmed:** Yeah.

[00:10:52] **Brian Coords:** Can you explain like the difference between those two things?

[00:10:55] **Aurooba Ahmed:** Yeah, I mean, I think when I think of a header of a website, a header [00:11:00] has multiple components in it, but like it'll have the site logo, it'll have a navigation, it might have like a search area, but a heading is one atomic piece that typically doesn't have anything except for one thing in it. So like the header, like the, like the header of a blog post.

[00:11:21] You know, in that the heading would be the title, even though the header itself might have the title, the featured image and the date, right?

[00:11:30] **Brian Coords:** Yeah. Yeah. And I think like, you know, you think of like the header of your website and then this is like the header of a blog post, right? But this is the heading element, which is typically an H1, H2, and so forth. So. It's, it's one of those things where whenever I'm typing that I, whatever one I think I'm talking about, I say the wrong one, you know, and it's like, I always have to stop and go heading header or when I'm like, naming vARIAbles or anything like that, or like naming template parts.

[00:11:55] It's always, it's, it's, I don't, I just don't think I'm ever gonna internalize that one. I [00:12:00] think it's just lost.

[00:12:01] **Aurooba Ahmed:** but like when we get into the code of this, then I have a question because even though this top part, right, we're seeing this is a header, right? The Hello World and the the little icon triangle. It's a header.

[00:12:13] **Brian Coords:** Yeah.

[00:12:14] **Aurooba Ahmed:** But is it a header based on what we just talked about? You know, when we go into the code, we'll talk about that.

[00:12:21] Yeah.

## [00:12:21] Keyboard accessibility

[00:12:21] **Brian Coords:** Yeah. Okay. Before we go into the code, I think there's one more thing, which is, I think we should demo, like the keyboard navigation of this element, right?

[00:12:28] **Aurooba Ahmed:** Yes. Yeah.

[00:12:30] **Brian Coords:** So, I close the accordion. We're looking at like, just the whole page. I'm gonna tab focus through it so you can see like here's, where the focus is, right now.

[00:12:39] So if I were to hit enter or return my keyboard, I would like go to that link. Um,

[00:12:44] **Aurooba Ahmed:** Yes the site logo

[00:12:45] **Brian Coords:** I tab exactly, and then I tab over to my navigation menu and, you know, there's, I have a rant somewhere about the navigation block in Gutenberg that I had to use to build this. Um, so if you could find that and splice that in here.

[00:12:57] Um, I think everyone needs to hear my struggles getting [00:13:00] that navigation block working for this demo site. Now I will tab focus to the accordion itself, which is the next, uh, focusable element on the page, and

[00:13:10] **Aurooba Ahmed:** And it actually doesn't focus on the big outline you have around it. It actually focuses inside on what I'm guessing is the header, right?

[00:13:20] **Brian Coords:** Well, it's focusing on the button. So there's an actual button element that's focusable, and we'll kind of go into that because it's important to know like what's focusable, what is, you know, what's the best semantic way. So this is actually a button is what's being focused right now. And if I hit you should be able to hit return to basically open or close the element. And then, at that point I can actually tab into my content and I can focus on the next thing, which is the link here.

[00:13:48] **Aurooba Ahmed:** Right. And that's really important because you know, yeah. FAQs are often one that will just often just have links. But sometimes accordions or accordion sections have more than just like [00:14:00] regular content. And sometimes they have forms in it. Sometimes they have like call to actions in there or videos.

[00:14:05] All kinds of things can end up in there. Right. So it's really important that people can interact with that too.

[00:14:10] **Brian Coords:** Like if you look at the, we'll definitely link in the show notes to some like documentation about accessibility and the demo that they use. It's literally like a form. So each panel is a set of form fields and stuff, so it is really to make sure you can do that. On the other hand, I'll go back and focus.

[00:14:26] I'm gonna close the accordion. Once the accordion's closed. I don't wanna be able to focus on anything inside of it. I should be able to just go past it and move further down the page and skip over that content.

[00:14:36] **Aurooba Ahmed:** Okay. And there's probably something that you're, you've included in the element, in the code to be able to do that, right? To make sure it's not focusing on the stuff inside it. I mean, it's React, so it probably doesn't exist, but even if it does exist, you shouldn't be focusing on it, right?

[00:14:52] **Brian Coords:** So that's a good question. It is because it's React, it's like not in the DOM at all, but um, normally if you're using like a display: none, I think you're fine.[00:15:00]

[00:15:00] **Aurooba Ahmed:** that's true. That's true. You're right. That also basically acts like it's not in the DOM.

[00:15:05] **Brian Coords:** Yeah. And then there's a few things that we won't demo here, but like there, when you get, we get into the code, we'll see that there's some ARIA tags that are up here and they're on the button and they're basically letting the user know, is it expanded or not, because the user doesn't know when they're on the button, if it's expanded or if it's not.

[00:15:22] So there is called an ARIA tag that would let, like a voiceover tool know that, um, you know, if you click this, it'll expand it or it's expanded, click it to close it.

## [00:15:32] What does ARIA stand for?

[00:15:32] **Aurooba Ahmed:** Yes, and I memorized it for the episode. ARIA stands for Accessible, accessible, rich, applica ri Wait, accessible rich internet applications. That's it, right?

[00:15:44] **Brian Coords:** Accessible rich internet applications.

[00:15:46] **Aurooba Ahmed:** Yes. Okay.

[00:15:48] **Brian Coords:** Very good. That's very good.

[00:15:49] **Aurooba Ahmed:** Just in case. Just in case once someone was wondering, cuz I've always wondered and never thought to look it up before.

[00:15:56] **Brian Coords:** let's go, let's go to the code and, and [00:16:00] look at this stuff. Okay.

[00:16:01] **Aurooba Ahmed:** Yeah, let's do it.

## [00:16:03] Coding an accessible accordion

[00:16:03] **Brian Coords:** Okay, I have the code editor open. We're looking at, our app.js file, and we're just gonna kind of go line by line through this. You ready?

[00:16:13] **Aurooba Ahmed:** Yes, I'm ready. I'm already seeing a bunch of interesting things here.

[00:16:17] **Brian Coords:** Okay, so most of the top of this file did not change, so we're importing state from WordPress's element package. We're setting up our state of whether the accordion is open or closed. We have a little function to handle, toggling all of that. All of that's kind of the same, and so you can watch the previous episode to get a sense of how that state works and, and what those functions do.

[00:16:39] **Aurooba Ahmed:** Yeah, we'll link it in the cards up in the corner for you.

## [00:16:43] The components of an accordion section

[00:16:43] **Brian Coords:** The next thing is this right here. So the big change is our accordion is made up of two pieces, this heading header area up here, and then the actual content down here. So let's start with the heading slash [00:17:00] header and break it down.

[00:17:01] **Aurooba Ahmed:** So this is what I meant because H2 is a heading. It's not a header, but we're treating it as a header. Right. Isn't that kind of weird?

[00:17:11] **Brian Coords:** So, so it's doing both. Yeah. Um, yeah, I don't, that's pretty weird.

[00:17:18] **Aurooba Ahmed:** Yeah.

[00:17:18] **Brian Coords:** I was gonna make a joke, but I won't. About how, how weird I think that is or not gonna be.

## [00:17:23] Diving into the semantics of an accordion section header

[00:17:23] **Brian Coords:** Um, yeah, it's, so this was actually a big one that we kind of had to dug into because, um, I've seen, like, I recently just saw some accordions where there was no button, right?

[00:17:33] There was just an H2 and then there was like, uh, a lot of this stuff was on the H2. Um, thing is,

[00:17:39] **Aurooba Ahmed:** A lot of the ARIA tags and stuff?

[00:17:41] **Brian Coords:** Yeah, like all of the extra information, the click event was, was bound to the H2 and that sort of thing. So, you know, the problem with that is an H2 is not like by default, a like focusable element.

[00:17:53] So if you add click events to an H2, but you don't specifically put in like [00:18:00] role="button" to like let

[00:18:02] **Aurooba Ahmed:** Mm-hmm.

[00:18:03] **Brian Coords:** you know the browser know that this is a clickable element. If you don't do that extra piece, um, you kinda lose a lot of, stuff in it. It actually just isn't accessible,

[00:18:12] **Aurooba Ahmed:** Right, and you're just like making it harder for yourself instead of taking advantage of everything that's already baked into the browser for certain elements. Yeah.

[00:18:21] **Brian Coords:** Exactly. Yeah. So one extra element, but it's definitely worth the trade off.

[00:18:26] **Aurooba Ahmed:** Right.

[00:18:27] **Brian Coords:** That said, what I did not know is that when I styled this, When I put the button inside the H2, it actually did not take any of the font size. Like the browser defaults actually like kind of messed with that. And they really wanted it to be a button.

[00:18:43] And even when I did like appearance: none on the button so you can, I'll switch over to my CSS, but like I had to put in all these like inherits on everything to

[00:18:52] **Aurooba Ahmed:** Yeah, that's interesting.

[00:18:54] **Brian Coords:** Yeah. So

[00:18:56] **Aurooba Ahmed:** I mean, I can see why it would have like that button [00:19:00] look, but you would think that if it says appearance none, then it would just, so what? What, what happened? It was just like a regular, tiny piece of text

[00:19:08] **Brian Coords:** yeah pretty much,

[00:19:08] **Aurooba Ahmed:** and not, yeah. Okay.

[00:19:10] **Brian Coords:** it because the browser was inject, like the browser style sheet had like font, some font and other stuff like on it that was separate. So you kind of had to like do that. So I would say just. Caveat, like, test this in multiple browsers to make sure your styling is right. Cause it did not take the styling immediately.

[00:19:32] **Aurooba Ahmed:** Noted. Okay.

[00:19:33] **Brian Coords:** Let's go through these elements real quick. Um, I gave the button an ID that'll be important later.

[00:19:37] **Aurooba Ahmed:** Mm-hmm.

[00:19:39] **Brian Coords:** We have a click event on the button. That's React that we went over that before. Nothing changed there.

[00:19:44] **Aurooba Ahmed:** Yep.

[00:19:45] **Brian Coords:** This is the change right here, aria-expanded. This is where you're telling, uh, any sort of screen reader whether or not the content is expanded.

[00:19:53] And I was actually unsure. In my mind, I was kind of thinking it went on the actual element, like letting you know if the element is expanded, but it's [00:20:00] on the button because the person is on the button and the button needs to know if the content is expanded. So, um, we just bound it to the React variable called isOpen.

[00:20:10] **Aurooba Ahmed:** Which is really nice. Just the same one variable that we can just take care of everything with.

[00:20:18] **Brian Coords:** I, I might rename the variable, I'm, I forgot to tell you.

[00:20:21] **Aurooba Ahmed:** No, I, I think it makes sense. We should make it isExpanded.

[00:20:24] **Brian Coords:** isExpanded. Yeah, let's keep it all the same.

[00:20:27] **Aurooba Ahmed:** totally.

[00:20:27] **Brian Coords:** And then fi finally, um, aria-controls where we're just letting the, the browser know which element we're talking about. Um, which element are we controlling the, the visibility of?

[00:20:38] **Aurooba Ahmed:** Right. It's sort of like the remote control, you know, that's the thing that you're gonna use to control whether you can see or use the content and what it's linked to. I think it's a really well named ARIA tag.

[00:20:50] **Brian Coords:** I will say the one thing though is, um, you know, we're using React to like show and hide this. And if we were not, like, if the content was always in the DOM, like, this right [00:21:00] here is not gonna actually do the work of showing and hiding the content. So that's something to keep in mind like this. This is about like sending information, but it's, this has nothing to do with the actual interactivity. Like you have to build that

[00:21:11] **Aurooba Ahmed:** right, right. It's, it's, it's static information. It's not information that, yeah, you need, you need JavaScript of some kind or some sort of fancy CSS toggle owl selectors, not stuff going it

[00:21:24] **Brian Coords:** Yeah, like a, it was like janky, like I'm a checkbox, but I, you know, you click me and it like does all these other things

[00:21:30] **Aurooba Ahmed:** I've definitely done that. Okay. It, it works really nicely when you don't wanna use some JavaScript, but you're right, it is a little janky.

[00:21:37] **Brian Coords:** It's not my, it's not my favorite. It's like checkbox trickery. I don't know why it feels sheisty to me. All right. Um, that's it. Anything? Well, you do, you will also notice that my little, uh, caret guy is just a pretty basic pseudo element. You know,

[00:21:56] **Aurooba Ahmed:** But you could have also just put it in there if you wanted. [00:22:00] Inside the button, right?

[00:22:02] **Brian Coords:** like put the icon in there as an actual.

[00:22:05] **Aurooba Ahmed:** Yeah.

[00:22:05] **Brian Coords:** Yeah, I could have, um, there's no reason not to. Um, you know, I was, you know, I, for a minute there I thought, well, if I put an icon, I guess I need to put a, um, screen reader text for the icon and everything. But, um, you know, at the end of the day it's, it's purely decorative and it's not any way functional or content.

[00:22:26] **Aurooba Ahmed:** Right. Yeah. It's really just a visual indicator. It's not an indicator in any other way because the ARIA tags are controlling all the other indicators. Right.

[00:22:35] **Brian Coords:** Exactly, so it felt like it would just, um, like add noise.

[00:22:40] **Aurooba Ahmed:** clutter it all up

[00:22:41] Yeah. Yeah. No, I, I, I that. So that's a good tip because, you know, you, we always have some sort of like plus or minus or a triangle or something like that going on in there. So I like the idea that you would just do it in a pseudo, keep it nice and clean inside the HTML.

[00:22:56] **Brian Coords:** Yeah, and I just like display:flex the button. So like it actually puts [00:23:00] it nicely. I didn't have to absolute position, I didn't have to do anything like that. Um, when it's clicked, we have a little transform, rotation on it. And this guy right here, which is actually one of my favorite things.

## [00:23:11] Targetting ARIA tags in your CSS

[00:23:11] **Aurooba Ahmed:** Yes, I love that you can target ARIA tags inside your CSS, so if you just handle that, then you don't even have to have extra classes or anything, right.

[00:23:21] **Brian Coords:** Yeah. And like I was actually thinking about this for a, an unrelated piece of code recently, um, today that I was reviewing and it had, you know, it was like toggling classes on things, like it's open, closed, all that sort of stuff. And you probably know what I'm thinking of and I'm thinking about it, and I didn't think about it till right now in this moment.

[00:23:37] I thought like, oh, We can actually do this, like this actually be a much better way to do it.

[00:23:43] **Aurooba Ahmed:** And it needs to have accessibility baked into it anyway, so it's perfect.

[00:23:47] **Brian Coords:** Yeah, so like less code. Less code for sure.

[00:23:51] **Aurooba Ahmed:** Yes. Less jankiness, less just le, and more of just like using what is available to us semantically [00:24:00] in the browser, which I, I love because the less code we can write, the cleaner we can keep it, the better.

[00:24:06] **Brian Coords:** Yeah, and like I said, I've been reviewing some of my old code and so, uh, this has been very helpful for me to, to, to see where I go oh, wow. I, I, I overdeveloped it. It's like that thing where it's like a good developer, like has less code and not more

## [00:24:21] Digging into the accordion section panel

[00:24:21] **Aurooba Ahmed:** Yeah. Yeah, totally. Okay, so that is our accordion section header, right? So now we're going into the, what is called the panel.

[00:24:34] **Brian Coords:** Yes. So we have, it's, um, inside of this JavaScript, function here where we're basically just checking the value of isOpen. So this all kind of stays the same. Um, the difference here is I wrapped it in a nice, uh, div so that I could, for one, give it, give the whole container an ID and like link those two things together.

[00:24:53] **Aurooba Ahmed:** Right.

[00:24:56] **Brian Coords:** Do you think, is there something wrong? Do you see an error.

[00:24:58] **Aurooba Ahmed:** I [00:25:00] mean, it's, is there an error? Wait, is there an error? No,

[00:25:05] **Brian Coords:** Tell me if you think there's an error.

[00:25:07] **Aurooba Ahmed:** Hold on. Hold on. aria-controls the, it controls the panel and it's labeled by the button. I don't know. Tell me what's, what's the error?

[00:25:21] **Brian Coords:** This guy right here does not belong so.

[00:25:25] **Aurooba Ahmed:** Oh

[00:25:25] **Brian Coords:** I'm passing IDs in aria-controls, aria-labelledby, you're passing the ID of an element, um, of which element you're talking about. And notice up here I don't actually have like the, like hash selector, like the CSS selector. And in here I do. And it's not supposed to be there at all.

[00:25:42] **Aurooba Ahmed:** right. So it always has to be an ID, so you don't actually need the hashtag there. Okay, that makes sense.

[00:25:48] **Brian Coords:** I think that would actually break it because it would be the wrong, the wrong ID.

[00:25:54] **Aurooba Ahmed:** But it didn't break it. You showed the front end and it was working. Oh. But it break it like for a voiceover [00:26:00] or

[00:26:00] **Brian Coords:** the voiceover, yeah.

[00:26:00] **Aurooba Ahmed:** For actual assistive device. Hmm. Okay. Good to know. I don't, I don't think I ever actually paid attention to the fact that you can't have the hashtag in there, or that you can only use IDs, even though I know that you can only use IDs in there.

[00:26:14] **Brian Coords:** Yeah, and I, I don't know that I would say you can't, we or I, maybe you can. I didn't look into it, but I'm pretty sure that it would break

[00:26:21] **Aurooba Ahmed:** Yeah, I think so too. You're right,

[00:26:24] **Brian Coords:** and then everything else here is. You know, pretty standard and we can put in a bunch of stuff and, um, you know, this is gonna toggle it pretty well.

## [00:26:32] Animating an accordion

[00:26:32] **Aurooba Ahmed:** mostly because you put a little, you put a little transition on it in your styles, right?

[00:26:36] **Brian Coords:** no, I didn't get that far.

[00:26:39] **Aurooba Ahmed:** No. Okay. Okay.

[00:26:40] **Brian Coords:** I think that opens a conversation because in my mind, like the real, real use case for this would be a page that's loaded where the, the content is all loaded, right? Like the idea that we're building this in React. Yes. But you know, at the end of the day, the front end of a most like WordPress websites are not be injecting content [00:27:00] React.

[00:27:00] So I think there would be a different thing about transition and, and the animations and stuff that I would do a lot differently if I were animating it in with React or if I were showing content that was already on the DOM.

[00:27:12] **Aurooba Ahmed:** Okay, so, but why would it have to be different? I mean, you could still have the transitions on it, even if it's being injected into the DOM, because then as soon as you add it, then that transition would play right.

[00:27:26] **Brian Coords:** Yeah.

[00:27:26] **Aurooba Ahmed:** sliding it out really nicely or whatever.

[00:27:30] **Brian Coords:** Yeah. You don't think, I guess in my mind I was like, I'm gonna need a React library that handles it. But it's like, no, I can just do some CSS, like

[00:27:38] **Aurooba Ahmed:** could just do some CSS. Yeah. You just like translate it, right? Like use the trans, like the transform and translate it down or something like that? Probably.

[00:27:45] **Brian Coords:** Yeah.

## [00:27:46] Next Steps

[00:27:46] **Aurooba Ahmed:** Yeah. I like that. Well, I mean that wasn't, that wasn't the point, but this is really cool. So this is an an accessible accordion section. [00:28:00] But in React or even in like not React, if you had multiple of them, you would have to have some way of identifying the different unique IDs.

[00:28:10] Right. Which we don't have right now, cuz they're hard coded in.

[00:28:13] **Brian Coords:** Yes. So I think that's like a good place to say what we'll do next, which is, I think the next thing we need to do is plan for multiple accordions. And I think what that really means is a lot of, like, the stuff needs to be broken down into separate con uh, components and we need to be able to like, have dynamically different IDs so that, we're not, you know, we can't just hardcode IDs cuz we're gonna have multiple ones on the page.

[00:28:39] Potentially a, a more like higher state that can kind of track all at once.

[00:28:44] **Aurooba Ahmed:** Mm-hmm. Yeah.

[00:28:45] **Brian Coords:** What do you think?

[00:28:45] **Aurooba Ahmed:** I. Yeah, I think that makes sense and I'm excited because we'll be pulling in some stuff we already learned about React components, but then also adding a little bit more React knowledge in it, and also talking about how it all works when there's an actual [00:29:00] accordion and not just a single accordion section.

[00:29:03] **Brian Coords:** Mm-hmm. Mm-hmm. And we, uh, you know, Episode three on this series, we hit accessibility. Next time we will. I think we gotta be better and get our, and not even give a demo if we're not gonna put in that accessibility. What do you think?

[00:29:18] **Aurooba Ahmed:** Yeah, I think you're right. Next time it needs to be episode 1

[00:29:21] **Brian Coords:** Episode zero

[00:29:22] **Aurooba Ahmed:** 0. Indeed. Yes.

[00:29:26] **Brian Coords:** All right. So I'll see you on that next episode. Break out some components.

[00:29:29] **Aurooba Ahmed:** All right. Yeah. See you then.

[00:29:31] **Brian Coords:** All right. Bye.

[00:29:33] **Aurooba Ahmed:** Bye.

## [00:29:34] Conclusion

[00:29:34] **Brian Coords:** Visit viewsource.fm for the latest updates and links to the show notes. Review and subscribe to viewSource in iTunes, YouTube, or wherever you get your podcasts.