From 274436b99a8b100c282a529328003d46c2640cec Mon Sep 17 00:00:00 2001
From: Ameer-5-5 <alaminaminu168@gmail.com>
Date: Thu, 23 Jul 2026 18:40:46 +0000
Subject: [PATCH 1/2] feat: card touch ripple

---
 app/styles/touch.css                         | 20 ++++++++++++++++++++
 components/PredictionCard.tsx                |  4 ++--
 components/__tests__/PredictionCard.test.tsx |  6 ++++--
 3 files changed, 26 insertions(+), 4 deletions(-)

diff --git a/app/styles/touch.css b/app/styles/touch.css
index b5e541d3..a8d9ca3e 100644
--- a/app/styles/touch.css
+++ b/app/styles/touch.css
@@ -41,4 +41,24 @@
     min-height: 44px;
     min-width: 44px;
   }
+
+  .touch-ripple {
+    position: relative;
+    overflow: hidden;
+  }
+
+  .touch-ripple:active::after {
+    content: "";
+    position: absolute;
+    inset: 0;
+    background: rgba(148, 163, 184, 0.18);
+    border-radius: inherit;
+    pointer-events: none;
+    animation: touch-ripple 220ms ease-out;
+  }
+
+  @keyframes touch-ripple {
+    from { opacity: 1; transform: scale(0.96); }
+    to { opacity: 0; transform: scale(1); }
+  }
 }
diff --git a/components/PredictionCard.tsx b/components/PredictionCard.tsx
index 3c18b593..8b4ff332 100644
--- a/components/PredictionCard.tsx
+++ b/components/PredictionCard.tsx
@@ -105,7 +105,7 @@ const PredictionCard: React.FC<PredictionCardProps> = ({ prediction }) => {
 
   return (
     /* touch-target: enforces ≥44px hit area (WCAG 2.5.5 / Apple HIG). */
-    <button className="touch-target w-full text-left bg-card p-4 rounded-xl shadow-lg hover:bg-muted/50 transition duration-200 cursor-pointer border border-border focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2">
+    <button className="touch-target touch-ripple w-full text-left bg-card p-4 rounded-xl shadow-lg hover:bg-muted/50 transition duration-200 cursor-pointer border border-border focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2">
       <div className="flex justify-between items-start mb-3">
         <div className="flex flex-col items-start gap-1 pr-2">
           <h3 className="text-lg font-semibold text-card-foreground line-clamp-2">{title}</h3>
@@ -157,7 +157,7 @@ const PredictionCard: React.FC<PredictionCardProps> = ({ prediction }) => {
           <CollapsibleTrigger asChild>
             {/* touch-target: guarantees ≥44px tap area on the Odds trigger (WCAG 2.5.5). */}
             <button
-              className="touch-target flex w-full items-center justify-between px-2 rounded hover:bg-muted/30 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+              className="touch-target touch-ripple flex w-full items-center justify-between px-2 rounded hover:bg-muted/30 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
               aria-expanded={isOddsExpanded}
               aria-controls="odds-breakdown"
             >
diff --git a/components/__tests__/PredictionCard.test.tsx b/components/__tests__/PredictionCard.test.tsx
index 42ce6c15..6e529e6e 100644
--- a/components/__tests__/PredictionCard.test.tsx
+++ b/components/__tests__/PredictionCard.test.tsx
@@ -208,19 +208,21 @@ describe('PredictionsList loading state', () => {
 // --- Touch Target Tests (WCAG 2.5.5 / Apple HIG ≥44px) ---
 
 describe('PredictionCard touch targets', () => {
-  it('outer card button has touch-target class', () => {
+  it('outer card button has touch-target and touch-ripple classes', () => {
     render(<PredictionCard prediction={mockPrediction} />);
     // The root interactive element must carry the touch-target utility class
     // which enforces min-height: 44px and min-width: 44px.
     const card = screen.getByRole('button', { name: /NBA Finals/i });
     expect(card).toHaveClass('touch-target');
+    expect(card).toHaveClass('touch-ripple');
   });
 
-  it('odds collapsible trigger has touch-target class', () => {
+  it('odds collapsible trigger has touch-target and touch-ripple classes', () => {
     render(<PredictionCard prediction={mockPrediction} />);
     // Query specifically by aria-controls to distinguish from the outer card button.
     const oddsTrigger = document.querySelector('[aria-controls="odds-breakdown"]') as HTMLElement;
     expect(oddsTrigger).toHaveClass('touch-target');
+    expect(oddsTrigger).toHaveClass('touch-ripple');
   });
 
   it('odds trigger uses aria-expanded to reflect collapsed state', () => {

From c00f70b10a8ddffb761a8146611912113d4ad99b Mon Sep 17 00:00:00 2001
From: Ameer-5-5 <alaminaminu168@gmail.com>
Date: Thu, 23 Jul 2026 18:57:44 +0000
Subject: [PATCH 2/2] fix: virtualized row focus

---
 app/__tests__/focus-visible.test.js | 5 +++++
 app/styles/focus.css                | 4 ++--
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/app/__tests__/focus-visible.test.js b/app/__tests__/focus-visible.test.js
index 42217915..fa659c3d 100644
--- a/app/__tests__/focus-visible.test.js
+++ b/app/__tests__/focus-visible.test.js
@@ -18,6 +18,11 @@ describe("focus-visible CSS layer", () => {
     expect(css).toContain("outline-offset:");
   });
 
+  it("focus.css targets rows marked as actively focused", () => {
+    const css = fs.readFileSync(focusCssPath, "utf8");
+    expect(css).toContain('[data-focus-visible="true"]');
+  });
+
   it("focus.css provides a dark-mode adjustment rule", () => {
     const css = fs.readFileSync(focusCssPath, "utf8");
     expect(css).toContain(".dark :focus-visible");
diff --git a/app/styles/focus.css b/app/styles/focus.css
index 46b14243..1a579d54 100644
--- a/app/styles/focus.css
+++ b/app/styles/focus.css
@@ -29,7 +29,7 @@
    * offset so it remains visible on both light and dark backgrounds.
    */
   :focus-visible,
-  [data-focus-visible] {
+  [data-focus-visible="true"] {
     outline: 3px solid hsl(var(--ring, 210 100% 56%));
     outline-offset: 2px;
     border-radius: var(--radius, 0.375rem);
@@ -44,7 +44,7 @@
    * white inner shadow acts as a separator without adding DOM nodes.
    */
   .dark :focus-visible,
-  .dark [data-focus-visible] {
+  .dark [data-focus-visible="true"] {
     box-shadow: 0 0 0 2px hsl(var(--background, 222 47% 11%));
   }