Add aria-expanded to add semantic value and styling
In this lesson, we will be going over the attribute aria-expanded. Instead of using a class like .open we are going to use the aria-expanded attribute to style.
This accomplished double duty because we have semantic value and visual indicators that a button is open and closed.
To test this, I opened up Safari and used CMD + F5 to turn VoiceOver on.
Instructor: [00:00] Today, we are creating an accessible pop up button. We'll be using this button that says, "Helpful links to open and close this unordered list of links." In the markup, we have a button with the class pop-up__open and that has the inner text helpful links. Then we have an unordered list with the class pop-up__items. Then we have three list items with links.
[00:28] A lot of times when people want to show something is open or closed, they'll add a class open and then use the styling that way. Today, we're going to make it a little bit more semantic and use aria-expanded.
[00:40] On page load, I'm going to add an aria-expanded attribute. I'm just going to write the JavaScript in the HTML file with some script tags. First, let's grab const showButton = document.querySelector and we're going to take the class pop-up__open.
[01:04] Once the JavaScript loads, we are going to add an attribute called aria-expanded and we are going to set that to false. Let's refresh the page and just double check. Great.
[01:17] Now we have the aria-expanded = false on that button. We will add an event listener onto that show button and it's going to be a click event listener. We'll create an arrow function here. Before I toggle anything, I'm going to create a variable called aria-expanded and just grab that value of that attribute.
[01:39] As a note, this will return a string and not a Boolean, which is why I'm not going to do if aria-expanded because that's not going to work. I will say if aria-expanded = "true," then we are going to show button, set attribute aria-expanded false.
[02:10] Then, we are going to do an else statement. Basically, I'm going to copy and paste and do the opposite. If we refresh this page, you can see that this is toggling true and false.
[02:24] We're done with the JavaScript, let's go to the styling. I'm going to use the attribute and then I'm also going to use the sibling combinator, and I am going to say display:block. For the opposite, I'm going to do display:none. See, now this toggles open and closed.
[02:44] Now, let's test it on a screen reader in Safari.
[02:47] [Safari VoiceOver]
Instructor: [02:47] Now that button either says expanded or collapsed depending on the state of that pop-up. To summarize, we use JavaScript to add an aria-expanded onto this button, then on the event listener of that button, we toggle that value, and then we use the attribute to style it.