fix(PDYE-1435): focus recursos y eventos (#748)

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

Author: JaviMunita

src/organisms/Events/TypeBox/LargeBox.tsx

@@ -31,7 +31,9 @@ export const LargeBox: FC<ItemsEventsProps> = ({
       borderRadius={vars('radii-big')}
       _active={cssActive}
       _hover={cssActive}
-      _focus={cssActive}
+      _focusVisible={{
+        boxShadow: `0 0 0 3px ${vars('colors-alert-deepSkyBlue')}`,
+      }}
     >
       <Ripples>
         <Flex cursor="pointer" w="fit-content" display={isMobile ? 'block' : 'flex'}>

src/organisms/Events/TypeBox/SmallBox.tsx

@@ -27,7 +27,9 @@ export const SmallBox: FC<ItemsEventsProps> = ({
       transition="box-shadow .3s"
       _active={cssActive}
       _hover={cssActive}
-      _focus={cssActive}
+      _focusVisible={{
+        boxShadow: `0 0 0 3px ${vars('colors-alert-deepSkyBlue')}`,
+      }}
       width="286px"
       height="247px"
       borderRadius={vars('radii-big')}

src/organisms/Resources/Resources.tsx

@@ -61,7 +61,9 @@ export const Resources: FC<ResourcesProps> = ({
       transition="box-shadow 0.3s"
       _active={cssActive}
       _hover={cssActive}
-      _focus={cssActive}
+      _focusVisible={{
+        boxShadow: `0 0 0 3px ${vars('colors-alert-deepSkyBlue')}`,
+      }}
       cursor="pointer"
       borderRadius={vars('radii-big')}
       border={vars('borders-light')}