From 2f92735548b310a96dca3744274f758deb9aae5b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Alejandro=20Guti=C3=A9rrez?=
 <35082514+alezmad@users.noreply.github.com>
Date: Thu, 29 Jan 2026 03:24:57 +0000
Subject: [PATCH] fix(ui): Replace nested button with div for accessibility

Changed outer button to div with role="button" to avoid HTML validation
error of nested buttons (translate button inside complaint card).

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 web/components/reviewiq/insights/ExecutiveSummary.tsx | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/web/components/reviewiq/insights/ExecutiveSummary.tsx b/web/components/reviewiq/insights/ExecutiveSummary.tsx
index 3819479..9d48a2e 100644
--- a/web/components/reviewiq/insights/ExecutiveSummary.tsx
+++ b/web/components/reviewiq/insights/ExecutiveSummary.tsx
@@ -118,10 +118,13 @@ function TopComplaintsSection({
                         domain.negativePercent >= 25 ? 'warning' : 'ok';
 
         return (
-          <button
+          <div
             key={domain.domain}
+            role="button"
+            tabIndex={0}
             onClick={() => onDomainClick?.(domain.domain as URTDomain)}
-            className={`w-full p-3 rounded-xl border-2 transition-all hover:shadow-md text-left ${
+            onKeyDown={(e) => e.key === 'Enter' && onDomainClick?.(domain.domain as URTDomain)}
+            className={`w-full p-3 rounded-xl border-2 transition-all hover:shadow-md text-left cursor-pointer ${
               severity === 'critical' ? 'bg-red-50 border-red-200 hover:border-red-300' :
               severity === 'warning' ? 'bg-orange-50 border-orange-200 hover:border-orange-300' :
               'bg-gray-50 border-gray-200 hover:border-gray-300'
@@ -188,7 +191,7 @@ function TopComplaintsSection({
 
               <ChevronRight className="w-4 h-4 text-gray-400 flex-shrink-0" />
             </div>
-          </button>
+          </div>
         );
       })}
     </div>