From eb1ac6256e0de6d312aca73c8322007d7acebb31 Mon Sep 17 00:00:00 2001
From: Manuel <manuel.fischer@abusix.com>
Date: Fri, 8 Dec 2023 12:10:45 +0100
Subject: [PATCH] feat(components): use button for disclosure nav item

---
 package-lock.json                                     |  2 +-
 .../navigation/navigation-disclosure-panel.tsx        | 11 +++++++----
 2 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index d362e7e4..c221283a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -80,7 +80,7 @@
                 "vitest": "^1.0.1"
             },
             "engines": {
-                "node": ">=18"
+                "node": ">=20"
             },
             "peerDependencies": {
                 "react": ">=17.0.1",
diff --git a/src/components/navigation/navigation-disclosure-panel.tsx b/src/components/navigation/navigation-disclosure-panel.tsx
index 1fb75293..e59fa2fc 100644
--- a/src/components/navigation/navigation-disclosure-panel.tsx
+++ b/src/components/navigation/navigation-disclosure-panel.tsx
@@ -2,8 +2,8 @@ import React from "react";
 import { Disclosure } from "@headlessui/react";
 import { classNames } from "../../util/class-names";
 
-export interface NavigationDisclosurePanelItemProps {
-    children: React.ReactNode;
+export interface NavigationDisclosurePanelItemProps
+    extends React.ComponentPropsWithoutRef<"button"> {
     isActive?: boolean;
     isIndented?: boolean;
 }
@@ -12,20 +12,23 @@ const NavigationDisclosurePanelItem = ({
     children,
     isActive,
     isIndented,
+    ...props
 }: NavigationDisclosurePanelItemProps) => {
     return (
-        <div
+        <button
+            type="button"
             className={classNames(
                 "relative w-full px-8 py-3 text-left text-sm text-neutral-0 hover:bg-primary-900+10",
                 isIndented && "px-14",
                 isActive && "bg-primary-900+20 font-semibold hover:bg-primary-900+20"
             )}
+            {...props}
         >
             {children}
             {isActive && (
                 <div className="absolute bottom-0 left-0 top-0 h-full w-0.5 rounded-r-sm bg-neutral-0" />
             )}
-        </div>
+        </button>
     );
 };