From 4f6112510737be32fbe3a92098a43ab22a159d96 Mon Sep 17 00:00:00 2001
From: Martin Meyerhoff <mamhoff@gmail.com>
Date: Mon, 26 Aug 2024 16:07:28 +0200
Subject: [PATCH] Remove inaccessible details/summary element

The variant search on the order#show page utilized a `details`/`summary`
HTML element in order to get open/close functionality. However, Axe
flags this as inaccessible, because the `summary` element does not have a
label. This removes the `summary` element in favor of a simple div, and
changes the controller to rely on a `hidden` class instead.
---
 .../solidus_admin/ui/forms/search/component.html.erb        | 5 ++---
 .../components/solidus_admin/ui/forms/search/component.js   | 6 +++---
 2 files changed, 5 insertions(+), 6 deletions(-)

diff --git a/admin/app/components/solidus_admin/ui/forms/search/component.html.erb b/admin/app/components/solidus_admin/ui/forms/search/component.html.erb
index cb1ab64e292..25a4b3bce5c 100644
--- a/admin/app/components/solidus_admin/ui/forms/search/component.html.erb
+++ b/admin/app/components/solidus_admin/ui/forms/search/component.html.erb
@@ -23,8 +23,7 @@
       ) %>
     </div>
 
-    <details class="px-6 relative overflow-visible">
-      <summary class="hidden"></summary>
+    <div class="px-6 relative overflow-visible">
       <div
         class="
           absolute
@@ -47,6 +46,6 @@
         data-<%= stimulus_id %>-target="results"
       >
       </div>
-    </details>
+    </div>
   </div>
 </div>
diff --git a/admin/app/components/solidus_admin/ui/forms/search/component.js b/admin/app/components/solidus_admin/ui/forms/search/component.js
index d37938d1d7a..7810d350547 100644
--- a/admin/app/components/solidus_admin/ui/forms/search/component.js
+++ b/admin/app/components/solidus_admin/ui/forms/search/component.js
@@ -95,7 +95,7 @@ export default class extends Controller {
     }
 
     if (this.openResults && resultsHtml && this.query) {
-      if (!this.resultsTarget.parentNode.open) this.selectedIndex = 0
+      if (this.resultsTarget.parentNode.classList.contains("hidden")) this.selectedIndex = 0
 
       for (const result of this.resultTargets) {
         if (result === this.selectedResult) {
@@ -108,9 +108,9 @@ export default class extends Controller {
           result.removeAttribute("aria-selected")
         }
       }
-      this.resultsTarget.parentNode.open = true
+      this.resultsTarget.parentNode.classList.remove("hidden")
     } else {
-      this.resultsTarget.parentNode.open = false
+      this.resultsTarget.parentNode.classList.add("hidden")
     }
   }
 }