feat(shs-6003): remove aria attributes in summary and details since t…

…hey are not needed
SU-HSDO · Feb 27, 2025 · 1c72762 · 1c72762
1 parent 15a3922
commit 1c72762
Show file tree

Hide file tree

Showing 3 changed files with 3 additions and 41 deletions.
diff --git a/docroot/modules/humsci/hs_layouts/patterns/timeline-item/timeline-item.html.twig b/docroot/modules/humsci/hs_layouts/patterns/timeline-item/timeline-item.html.twig
@@ -8,7 +8,7 @@
 
 {% if description %}
   <details {{ attributes }} open>
-    <summary class="hb-timeline-item__summary" aria-expanded="true" aria-pressed="true">
+    <summary class="hb-timeline-item__summary">
       <div class="hb-timeline-item__heading">
         {{ summary }}
       </div>

diff --git a/docroot/themes/humsci/humsci_basic/src/js/shared/timeline/expand-collapse-timeline.js b/docroot/themes/humsci/humsci_basic/src/js/shared/timeline/expand-collapse-timeline.js
@@ -19,46 +19,11 @@
         items.forEach((item) => {
           item.removeAttribute('open');
         });
-
-        // Find the summary element and update the aria attribute values
-        const summaries = timeline.querySelectorAll(
-          '.hb-timeline-item__summary',
-        );
-
-        summaries.forEach((summary) => {
-          summary.setAttribute('aria-expanded', 'false');
-          summary.setAttribute('aria-pressed', 'false');
-        });
       });
 
-      // When a user clicks on a timeline, update the aria properties accordingly
+      // When a user clicks on a timeline, set open property accordingly
       const timelineItems = once('timeline-item', '.hb-timeline-item', context);
 
-      if (timelineItems) {
-        timelineItems.forEach((timelineItem) => {
-          const summary = timelineItem.querySelector(
-            '.hb-timeline-item__summary',
-          );
-
-          // Find the value of aria-expanded for a timeline item summary
-          let ariaExpanded = summary.getAttribute('aria-expanded');
-
-          // Update aria values!
-          summary.addEventListener(('keypress', 'click'), () => {
-            if (ariaExpanded === 'true') {
-              summary.setAttribute('aria-expanded', 'false');
-              summary.setAttribute('aria-pressed', 'false');
-            } else {
-              summary.setAttribute('aria-expanded', 'true');
-              summary.setAttribute('aria-pressed', 'true');
-            }
-
-            // Retain updated value for the aria-expanded attribute
-            ariaExpanded = summary.getAttribute('aria-expanded');
-          });
-        });
-      }
-
       const searchQuery = new URLSearchParams(window.location.search);
       const params = Object.fromEntries(searchQuery.entries());
 
@@ -67,10 +32,7 @@
 
         timelineItems.forEach((timeline) => {
           if (timeline.textContent.toLowerCase().includes(searchTerm)) {
-            const summary = timeline.querySelector('summary');
             timeline.setAttribute('open', '');
-            summary.setAttribute('aria-expanded', 'true');
-            summary.setAttribute('aria-pressed', 'true');
           }
         });
       }

diff --git a/docroot/themes/humsci/humsci_basic/src/scss/components/_pattern.timeline-item.scss b/docroot/themes/humsci/humsci_basic/src/scss/components/_pattern.timeline-item.scss
@@ -126,7 +126,7 @@
       transition: transform 150ms ease-in-out;
     }
 
-    [aria-expanded="true"] & {
+    [open] & {
       &::after {
         transform: scaleY(-1);
       }