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.
- An Introduction to ARIA States
- w3c Using aria-expanded to indicate the state of a collapsible element
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<link rel="stylesheet" href="css/style.css" />
<title>Egghead Aria Expanded</title>
</head>
<body>
<h1>Aria Expanded Demo</h1>
<button class="pop-up__open">Helpful links</button>
<ul class="pop-up__items">
<li>
<a href="http://google.com/">Google</a>
</li>
<li>
<a href="http://google.com/">Stack Overflow</a>
</li>
<li>
<a href="https://dev.to/">Dev.to</a>
</li>
</ul>
<script>
const showButton = document.querySelector(".pop-up__open");
showButton.setAttribute("aria-expanded", false);
showButton.addEventListener("click", () => {
const ariaExpanded = showButton.getAttribute("aria-expanded"); // This will return a string
if (ariaExpanded === "true") {
showButton.setAttribute("aria-expanded", false);
} else {
showButton.setAttribute("aria-expanded", true);
}
});
</script>
</body>
</html>