From 20ecb5e17bd0dfcde47bc7eb9a211875229fa28b Mon Sep 17 00:00:00 2001
From: "Patrick H. Lauke" <redux@splintered.co.uk>
Date: Fri, 12 Aug 2022 20:45:08 +0100
Subject: [PATCH] Rework dropdown menus as `<details>`/`<summary>`

the hidden checkbox approach is brittle and not accessible (wrapping the entire checkbox and menu inside a `<label>`, not easy to add `:focus` style, etc)
---
 docs/index.html.ejs | 42 +++++++++++++++++-------------------------
 style.css           |  9 +--------
 2 files changed, 18 insertions(+), 33 deletions(-)

diff --git a/docs/index.html.ejs b/docs/index.html.ejs
index c076f04..236eca1 100644
--- a/docs/index.html.ejs
+++ b/docs/index.html.ejs
@@ -190,14 +190,12 @@
             <%- example(`
               
   
-              <label class="dropdown">
+              <details class="dropdown">
   
-                <div class="dd-toggle">
+                <summary class="dd-toggle">
                   File
-                </div>
-              
-                <input type="checkbox" class="dd-input" id="test">
-              
+                </summary>
+                            
                 <ul class="dd-menu">
                   <li>Action</li>
                   <li>Another action</li>
@@ -208,15 +206,13 @@
                   </li>
                 </ul>
                 
-              </label>
+              </details>
   
-              <label class="dropdown">
+              <details class="dropdown">
   
-                <div class="dd-toggle">
+                <summary class="dd-toggle">
                   Edit
-                </div>
-              
-                <input type="checkbox" class="dd-input" id="test">
+                </summary>
               
                 <ul class="dd-menu">
                   <li>Woah</li>
@@ -229,15 +225,13 @@
                   </li>
                 </ul>
                 
-              </label>
+              </details>
   
-              <label class="dropdown">
+              <details class="dropdown">
   
-                <div class="dd-toggle">
+                <summary class="dd-toggle">
                   View
-                </div>
-              
-                <input type="checkbox" class="dd-input" id="test">
+                </summary>
               
                 <ul class="dd-menu">
                   <li>Action</li>
@@ -249,15 +243,13 @@
                   </li>
                 </ul>
                 
-              </label>
+              </details>
   
-              <label class="dropdown">
+              <details class="dropdown">
   
-                <div class="dd-toggle">
+                <summary class="dd-toggle">
                   Special
-                </div>
-              
-                <input type="checkbox" class="dd-input" id="test">
+                </summary>
               
                 <ul class="dd-menu">
                   <li>You probably</li>
@@ -266,7 +258,7 @@
                   <li>Idea</li>
                 </ul>
                 
-              </label>
+              </details>
               `)%>
   
           </div>
diff --git a/style.css b/style.css
index e2b75dc..33b470b 100644
--- a/style.css
+++ b/style.css
@@ -563,6 +563,7 @@ form {
   height: 0; 
 }
 
+.dd-toggle:focus,
 .dd-toggle:hover {
   background-color: black;
   color: white;
@@ -581,14 +582,6 @@ form {
   font-size: 1em;
 }
 
-.dd-input + .dd-menu {
-  display: none;
-} 
-
-.dd-input:checked + .dd-menu {
-  display: block;
-} 
-
 .dd-menu li {
   padding: 5px 20px;
   cursor: pointer;