From e7ad648ea848e86dbac458af55b83c12847bf0af Mon Sep 17 00:00:00 2001
From: Dimitris Trechas <dimitristrechas@users.noreply.github.com>
Date: Fri, 26 Jun 2026 00:17:05 +0300
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B=20Fixed=20hover-reveal=20View=20mo?=
 =?UTF-8?q?re=20buttons=20staying=20hidden=20on=20keyboard=20focus?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Hover-reveal analytics buttons were only visible on card hover, so keyboard users could tab to a focused but invisible control. Added focus-visible styles so the reveal state matches hover when navigating with the keyboard.
---
 .../PostAnalytics/Overview/components/newsletter-overview.tsx   | 2 +-
 .../views/PostAnalytics/Overview/components/web-overview.tsx    | 2 +-
 apps/posts/src/views/PostAnalytics/Overview/overview.tsx        | 2 +-
 apps/posts/src/views/PostAnalytics/components/kpi-card.tsx      | 2 +-
 apps/shade/src/components/patterns/kpi-card.stories.tsx         | 2 +-
 .../stats/src/views/Stats/Overview/components/overview-kpis.tsx | 2 +-
 6 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/apps/posts/src/views/PostAnalytics/Overview/components/newsletter-overview.tsx b/apps/posts/src/views/PostAnalytics/Overview/components/newsletter-overview.tsx
index ff872ab441b..f6a6d31be00 100644
--- a/apps/posts/src/views/PostAnalytics/Overview/components/newsletter-overview.tsx
+++ b/apps/posts/src/views/PostAnalytics/Overview/components/newsletter-overview.tsx
@@ -74,7 +74,7 @@ const NewsletterOverview: React.FC<NewsletterOverviewProps> = ({post, isNewslett
                         Newsletter performance
                     </CardTitle>
                 </CardHeader>
-                <Button className='absolute right-6 translate-x-10 opacity-0 transition-all duration-300 group-hover/datalist:translate-x-0 group-hover/datalist:opacity-100' size='sm' variant='outline' onClick={() => {
+                <Button className='absolute right-6 translate-x-10 opacity-0 transition-all duration-300 group-hover/datalist:translate-x-0 group-hover/datalist:opacity-100 focus-visible:translate-x-0 focus-visible:opacity-100' size='sm' variant='outline' onClick={() => {
                     navigate(`/posts/analytics/${postId}/newsletter`);
                 }}>View more</Button>
             </div>
diff --git a/apps/posts/src/views/PostAnalytics/Overview/components/web-overview.tsx b/apps/posts/src/views/PostAnalytics/Overview/components/web-overview.tsx
index 19be86e346d..5a0bc2467e3 100644
--- a/apps/posts/src/views/PostAnalytics/Overview/components/web-overview.tsx
+++ b/apps/posts/src/views/PostAnalytics/Overview/components/web-overview.tsx
@@ -43,7 +43,7 @@ const WebOverview: React.FC<WebOverviewProps> = ({chartData, range, isLoading, v
                             Web performance
                         </CardTitle>
                     </CardHeader>
-                    <Button className='absolute right-6 translate-x-10 opacity-0 transition-all duration-300 group-hover/datalist:translate-x-0 group-hover/datalist:opacity-100' size='sm' variant='outline' onClick={() => {
+                    <Button className='absolute right-6 translate-x-10 opacity-0 transition-all duration-300 group-hover/datalist:translate-x-0 group-hover/datalist:opacity-100 focus-visible:translate-x-0 focus-visible:opacity-100' size='sm' variant='outline' onClick={() => {
                         navigate(`/posts/analytics/${postId}/web`);
                     }}>View more</Button>
                 </div>
diff --git a/apps/posts/src/views/PostAnalytics/Overview/overview.tsx b/apps/posts/src/views/PostAnalytics/Overview/overview.tsx
index 6a9f85df5a6..e2dd1b82e01 100644
--- a/apps/posts/src/views/PostAnalytics/Overview/overview.tsx
+++ b/apps/posts/src/views/PostAnalytics/Overview/overview.tsx
@@ -145,7 +145,7 @@ const Overview: React.FC = () => {
                                 Growth
                                     </CardTitle>
                                 </CardHeader>
-                                <Button className='absolute right-6 translate-x-10 opacity-0 transition-all duration-200 group-hover:translate-x-0 group-hover:opacity-100' size='sm' variant='outline' onClick={() => {
+                                <Button className='absolute right-6 translate-x-10 opacity-0 transition-all duration-200 group-hover:translate-x-0 group-hover:opacity-100 focus-visible:translate-x-0 focus-visible:opacity-100' size='sm' variant='outline' onClick={() => {
                                     navigate(`/posts/analytics/${postId}/growth`);
                                 }}>View more</Button>
                             </div>
diff --git a/apps/posts/src/views/PostAnalytics/components/kpi-card.tsx b/apps/posts/src/views/PostAnalytics/components/kpi-card.tsx
index 298e5ef09a0..93662e7a329 100644
--- a/apps/posts/src/views/PostAnalytics/components/kpi-card.tsx
+++ b/apps/posts/src/views/PostAnalytics/components/kpi-card.tsx
@@ -32,7 +32,7 @@ export const KpiCardValue: React.FC<React.HTMLAttributes<HTMLDivElement>> = ({ch
 
 export const KpiCardMoreButton: React.FC<React.ComponentProps<typeof Button>> = ({children, className, ...props}) => {
     return (
-        <Button className={cn('absolute right-4 top-4 z-50 hidden translate-x-10 text-black dark:text-white/80 dark:hover:text-white opacity-0 transition-all duration-200 group-hover:translate-x-0 group-hover:opacity-100 md:visible! md:block!', className)} size='sm' variant='outline' {...props}>
+        <Button className={cn('absolute right-4 top-4 z-50 hidden translate-x-10 text-black dark:text-white/80 dark:hover:text-white opacity-0 transition-all duration-200 group-hover:translate-x-0 group-hover:opacity-100 focus-visible:translate-x-0 focus-visible:opacity-100 md:visible! md:block!', className)} size='sm' variant='outline' {...props}>
             {children}
         </Button>
     );
diff --git a/apps/shade/src/components/patterns/kpi-card.stories.tsx b/apps/shade/src/components/patterns/kpi-card.stories.tsx
index 330bacba6f9..16a1bebcdfc 100644
--- a/apps/shade/src/components/patterns/kpi-card.stories.tsx
+++ b/apps/shade/src/components/patterns/kpi-card.stories.tsx
@@ -144,7 +144,7 @@ export const WithHoverButton: Story = {
                     />
                 </div>
                 <Button
-                    className='absolute right-6 translate-x-full opacity-0 transition-all duration-300 group-hover:translate-x-0 group-hover:opacity-100'
+                    className='absolute right-6 translate-x-full opacity-0 transition-all duration-300 group-hover:translate-x-0 group-hover:opacity-100 focus-visible:translate-x-0 focus-visible:opacity-100'
                     size='sm'
                     variant='outline'
                 >
diff --git a/apps/stats/src/views/Stats/Overview/components/overview-kpis.tsx b/apps/stats/src/views/Stats/Overview/components/overview-kpis.tsx
index 00dbae837b2..ca3ab38965e 100644
--- a/apps/stats/src/views/Stats/Overview/components/overview-kpis.tsx
+++ b/apps/stats/src/views/Stats/Overview/components/overview-kpis.tsx
@@ -91,7 +91,7 @@ const OverviewKPICard: React.FC<OverviewKPICardProps> = ({
                     />
                 </div>
                 {onClick &&
-                    <Button className='absolute right-6 translate-x-10 opacity-0 transition-all duration-200 group-hover:translate-x-0 group-hover:opacity-100' size='sm' variant='outline' onClick={onClick}>View more</Button>
+                    <Button className='absolute right-6 translate-x-10 opacity-0 transition-all duration-200 group-hover:translate-x-0 group-hover:opacity-100 focus-visible:translate-x-0 focus-visible:opacity-100' size='sm' variant='outline' onClick={onClick}>View more</Button>
                 }
             </KpiCardHeader>
             <CardContent>