2 files changed, 23 insertions, 0 deletions
diff --git a/internal/ui/static/js/app.js b/internal/ui/static/js/app.js
index 61872ed1..99145d49 100644
--- a/internal/ui/static/js/app.js
+++ b/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 === " ")) {
diff --git a/internal/ui/static/js/bootstrap.js b/internal/ui/static/js/bootstrap.js
index bfc89839..254a1c48 100644
--- a/internal/ui/static/js/bootstrap.js
+++ b/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));