From c6f13482114486f87b57669051ead0209a3d2eb0 Mon Sep 17 00:00:00 2001
From: indaco <github@mircoveltri.me>
Date: Tue, 7 May 2024 08:24:09 +0200
Subject: [PATCH] fix(gropdown-content.templ): id and aria-labelledby

---
 gropdown-content.templ    |  2 --
 gropdown-content_templ.go | 28 +---------------------------
 gropdown-js.templ         |  5 +++++
 gropdown-js_templ.go      | 13 +++++++++----
 4 files changed, 15 insertions(+), 33 deletions(-)

diff --git a/gropdown-content.templ b/gropdown-content.templ
index 56d5886..82eef94 100644
--- a/gropdown-content.templ
+++ b/gropdown-content.templ
@@ -2,10 +2,8 @@ package gropdown
 
 templ Content() {
 	<ul
-		id={ menuId("dropdown.Button.Label") }
 		role="menu"
 		class="gdd_content"
-		aria-labelledby={ buttonId("dropdown.Button.Label") }
 		data-state="close"
 	>
 		{ children... }
diff --git a/gropdown-content_templ.go b/gropdown-content_templ.go
index 2e74abb..bf596b5 100644
--- a/gropdown-content_templ.go
+++ b/gropdown-content_templ.go
@@ -23,33 +23,7 @@ func Content() templ.Component {
 			templ_7745c5c3_Var1 = templ.NopComponent
 		}
 		ctx = templ.ClearChildren(ctx)
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<ul id=\"")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		var templ_7745c5c3_Var2 string
-		templ_7745c5c3_Var2, templ_7745c5c3_Err = templ.JoinStringErrs(menuId("dropdown.Button.Label"))
-		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `gropdown-content.templ`, Line: 5, Col: 38}
-		}
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var2))
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" role=\"menu\" class=\"gdd_content\" aria-labelledby=\"")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		var templ_7745c5c3_Var3 string
-		templ_7745c5c3_Var3, templ_7745c5c3_Err = templ.JoinStringErrs(buttonId("dropdown.Button.Label"))
-		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `gropdown-content.templ`, Line: 8, Col: 53}
-		}
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var3))
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" data-state=\"close\">")
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<ul role=\"menu\" class=\"gdd_content\" data-state=\"close\">")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
diff --git a/gropdown-js.templ b/gropdown-js.templ
index a2f90ae..c2862d6 100644
--- a/gropdown-js.templ
+++ b/gropdown-js.templ
@@ -452,6 +452,11 @@ script GropdownJS(configMap *ConfigMap) {
 
     const dropdownBtn = node.querySelector(".gdd_button")
     if (dropdownBtn != null && options?.enabled) {
+      const dropdownBtnLabel = dropdownBtn.getAttribute("aria-label").toLowerCase()
+      const menuNode = node.querySelector('[role="menu"]')
+      menuNode.setAttribute("id", `dropdown-menu-${dropdownBtnLabel}`)
+      menuNode.setAttribute("aria-labelledby", `dropdown-button-${dropdownBtnLabel}`)
+
       initialize()
       node.addEventListener('click', onButtonClick)
       node.addEventListener('keydown', onButtonKeydown)
diff --git a/gropdown-js_templ.go b/gropdown-js_templ.go
index 7c4d016..182a381 100644
--- a/gropdown-js_templ.go
+++ b/gropdown-js_templ.go
@@ -9,8 +9,8 @@ import "github.com/a-h/templ"
 
 func GropdownJS(configMap *ConfigMap) templ.ComponentScript {
 	return templ.ComponentScript{
-		Name: `__templ_GropdownJS_e3ae`,
-		Function: `function __templ_GropdownJS_e3ae(configMap){// Utility function to check if a value is null or undefined
+		Name: `__templ_GropdownJS_8d5a`,
+		Function: `function __templ_GropdownJS_8d5a(configMap){// Utility function to check if a value is null or undefined
   function isNullish(value) {
     return value === null || value === undefined;
   }
@@ -461,6 +461,11 @@ func GropdownJS(configMap *ConfigMap) templ.ComponentScript {
 
     const dropdownBtn = node.querySelector(".gdd_button")
     if (dropdownBtn != null && options?.enabled) {
+      const dropdownBtnLabel = dropdownBtn.getAttribute("aria-label").toLowerCase()
+      const menuNode = node.querySelector('[role="menu"]')
+      menuNode.setAttribute("id", ` + "`" + `dropdown-menu-${dropdownBtnLabel}` + "`" + `)
+      menuNode.setAttribute("aria-labelledby", ` + "`" + `dropdown-button-${dropdownBtnLabel}` + "`" + `)
+
       initialize()
       node.addEventListener('click', onButtonClick)
       node.addEventListener('keydown', onButtonKeydown)
@@ -553,7 +558,7 @@ func GropdownJS(configMap *ConfigMap) templ.ComponentScript {
   });
 
 }`,
-		Call:       templ.SafeScript(`__templ_GropdownJS_e3ae`, configMap),
-		CallInline: templ.SafeScriptInline(`__templ_GropdownJS_e3ae`, configMap),
+		Call:       templ.SafeScript(`__templ_GropdownJS_8d5a`, configMap),
+		CallInline: templ.SafeScriptInline(`__templ_GropdownJS_8d5a`, configMap),
 	}
 }