feat(a11y): Unlocked challenges focusable with keyboard

src/components/Challenge/ChallengeCard/ChallengeCard.tsx

@@ -42,18 +42,20 @@ const ChallengeCard = ({
   }
 
   return (
-    // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
-    <div
+    <button
       onClick={() => moveToSlide(index)}
       className={indexSlider === index ? 'slide active' : 'slide inactive'}
       style={{
         minWidth: `${cardWidth}px`,
         maxWidth: `${cardWidth}px`,
         minHeight: `${cardHeight}px`,
+        border: 'none',
+        background: 'none',
+        padding: 0,
       }}
     >
       {renderCard(userChallenge)}
-    </div>
+    </button>
   )
 }
 

src/components/Challenge/ChallengeCard/__snapshots__/ChallengeCard.spec.tsx.snap

@@ -2,9 +2,9 @@
 
 exports[`ChallengeCard component should be rendered correctly 1`] = `
 <div>
-  <div
+  <button
     class="slide active"
-    style="min-width: 200px; max-width: 200px; min-height: 400px;"
+    style="min-width: 200px; max-width: 200px; min-height: 400px; background: none; padding: 0px;"
   >
     <div
       class="cardContent cardDone"
@@ -86,6 +86,6 @@ RUISSEAU
         </button>
       </div>
     </div>
-  </div>
+  </button>
 </div>
 `;