improve accessibility in Support page more/less buttons (#596)

* improve accessibility to support more/less buttons * add section header to the aria label of the more/less button
CDCgov · Sep 6, 2023 · bcbe96d · bcbe96d
1 parent 664b5fb
commit bcbe96d
Showing 1 changed file with 6 additions and 0 deletions.
diff --git a/pages/support.html b/pages/support.html
@@ -188,19 +188,25 @@ <h2>Get in touch</h2>
         });
     const toggleHiddenLinks = (footerElement) => {
         const footerText = footerElement.querySelector('.footer-text');
+        const toggleButton = footerElement.querySelector("button");
         const cardElement = footerElement.parentElement;
         const bodyElement = cardElement.querySelector('.usa-card__body');
+        const sectionName = cardElement.querySelector('.usa-card__heading').textContent;
         const hiddenLinks = cardElement.querySelectorAll('.hidden-link');
         hiddenLinks.forEach(link => {
             if (link.classList.contains('display-none')) {
                 link.classList.remove('display-none');
                 bodyElement.classList.add('expanded');
                 animateCSS(link, 'fadeInDown');
                 footerText.textContent = 'Less';
+                footerText.setAttribute("aria-label", `see less ${sectionName} related links`)
+                toggleButton.setAttribute("aria-expanded", true)
             } else {
                 animateCSS(link, 'fadeOutUp');
                 bodyElement.classList.remove('expanded');
                 footerText.textContent = 'More';
+                footerText.setAttribute("aria-label", `see more ${sectionName} related links`)
+                toggleButton.setAttribute("aria-expanded", false)
             }
         });
     }