fix(PDYE-1342): focus visible de listado cursos y botones barra transversal (#739)

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

Author: JaviMunita

src/molecules/NavBarButtons/NavBarButton.tsx

@@ -63,6 +63,11 @@ export const NavBarButton = ({
       className="nav-bar-button"
       id={isAccessibility ? 'UserWayButton' : ''}
       onClick={isAccessibility ? triggerWidget : onClick}
+      _focusVisible={{
+        outline: `3px solid ${vars('colors-alert-deepSkyBlue')}`,
+        borderRadius: '2px',
+      }}
+      tabIndex={0}
       sx={{
         alignItems: 'center',
         background: 'none !important',
@@ -115,8 +120,14 @@ export const NavBarButton = ({
         },
       }}
     >
-      <Box className="nav-bar-icon">{buttonType[type].icon}</Box>
-      {!isMobile && <Box className="nav-bar-text">{buttonType[type].text}</Box>}
+      <Box className="nav-bar-icon" tabIndex={-1}>
+        {buttonType[type].icon}
+      </Box>
+      {!isMobile && (
+        <Box className="nav-bar-text" tabIndex={-1}>
+          {buttonType[type].text}
+        </Box>
+      )}
     </Box>
   )
 }

src/organisms/CourseList/Boxes/BoxTraditional.tsx

@@ -16,44 +16,42 @@ interface WithRipplesProps {
 function WithRipples({ enabled, children }: WithRipplesProps): JSX.Element {
   return enabled ? <Ripples>{children}</Ripples> : <>{children}</>
 }
-
 interface IBoxTraditional {
   data: Type.ExtendAcademicList
   modalPaymentText?: Type.PaymentText
 }
 
 export function BoxTraditional({ data, modalPaymentText }: IBoxTraditional): JSX.Element {
+  const isClickable = isCourseActive(data.action?.enabled ?? false, data.Profile?.id)
+  const hasHref = !!data.action?.href
+
   const cssActive = {
     boxShadow: `0 2px 7px 0 ${vars('colors-neutral-silverSand')}`,
   }
 
   return (
     <CourseBoxContext.Provider value={data}>
       <LinkBox
-        className="linkBoxTraditional"
         as="article"
         border={vars('borders-light')}
         borderRadius={vars('radii-big')}
-        cursor="pointer"
+        cursor={isClickable ? 'pointer' : 'default'}
         transition="box-shadow .3s"
-        _active={cssActive}
-        _hover={cssActive}
         overflow="hidden"
-        tabIndex={0}
+        _hover={cssActive}
+        _active={cssActive}
+        _focusWithin={{
+          boxShadow: `0 0 0 3px ${vars('colors-alert-deepSkyBlue')} inset`,
+        }}
+        tabIndex={!hasHref && isClickable ? 0 : undefined}
         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}
-                    tabIndex={-1}
-                    className="linkOverlay"
-                  />
-                )}
+              {isClickable && hasHref && (
+                <LinkOverlay href={data.action?.href} isExternal={data.action?.targetBlank} />
+              )}
               <Header />
               <Section />
             </Box>

src/organisms/CourseList/components/Footer.tsx

@@ -33,14 +33,11 @@ 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"
@@ -59,7 +56,6 @@ 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'}
@@ -74,7 +70,6 @@ export function Footer({ modalPaymentText }: Type.FooterProps): JSX.Element | nu
         </>
       ) : (
         <Text
-          className="tres"
           fontWeight="500"
           lineHeight="1.172rem"
           color={vars('colors-neutral-spanishGrey')}