Fixing more issues with popovers

docs/src/_includes/partials/kitchen-sink/alert-dialog.njk

@@ -8,21 +8,19 @@
     </a>
   </header>
   <div class="p-4">
-    <div class="flex flex-col gap-4">
-      {% set footer %}
-        <button class="btn-outline" @click="open = false">Cancel</button>
-        <button class="btn-primary" @click="open = false">Continue</button>
-      {% endset %}
-      {{ dialog(
-        id="alert-dialog-demo",
-        title="Are you absolutely sure?",
-        description="This action cannot be undone. This will permanently delete your account and remove your data from our servers.",
-        trigger="Open dialog",
-        trigger_attrs={"class": "btn-outline"},
-        footer=footer,
-        close_button=false,
-        close_on_overlay_click=false
-      ) }}
-    </div>
+    {% set footer %}
+      <button class="btn-outline" @click="open = false">Cancel</button>
+      <button class="btn-primary" @click="open = false">Continue</button>
+    {% endset %}
+    {{ dialog(
+      id="alert-dialog-demo",
+      title="Are you absolutely sure?",
+      description="This action cannot be undone. This will permanently delete your account and remove your data from our servers.",
+      trigger="Open dialog",
+      trigger_attrs={"class": "btn-outline"},
+      footer=footer,
+      close_button=false,
+      close_on_overlay_click=false
+    ) }}
   </div>
 </section>

docs/src/_includes/partials/kitchen-sink/dropdown-menu.njk

@@ -16,7 +16,7 @@
         popover_attrs={"class": "min-w-56"}
       ) %}
         <div role="group" aria-labelledby="account-options">
-          <div role="presentation" id="account-options">My Account</div>
+          <div role="heading" id="account-options">My Account</div>
           <div role="menuitem">
             Profile
             <span class="text-muted-foreground ml-auto text-xs tracking-widest">⇧⌘P</span>
@@ -37,7 +37,7 @@
         <hr role="separator">
         <div role="menuitem">GitHub</div>
         <div role="menuitem">Support</div>
-        <div role="menuitem" disabled>API</div>
+        <div role="menuitem" aria-disabled="true">API</div>
         <hr role="separator">
         <div role="menuitem">
           Logout
@@ -52,7 +52,7 @@
         popover_attrs={"class": "min-w-56"}
       ) %}
       <div role="group" aria-labelledby="account-options">
-        <div role="presentation" id="account-options">Account Options</div>
+        <div role="heading" id="account-options">Account Options</div>
         <div role="menuitem">
           {% lucide "user" %}
           Profile
@@ -71,7 +71,7 @@
       </div>
       <hr role="separator">
       <div role="group" aria-labelledby="appearance-options">
-        <div role="presentation" id="appearance-options">Appearance</div>
+        <div role="heading" id="appearance-options">Appearance</div>
         <div
           role="menuitemcheckbox"
           aria-checked="true"
@@ -92,7 +92,7 @@
           role="menuitemcheckbox"
           aria-checked="false"
           class="group"
-          disabled
+          aria-disabled="true"
           x-data="{ checked: false }"
           @click="checked = !checked"
           :aria-checked="checked"