From a2379386d8a3a2cf858ca30b422225282e61a423 Mon Sep 17 00:00:00 2001
From: Javiera Munita <javiera.munita@eclass.cl>
Date: Thu, 25 Sep 2025 14:33:58 -0300
Subject: [PATCH] fix(PDYE-1434): de focusWithin a focusVisible CourseList

---
 src/organisms/CourseList/Boxes/BoxImage.tsx   | 23 +++++++++++++++----
 .../CourseList/Boxes/BoxTraditional.tsx       |  3 +--
 2 files changed, 20 insertions(+), 6 deletions(-)

diff --git a/src/organisms/CourseList/Boxes/BoxImage.tsx b/src/organisms/CourseList/Boxes/BoxImage.tsx
index 31e131934..d0ea0994a 100644
--- a/src/organisms/CourseList/Boxes/BoxImage.tsx
+++ b/src/organisms/CourseList/Boxes/BoxImage.tsx
@@ -1,4 +1,4 @@
-import { Box, LinkOverlay } from '@chakra-ui/react'
+import { Box, LinkBox, LinkOverlay } from '@chakra-ui/react'
 
 import { vars } from '@theme'
 import { Ripples } from '@atoms'
@@ -35,8 +35,12 @@ export function BoxImage({
   }
   return (
     <WithRipples enabled={isCourseActive(data?.action?.enabled ?? false, data?.Profile?.id)}>
-      <Box
+      <LinkBox
         className="CourseList-ImageBox"
+        _focusVisible={{
+          boxShadow: `0 0 0 3px ${vars('colors-alert-deepSkyBlue')} inset`,
+        }}
+        tabIndex={0}
         sx={{
           backgroundImage: `linear-gradient(to bottom, rgba(0,0,0,0) 35%, rgba(0,0,0,1) 100%), url(${backgroundImg})`,
           color: vars('colors-neutral-white'),
@@ -52,12 +56,23 @@ export function BoxImage({
           margin: m,
           justifyContent: 'end',
           textAlign: 'left',
+
+          a: {
+            '&:active': {
+              boxShadow: 'none',
+            },
+          },
         }}
       >
         {!data?.hasFinanzeFreezed &&
           isCourseActive(data?.action?.enabled ?? false, data?.Profile?.id) && (
-            <LinkOverlay href={data?.action?.href} isExternal={data?.action?.targetBlank} />
+            <LinkOverlay
+              href={data?.action?.href}
+              isExternal={data?.action?.targetBlank}
+              tabIndex={-1}
+            />
           )}
+
         <Box className="textBox" bottom="20px" display="flex" flexDirection="column" gap="8px">
           <Box
             as="h2"
@@ -88,7 +103,7 @@ export function BoxImage({
               )
           )}
         </Box>
-      </Box>
+      </LinkBox>
     </WithRipples>
   )
 }
diff --git a/src/organisms/CourseList/Boxes/BoxTraditional.tsx b/src/organisms/CourseList/Boxes/BoxTraditional.tsx
index 4e8b8204e..9457b5704 100644
--- a/src/organisms/CourseList/Boxes/BoxTraditional.tsx
+++ b/src/organisms/CourseList/Boxes/BoxTraditional.tsx
@@ -43,8 +43,7 @@ export function BoxTraditional({ data, modalPaymentText }: IBoxTraditional): JSX
         transition="box-shadow .3s"
         overflow="hidden"
         _hover={cssActive}
-        _active={cssActive}
-        _focusWithin={{
+        _focusVisible={{
           boxShadow: `0 0 0 3px ${vars('colors-alert-deepSkyBlue')} inset`,
         }}
         tabIndex={0}