From 6a787efa3919f94a8443f6c37306232e37a91fe5 Mon Sep 17 00:00:00 2001
From: Pierre Ecarlat <pecarlat@grandlyon.com>
Date: Mon, 19 Aug 2024 11:58:17 +0000
Subject: [PATCH] feat(a11y): Unlocked challenges focusable with keyboard
---
src/components/Challenge/ChallengeCard/ChallengeCard.tsx | 8 +++++---
.../__snapshots__/ChallengeCard.spec.tsx.snap | 6 +++---
2 files changed, 8 insertions(+), 6 deletions(-)
diff --git a/src/components/Challenge/ChallengeCard/ChallengeCard.tsx b/src/components/Challenge/ChallengeCard/ChallengeCard.tsx
index 52248f325..12673d7f6 100644
--- a/src/components/Challenge/ChallengeCard/ChallengeCard.tsx
+++ b/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>
)
}
diff --git a/src/components/Challenge/ChallengeCard/__snapshots__/ChallengeCard.spec.tsx.snap b/src/components/Challenge/ChallengeCard/__snapshots__/ChallengeCard.spec.tsx.snap
index f0c8b96af..9631c07ba 100644
--- a/src/components/Challenge/ChallengeCard/__snapshots__/ChallengeCard.spec.tsx.snap
+++ b/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>
`;
--
GitLab