From 119e79cd7ca2d4addb2edecc79b46d11bc88477f Mon Sep 17 00:00:00 2001
From: Cristian Magherusan-Stanciu <cristi.magherusan@gmail.com>
Date: Thu, 28 May 2026 18:24:05 +0200
Subject: [PATCH] ux(frontend/recs): enlarge cell-expand chevron (closes #280)

Bump .rec-cell-chevron from font-size 1.2em/24px target to 1.5em/32px,
add focus-visible highlight, and add two tests: one asserting the
chevron is a <button> outside .rec-cell-summary-content (keyboard
accessible without extra keydown wiring), one confirming no-overlap with
the summary content cell.
---
 frontend/src/__tests__/recommendations.test.ts | 16 ++++++++++++++++
 frontend/src/styles/components.css             | 15 ++++++++++-----
 2 files changed, 26 insertions(+), 5 deletions(-)

diff --git a/frontend/src/__tests__/recommendations.test.ts b/frontend/src/__tests__/recommendations.test.ts
index 30bf8668d..8eaeed578 100644
--- a/frontend/src/__tests__/recommendations.test.ts
+++ b/frontend/src/__tests__/recommendations.test.ts
@@ -4522,6 +4522,22 @@ describe('Issues #225 + #226: cell grouping with savings range and collapse/expa
       expect(chevron).not.toBeNull();
     });
 
+    test('chevron is a <button> with aria-label and is not inside rec-cell-summary-content (closes #280)', async () => {
+      const recs = multiVariantRecs();
+      (api.getRecommendations as jest.Mock).mockResolvedValue({ summary: {}, recommendations: recs });
+      (state.getRecommendations as jest.Mock).mockReturnValue(recs);
+      await loadRecommendations();
+
+      const chevron = document.querySelector<HTMLButtonElement>('.rec-cell-chevron');
+      expect(chevron).not.toBeNull();
+      // Must be a <button> so native Enter/Space keyboard activation works without extra keydown handlers.
+      expect(chevron!.tagName.toLowerCase()).toBe('button');
+      expect(chevron!.getAttribute('type')).toBe('button');
+      expect(chevron!.getAttribute('aria-label')).toBeTruthy();
+      // Chevron must NOT be a descendant of .rec-cell-summary-content.
+      expect(chevron!.closest('.rec-cell-summary-content')).toBeNull();
+    });
+
     test('clicking chevron expands the cell and shows variant rows', async () => {
       const recs = multiVariantRecs();
       (api.getRecommendations as jest.Mock).mockResolvedValue({ summary: {}, recommendations: recs });
diff --git a/frontend/src/styles/components.css b/frontend/src/styles/components.css
index 46395a4c2..662520899 100644
--- a/frontend/src/styles/components.css
+++ b/frontend/src/styles/components.css
@@ -897,18 +897,23 @@ tr.rec-cell-summary-row:hover {
     background: transparent;
     border: none;
     cursor: pointer;
-    font-size: 1.2em;
+    font-size: 1.5em;
     color: var(--cudly-text-muted);
-    padding: 4px;
-    min-width: 24px;
-    min-height: 24px;
+    padding: 6px;
+    min-width: 32px;
+    min-height: 32px;
     line-height: 1;
     display: inline-flex;
     align-items: center;
     justify-content: center;
+    border-radius: 4px;
+    transition: background 0.15s, color 0.15s;
 }
-.rec-cell-chevron:hover {
+.rec-cell-chevron:hover,
+.rec-cell-chevron:focus-visible {
     color: var(--cudly-primary);
+    background: var(--cudly-info-bg, #eaf0fb);
+    outline: none;
 }
 .rec-cell-identity {
     font-weight: 500;