From 010051f8233ae6cc8c96871f5f11ac2f7b9fbbaf Mon Sep 17 00:00:00 2001
From: madrilene <hola@lenesaile.com>
Date: Fri, 9 Feb 2024 09:53:50 +0100
Subject: [PATCH] better accessibility for details component

---
 src/_data/meta.js                    |  4 +++-
 src/_includes/components/details.njk | 17 ++++++++++++-----
 src/assets/css/blocks/details.css    |  7 +++++++
 3 files changed, 22 insertions(+), 6 deletions(-)

diff --git a/src/_data/meta.js b/src/_data/meta.js
index 87507a5..35ebb47 100644
--- a/src/_data/meta.js
+++ b/src/_data/meta.js
@@ -40,7 +40,9 @@ module.exports = {
     paginationNext: 'Next'
   },
   details: {
-    toggle: 'Toggle all'
+    aria: 'section controls',
+    expand: 'expand all',
+    collapse: 'collapse all'
   },
   navigation: {
     ariaTop: 'Main',
diff --git a/src/_includes/components/details.njk b/src/_includes/components/details.njk
index c5dc402..99060a2 100644
--- a/src/_includes/components/details.njk
+++ b/src/_includes/components/details.njk
@@ -1,4 +1,7 @@
-<button id="toggleAll" class="button">{{ meta.details.toggle }}</button>
+<ul class="control | cluster" aria-label="{{ meta.details.aria }}">
+  <button id="expandAll" class="button post-tag">{{ meta.details.expand }}</button>
+  <button id="collapseAll" class="button post-tag">{{ meta.details.collapse }}</button>
+</ul>
 
 {% for item in itemList %}
 <details id="{{ item.data.title | slugify }}">
@@ -8,12 +11,16 @@
 {% endfor %}
 
 <script>
-  const toggleAll = document.querySelector('#toggleAll');
+  const expandAllButton = document.querySelector('#expandAll');
+  const collapseAllButton = document.querySelector('#collapseAll');
   const details = document.querySelectorAll('details');
 
-  toggleAll.addEventListener('click', () => {
-    const allOpen = [...details].every(detail => detail.open);
-    details.forEach(detail => (detail.open = !allOpen));
+  expandAllButton.addEventListener('click', () => {
+    details.forEach(detail => (detail.open = true));
+  });
+
+  collapseAllButton.addEventListener('click', () => {
+    details.forEach(detail => (detail.open = false));
   });
 
   details.forEach(detail => {
diff --git a/src/assets/css/blocks/details.css b/src/assets/css/blocks/details.css
index a329830..cbdb3bf 100644
--- a/src/assets/css/blocks/details.css
+++ b/src/assets/css/blocks/details.css
@@ -1,3 +1,10 @@
+.control {
+  --gutter: var(--space-xs-s);
+  --cluster-horizontal-alignment: flex-end;
+  border-block-start: 1px solid var(--color-bg-accent);
+  padding-block-start: var(--space-xs);
+}
+
 details > * + * {
   margin-block-start: var(--flow-space, 1em);
 }