Merge pull request #6426 from menloresearch/fix/error-validate-nested-dom

fix: avoid error validate nested DOM

Author: urmauur

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>

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>

web-app/src/containers/dialogs/ErrorDialog.tsx

@@ -61,17 +61,25 @@ 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" />
               ) : (
                 <ChevronRight className="size-3" />
               )}
               Details
-            </button>
+            </div>
 
             {isDetailExpanded && (
               <div

web-app/src/containers/dialogs/LoadModelErrorDialog.tsx

@@ -131,17 +131,25 @@ 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" />
                 ) : (
                   <ChevronRight className="size-3" />
                 )}
                 Details
-              </button>
+              </div>
 
               {isDetailExpanded && (
                 <div

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>