From aa640bf81dc1c60a61ab48389c8995b74f3e95d3 Mon Sep 17 00:00:00 2001
From: cloudwithax <heyimnick14@gmail.com>
Date: Sun, 15 Feb 2026 14:14:49 -0500
Subject: [PATCH] fix(DMSidebar): change button to div for better accessibility
 and keyboard navigation

---
 package.json                        |  2 +-
 src/components/layout/DMSidebar.tsx | 11 ++++++++---
 2 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/package.json b/package.json
index 9a123b3..d302e78 100644
--- a/package.json
+++ b/package.json
@@ -8,7 +8,7 @@
     "build": "vite build",
     "preview": "vite preview",
     "tauri": "WEBKIT_DISABLE_DMABUF_RENDERER=1 GDK_BACKEND=x11 tauri",
-    "tauri:dev-server": "WEBKIT_DISABLE_DMABUF_RENDERER=1 GDK_BACKEND=x11 tauri dev -- -- --features dev-server"
+    "tauri:dev-server": "WEBKIT_DISABLE_DMABUF_RENDERER=1 GDK_BACKEND=x11 tauri dev --features dev-server"
   },
   "license": "MIT",
   "dependencies": {
diff --git a/src/components/layout/DMSidebar.tsx b/src/components/layout/DMSidebar.tsx
index 7627932..9c709be 100644
--- a/src/components/layout/DMSidebar.tsx
+++ b/src/components/layout/DMSidebar.tsx
@@ -127,14 +127,19 @@ const DMSidebar: Component = () => {
       >
         <For each={filteredConversations()}>
           {(dm) => (
-            <button
-              type="button"
+            <div
+              role="button"
+              tabIndex={0}
               class={`flex items-center gap-3 w-full px-3 py-2 transition-all duration-200 cursor-pointer group ${
                 activeDMPeerId() === dm.peer_id
                   ? "bg-gray-800 text-white"
                   : "text-white/60 hover:bg-gray-800/60 hover:text-white"
               }`}
               onClick={() => handleSelectDM(dm.peer_id)}
+              onKeyDown={(e) => {
+                if (e.key === "Enter" || e.key === " ")
+                  handleSelectDM(dm.peer_id);
+              }}
             >
               <Avatar
                 name={dm.display_name}
@@ -169,7 +174,7 @@ const DMSidebar: Component = () => {
                   </p>
                 </Show>
               </div>
-            </button>
+            </div>
           )}
         </For>
       </Show>