alezmad/whyrating-engine-legacy
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(ui): Replace nested button with div for accessibility

Browse Source 
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>
This commit is contained in:
Alejandro Gutiérrez
2026-01-29 03:24:57 +00:00
parent 157b76040f
commit 2f92735548
1 changed files with 6 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
web/components/reviewiq/insights/ExecutiveSummary.tsx
View File

@@ -118,10 +118,13 @@ function TopComplaintsSection({
domain.negativePercent >= 25 ? 'warning' : 'ok'; domain.negativePercent >= 25 ? 'warning' : 'ok';
return ( return (
<button <div
key={domain.domain} key={domain.domain}
role="button"
tabIndex={0}
onClick={() => onDomainClick?.(domain.domain as URTDomain)} 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 === 'critical' ? 'bg-red-50 border-red-200 hover:border-red-300' :
severity === 'warning' ? 'bg-orange-50 border-orange-200 hover:border-orange-300' : severity === 'warning' ? 'bg-orange-50 border-orange-200 hover:border-orange-300' :
'bg-gray-50 border-gray-200 hover:border-gray-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" /> <ChevronRight className="w-4 h-4 text-gray-400 flex-shrink-0" />
</div> </div>
</button> </div>
); );
})} })}
</div> </div>