From c90e491562c74d8f2bb0f52897cde86300ac0363 Mon Sep 17 00:00:00 2001
From: Allen Porter <allen@thebends.org>
Date: Wed, 12 Oct 2022 03:00:48 -0700
Subject: [PATCH] Improve accessibility for expandable details (#24532)

---
 plugins/details.rb        | 23 +++++++++++++++++------
 sass/custom/_details.scss |  3 +++
 2 files changed, 20 insertions(+), 6 deletions(-)

diff --git a/plugins/details.rb b/plugins/details.rb
index 5e081d1de98..d1d5daa96bc 100644
--- a/plugins/details.rb
+++ b/plugins/details.rb
@@ -4,6 +4,7 @@ module Jekyll
     def initialize(tag_name, title, tokens)
       super
       @title = title
+      @details_idx = 1
     end
 
     def render(context)
@@ -15,25 +16,35 @@ module Jekyll
       end
       title = title.to_s.delete("\"")
 
+      idx = context["details_idx"]
+      if idx.nil? then
+        idx = 0
+      end
+      context["details_idx"] = idx + 1
+
       <<~MARKUP
         <script>
         function showDetails(el) {
           const content = el.parentElement.querySelector(".details-block-content");
           const up = el.querySelector("svg#up");
           const down = el.querySelector("svg#down");
-          up.style.display = up.style.display === "none" ? "block" : "none";
-          down.style.display = down.style.display === "none" ? "block" : "none";
-          content.hidden = !content.hidden;
+          const shouldExpand = down.style.display === "block";
+          up.style.display = shouldExpand ? "block" : "none";
+          down.style.display = !shouldExpand ? "block" : "none";
+          content.hidden = !shouldExpand;
+          el.ariaExpanded = shouldExpand;
         }
         </script>
         <div class="details-block">
           <div class='details-block-item'>
-            <div class='details-block-title' onclick='showDetails(this)'>
+            <button class='details-block-title' onclick='showDetails(this)' aria-controls="content_#{idx}" aria-expanded="false">
               #{title}
+              <div class='details-block-arrow'>
               <svg id="down" style="display: block;" width="24" height="24" viewBox="0 0 24 24"><path d="M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z" /></svg>
               <svg id="up" style="display: none;" width="24" height="24" viewBox="0 0 24 24"><path d="M7.41,15.41L12,10.83L16.59,15.41L18,14L12,8L6,14L7.41,15.41Z" /></svg>
-            </div>
-            <div class='details-block-content' hidden>#{contents}</div>
+              </div>
+            </button>
+            <div class='details-block-content' id="content_#{idx}" hidden>#{contents}</div>
           </div>
         </div>
       MARKUP
diff --git a/sass/custom/_details.scss b/sass/custom/_details.scss
index 038428b8d00..04b5b9957be 100644
--- a/sass/custom/_details.scss
+++ b/sass/custom/_details.scss
@@ -18,6 +18,9 @@ div.details-block {
       justify-content: space-between;
       display: flex;
       align-items: center;
+      background-color: white;
+      border: 0px;
+      width: 100%;
     }
     .details-block-content {
       margin: 4px 32px 12px 0;