From 33774a44d4e89325464978d44f38307b6a540e11 Mon Sep 17 00:00:00 2001
From: lebaudantoine <lebaud.antoine131@gmail.com>
Date: Wed, 5 Mar 2025 14:28:13 +0100
Subject: [PATCH] =?UTF-8?q?=E2=99=BF=EF=B8=8F(frontend)=20improve=20switch?=
 =?UTF-8?q?=20component=20visual=20indicators=20per=20DSFR=20rules?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Update switch component following accessibility consultant recommendations:
make indicator outlined instead of filled when not selected and add checkmark
when selected. Changes align with DSFR guidelines to improve state visibility.
---
 src/frontend/src/primitives/Switch.tsx | 30 +++++++++++++++++++++++---
 1 file changed, 27 insertions(+), 3 deletions(-)

diff --git a/src/frontend/src/primitives/Switch.tsx b/src/frontend/src/primitives/Switch.tsx
index 566ee8d6..39255f12 100644
--- a/src/frontend/src/primitives/Switch.tsx
+++ b/src/frontend/src/primitives/Switch.tsx
@@ -14,6 +14,7 @@ export const StyledSwitch = styled(RACSwitch, {
     color: 'black',
     forcedColorAdjust: 'none',
     '& .indicator': {
+      position: 'relative',
       width: '2.6rem',
       height: '1.563rem',
       border: '0.125rem solid',
@@ -27,18 +28,39 @@ export const StyledSwitch = styled(RACSwitch, {
         width: '1.063rem',
         height: '1.063rem',
         borderRadius: '1.063rem',
-        background: 'primary.800',
-        transition: 'all 200ms',
+        border: '2px solid',
+        borderColor: 'primary.800',
+        background: 'white',
+        transition: 'opacity 10ms',
+        transitionDelay: '0ms',
       },
     },
+    '& .checkmark': {
+      position: 'absolute',
+      display: 'block',
+      top: '50%',
+      right: '0.25rem',
+      transform: 'translateY(-50%)',
+      color: 'primary.800',
+      fontSize: '0.75rem',
+      fontWeight: 'bold',
+      zIndex: 1,
+      opacity: 0,
+    },
     '&[data-selected] .indicator': {
       borderColor: 'primary.800',
       background: 'primary.800',
       _before: {
+        border: 'none',
         background: 'white',
         transform: 'translateX(100%)',
       },
     },
+    '&[data-selected] .checkmark': {
+      opacity: 1,
+      transition: 'opacity 30ms',
+      transitionDelay: '150ms',
+    },
     '&[data-disabled] .indicator': {
       borderColor: 'primary.200',
       background: 'transparent',
@@ -63,7 +85,9 @@ export type SwitchProps = StyledVariantProps<typeof StyledSwitch> &
  */
 export const Switch = ({ children, ...props }: SwitchProps) => (
   <StyledSwitch {...props}>
-    <div className="indicator" />
+    <div className="indicator">
+      <span className="checkmark">✓</span>
+    </div>
     {children}
   </StyledSwitch>
 )