better accessibility for details component

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',

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', () => {
+  expandAllButton.addEventListener('click', () => {
-    const allOpen = [...details].every(detail => detail.open);
+    details.forEach(detail => (detail.open = true));
-    details.forEach(detail => (detail.open = !allOpen));
+  });
+
+  collapseAllButton.addEventListener('click', () => {
+    details.forEach(detail => (detail.open = false));
   });
 
   details.forEach(detail => {

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);
 }