fix(PDYE-1342): focus y clases courselist para probar en v8 (#738)

Co-authored-by: Javiera Munita <javiera.munita@eclass.cl>

Author: JaviMunita

src/organisms/CourseList/Boxes/BoxTraditional.tsx

@@ -30,22 +30,29 @@ export function BoxTraditional({ data, modalPaymentText }: IBoxTraditional): JSX
   return (
     <CourseBoxContext.Provider value={data}>
       <LinkBox
+        className="linkBoxTraditional"
         as="article"
         border={vars('borders-light')}
         borderRadius={vars('radii-big')}
         cursor="pointer"
         transition="box-shadow .3s"
         _active={cssActive}
         _hover={cssActive}
-        _focus={cssActive}
         overflow="hidden"
+        tabIndex={0}
+        role="link"
       >
         <WithRipples enabled={isCourseActive(data.action?.enabled ?? false, data.Profile?.id)}>
           <Flex direction="column" justify="space-between" h="100%">
             <Box className="CourseList-TraditionalBox">
               {!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}
+                    className="linkOverlay"
+                  />
                 )}
               <Header />
               <Section />

src/organisms/CourseList/CourseList.tsx

@@ -26,6 +26,7 @@ export function CourseList({
 
   return (
     <Box
+      className="courseListBox"
       display="grid"
       gridColumnGap={`${columnGap}rem`}
       gridRowGap="1.75rem"

src/organisms/CourseList/components/Footer.tsx

@@ -33,11 +33,14 @@ export function Footer({ modalPaymentText }: Type.FooterProps): JSX.Element | nu
       p="1rem"
       borderTop="1px solid"
       borderTopColor={vars('colors-neutral-platinum')}
+      tabIndex={0}
+      className="footerButtonBox"
     >
       {isCourseActive(action.enabled, Profile?.id) ? (
         <>
           {hasFinanzeFreezed && modalPaymentText ? (
             <Box
+              className="uno"
               color={vars('colors-main-deepSkyBlue')}
               backgroundColor="transparent"
               fontWeight="500"
@@ -56,6 +59,7 @@ export function Footer({ modalPaymentText }: Type.FooterProps): JSX.Element | nu
             </Box>
           ) : (
             <Text
+              className="dos"
               color={vars('colors-main-deepSkyBlue')}
               fontWeight="500"
               mr={action.hasIcon ? '1.5rem' : '0'}
@@ -70,6 +74,7 @@ export function Footer({ modalPaymentText }: Type.FooterProps): JSX.Element | nu
         </>
       ) : (
         <Text
+          className="tres"
           fontWeight="500"
           lineHeight="1.172rem"
           color={vars('colors-neutral-spanishGrey')}