From 4293fe7edc86565539bbdcec4a28ccdad5335e14 Mon Sep 17 00:00:00 2001
From: Faisal Amir <urmauur@gmail.com>
Date: Fri, 12 Sep 2025 10:58:34 +0700
Subject: [PATCH] fix: avoid error validate nested dom

---
 .../src/containers/dialogs/DeleteMessageDialog.tsx | 14 ++++++++++++--
 .../src/containers/dialogs/EditMessageDialog.tsx   | 14 ++++++++++++--
 web-app/src/containers/dialogs/ErrorDialog.tsx     | 12 ++++++++++--
 .../containers/dialogs/LoadModelErrorDialog.tsx    | 12 ++++++++++--
 .../containers/dialogs/MessageMetadataDialog.tsx   | 14 ++++++++++++--
 5 files changed, 56 insertions(+), 10 deletions(-)

diff --git a/web-app/src/containers/dialogs/DeleteMessageDialog.tsx b/web-app/src/containers/dialogs/DeleteMessageDialog.tsx
index 8df4c7118..c4444b1bd 100644
--- a/web-app/src/containers/dialogs/DeleteMessageDialog.tsx
+++ b/web-app/src/containers/dialogs/DeleteMessageDialog.tsx
@@ -41,9 +41,19 @@ export function DeleteMessageDialog({ onDelete }: DeleteMessageDialogProps) {
   const trigger = (
     <Tooltip>
       <TooltipTrigger asChild>
-        <button className="flex items-center gap-1 hover:text-accent transition-colors cursor-pointer group relative">
+        <div 
+          className="flex items-center gap-1 hover:text-accent transition-colors cursor-pointer group relative"
+          role="button"
+          tabIndex={0}
+          onKeyDown={(e) => {
+            if (e.key === 'Enter' || e.key === ' ') {
+              e.preventDefault()
+              setIsOpen(true)
+            }
+          }}
+        >
           <IconTrash size={16} />
-        </button>
+        </div>
       </TooltipTrigger>
       <TooltipContent>
         <p>{t('delete')}</p>
diff --git a/web-app/src/containers/dialogs/EditMessageDialog.tsx b/web-app/src/containers/dialogs/EditMessageDialog.tsx
index 8faa32128..ade50befe 100644
--- a/web-app/src/containers/dialogs/EditMessageDialog.tsx
+++ b/web-app/src/containers/dialogs/EditMessageDialog.tsx
@@ -64,9 +64,19 @@ export function EditMessageDialog({
   const defaultTrigger = (
     <Tooltip>
       <TooltipTrigger asChild>
-        <button className="flex outline-0 items-center gap-1 hover:text-accent transition-colors cursor-pointer group relative">
+        <div 
+          className="flex outline-0 items-center gap-1 hover:text-accent transition-colors cursor-pointer group relative"
+          role="button"
+          tabIndex={0}
+          onKeyDown={(e) => {
+            if (e.key === 'Enter' || e.key === ' ') {
+              e.preventDefault()
+              setIsOpen(true)
+            }
+          }}
+        >
           <IconPencil size={16} />
-        </button>
+        </div>
       </TooltipTrigger>
       <TooltipContent>
         <p>{t('edit')}</p>
diff --git a/web-app/src/containers/dialogs/ErrorDialog.tsx b/web-app/src/containers/dialogs/ErrorDialog.tsx
index cd6ca879a..9f4784ad0 100644
--- a/web-app/src/containers/dialogs/ErrorDialog.tsx
+++ b/web-app/src/containers/dialogs/ErrorDialog.tsx
@@ -61,9 +61,17 @@ export default function ErrorDialog() {
 
         <div className="bg-main-view-fg/2 p-2 border border-main-view-fg/5 rounded-lg space-y-2">
           <div>
-            <button
+            <div
               onClick={() => setIsDetailExpanded(!isDetailExpanded)}
               className="flex items-center gap-1 text-sm text-main-view-fg/60 hover:text-main-view-fg/80 transition-colors cursor-pointer"
+              role="button"
+              tabIndex={0}
+              onKeyDown={(e) => {
+                if (e.key === 'Enter' || e.key === ' ') {
+                  e.preventDefault()
+                  setIsDetailExpanded(!isDetailExpanded)
+                }
+              }}
             >
               {isDetailExpanded ? (
                 <ChevronDown className="size-3" />
@@ -71,7 +79,7 @@ export default function ErrorDialog() {
                 <ChevronRight className="size-3" />
               )}
               Details
-            </button>
+            </div>
 
             {isDetailExpanded && (
               <div
diff --git a/web-app/src/containers/dialogs/LoadModelErrorDialog.tsx b/web-app/src/containers/dialogs/LoadModelErrorDialog.tsx
index 410305c46..b8227ef6f 100644
--- a/web-app/src/containers/dialogs/LoadModelErrorDialog.tsx
+++ b/web-app/src/containers/dialogs/LoadModelErrorDialog.tsx
@@ -131,9 +131,17 @@ export default function LoadModelErrorDialog() {
 
           {hasErrorDetail(modelLoadError) && (
             <div>
-              <button
+              <div
                 onClick={() => setIsDetailExpanded(!isDetailExpanded)}
                 className="flex items-center gap-1 text-sm text-main-view-fg/60 hover:text-main-view-fg/80 transition-colors cursor-pointer"
+                role="button"
+                tabIndex={0}
+                onKeyDown={(e) => {
+                  if (e.key === 'Enter' || e.key === ' ') {
+                    e.preventDefault()
+                    setIsDetailExpanded(!isDetailExpanded)
+                  }
+                }}
               >
                 {isDetailExpanded ? (
                   <ChevronDown className="size-3" />
@@ -141,7 +149,7 @@ export default function LoadModelErrorDialog() {
                   <ChevronRight className="size-3" />
                 )}
                 Details
-              </button>
+              </div>
 
               {isDetailExpanded && (
                 <div
diff --git a/web-app/src/containers/dialogs/MessageMetadataDialog.tsx b/web-app/src/containers/dialogs/MessageMetadataDialog.tsx
index 7f5e8c4e1..05ce29246 100644
--- a/web-app/src/containers/dialogs/MessageMetadataDialog.tsx
+++ b/web-app/src/containers/dialogs/MessageMetadataDialog.tsx
@@ -32,9 +32,19 @@ export function MessageMetadataDialog({
   const defaultTrigger = (
     <Tooltip>
       <TooltipTrigger asChild>
-        <button className="outline-0 focus:outline-0 flex items-center gap-1 hover:text-accent transition-colors cursor-pointer group relative">
+        <div 
+          className="outline-0 focus:outline-0 flex items-center gap-1 hover:text-accent transition-colors cursor-pointer group relative"
+          role="button"
+          tabIndex={0}
+          onKeyDown={(e) => {
+            if (e.key === 'Enter' || e.key === ' ') {
+              e.preventDefault()
+              setIsOpen(true)
+            }
+          }}
+        >
           <IconInfoCircle size={16} />
-        </button>
+        </div>
       </TooltipTrigger>
       <TooltipContent>
         <p>{t('metadata')}</p>