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 index 16cb64e917..2b21a5c3e2 100644 --- 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 %}
- +
{{ summary }}
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 index ddcfa35d26..d8cfef9885 100644 --- 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 index 7771221ff2..f2d4a34403 100644 --- 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); }