fix macOS VoiceOver didn't announce details and summary expand

miniflux · Feb 15, 2024 · 5c97771 · 5c97771
1 parent c9cbe8a
commit 5c97771
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 10 deletions.
diff --git a/internal/template/templates/common/layout.html b/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>

diff --git a/internal/ui/static/css/common.css b/internal/ui/static/css/common.css
@@ -233,31 +233,33 @@ 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;
   inline-size: fit-content;
   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;
 }

diff --git 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
@@ -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));