fix macOS VoiceOver didn't announce details and summary expand

internal/template/templates/common/layout.html

@@ -116,10 +116,10 @@
             </ul>
         </nav>
         <search role="search" class="search">
-            <details {{ if $.searchQuery }}open{{ end }}>
-                <summary>
+            <details class="search-details" {{ if $.searchQuery }}open{{ end }}>
+                <summary class="search-summary">
                     <span>{{ t "search.label" }}</span>
-                    <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="currentColor" class="bi bi-chevron-down" viewBox="0 0 16 16">
+                    <svg class="bi bi-chevron-down search-summary-icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="currentColor" viewBox="0 0 16 16">
                         <path fill-rule="evenodd" d="M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708"/>
                     </svg>
                 </summary>

internal/ui/static/css/common.css

@@ -233,18 +233,21 @@ a:hover {
     margin-right: 5px;
 }
 
-.search details svg {
+.search-summary-icon {
    padding: 5px;
    inline-size: 24px;
    block-size: 24px;
    translate: 0 -3px;
 }
 
-.search details[open] svg {
-   rotate: 180deg;
+.search-details {
+
+   &[open] .search-summary-icon {
+       rotate: 180deg;
+    }
 }
 
-.search details > summary {
+.search-summary {
   list-style: none;
   display: flex;
   justify-content: center;
@@ -252,12 +255,11 @@ a:hover {
   margin-inline: auto;
 }
 
-.search details > summary::marker, /* Latest Chrome, Edge, Firefox */
-.search details > summary::-webkit-details-marker /* Safari */ {
+.search-summary::marker, /* Latest Chrome, Edge, Firefox */
+.search-summary::-webkit-details-marker /* Safari */ {
   display: none;
 }
 
-
 .search-toggle-switch {
     display: none;
 }

internal/ui/static/js/app.js

@@ -54,6 +54,27 @@ function checkMenuToggleModeByLayout() {
     }
 }
 
+function fixVoiceOverDetailsSummaryBug() {
+    const detailsElements = document.querySelectorAll("details")
+    detailsElements.forEach((details) => {
+        const summaryElement = details.querySelector("summary")
+        summaryElement.setAttribute("role", "button")
+        setSummaryAriaExpandedByDetails(details, summaryElement)
+
+        details.addEventListener("toggle", () => {
+            setSummaryAriaExpandedByDetails(details, summaryElement)
+        })
+    })
+
+    function setSummaryAriaExpandedByDetails(details, summary) {
+        if (details.open) {
+            summary.setAttribute("aria-expanded", "true")
+        } else {
+            summary.setAttribute("aria-expanded", "false")
+        }
+    }
+}
+
 // Show and hide the main menu on mobile devices.
 function toggleMainMenu(event) {
     if (event.type === "keydown" && !(event.key === "Enter" || event.key === " ")) {

internal/ui/static/js/bootstrap.js

@@ -114,6 +114,8 @@ document.addEventListener("DOMContentLoaded", () => {
     checkMenuToggleModeByLayout()
     window.addEventListener("resize", checkMenuToggleModeByLayout, { passive: true })
 
+    fixVoiceOverDetailsSummaryBug()
+
     const logoElement = document.querySelector(".logo")
     logoElement.addEventListener("click", (event) => toggleMainMenu(event));
     logoElement.addEventListener("keydown", (event) => toggleMainMenu(event));