From 0b4d31e482d8ee41762e2b3bef06a6dde6a5ff87 Mon Sep 17 00:00:00 2001
From: Moyasee <terranoiz@icloud.com>
Date: Fri, 26 Dec 2025 23:37:35 +0200
Subject: [PATCH] refactor: update notification item components to use button
 elements for better accessibility

---
 .../notifications/local-notification-item.tsx      | 14 ++++----------
 .../src/pages/notifications/notification-item.tsx  | 12 +++---------
 2 files changed, 7 insertions(+), 19 deletions(-)

diff --git a/src/renderer/src/pages/notifications/local-notification-item.tsx b/src/renderer/src/pages/notifications/local-notification-item.tsx
index 1003f9d5..30380965 100644
--- a/src/renderer/src/pages/notifications/local-notification-item.tsx
+++ b/src/renderer/src/pages/notifications/local-notification-item.tsx
@@ -25,7 +25,7 @@ export function LocalNotificationItem({
   notification,
   onDismiss,
   onMarkAsRead,
-}: LocalNotificationItemProps) {
+}: Readonly<LocalNotificationItemProps>) {
   const { t } = useTranslation("notifications_page");
   const { formatDistance } = useDate();
   const navigate = useNavigate();
@@ -64,18 +64,12 @@ export function LocalNotificationItem({
   };
 
   return (
-    <div
+    <button
+      type="button"
       className={cn("notification-item", {
         "notification-item--unread": !notification.isRead,
       })}
       onClick={handleClick}
-      onKeyDown={(e) => {
-        if (e.key === "Enter" || e.key === " ") {
-          handleClick();
-        }
-      }}
-      role="button"
-      tabIndex={0}
     >
       <div className="notification-item__picture">
         {notification.pictureUrl ? (
@@ -104,6 +98,6 @@ export function LocalNotificationItem({
       >
         <XIcon size={16} />
       </button>
-    </div>
+    </button>
   );
 }
diff --git a/src/renderer/src/pages/notifications/notification-item.tsx b/src/renderer/src/pages/notifications/notification-item.tsx
index 976ab631..b250ffe8 100644
--- a/src/renderer/src/pages/notifications/notification-item.tsx
+++ b/src/renderer/src/pages/notifications/notification-item.tsx
@@ -172,20 +172,14 @@ export function NotificationItem({
   };
 
   return (
-    <div
+    <button
+      type="button"
       className={cn("notification-item", {
         "notification-item--unread":
           !notification.isRead ||
           notification.type === "FRIEND_REQUEST_RECEIVED",
       })}
       onClick={handleClick}
-      onKeyDown={(e) => {
-        if (e.key === "Enter" || e.key === " ") {
-          handleClick();
-        }
-      }}
-      role="button"
-      tabIndex={0}
     >
       <div
         className={cn("notification-item__picture", {
@@ -229,6 +223,6 @@ export function NotificationItem({
           <XIcon size={16} />
         </button>
       )}
-    </div>
+    </button>
   );
 }