From 99d667c12a9e40ba01cedb5b203780587025da52 Mon Sep 17 00:00:00 2001
From: LucasBeneston <lucas.beneston@passculture.app>
Date: Fri, 10 Jan 2025 13:17:56 +0100
Subject: [PATCH] (PC-33786) feat(accessibility): add status details in
 ActionPlanTag

---
 ...lityActionPlan.native.test.tsx.native-snap | 306 +++++++++---------
 .../Buttons/ActionPlanTag/ActionPlanTag.tsx   |   9 +-
 .../AccessibilityActionPlan2024.tsx           |  20 +-
 3 files changed, 173 insertions(+), 162 deletions(-)

diff --git a/__snapshots__/features/profile/pages/Accessibility/AccessibilityActionPlan.native.test.tsx.native-snap b/__snapshots__/features/profile/pages/Accessibility/AccessibilityActionPlan.native.test.tsx.native-snap
index 23feee85ee3..a20012eaf0f 100644
--- a/__snapshots__/features/profile/pages/Accessibility/AccessibilityActionPlan.native.test.tsx.native-snap
+++ b/__snapshots__/features/profile/pages/Accessibility/AccessibilityActionPlan.native.test.tsx.native-snap
@@ -3158,7 +3158,7 @@ exports[`AccessibilityActionPlan should render correctly 1`] = `
                   ]
                 }
               >
-                 - 
+                - 
                 Réalisé
               </Text>
             </Text>
@@ -3346,7 +3346,7 @@ exports[`AccessibilityActionPlan should render correctly 1`] = `
                     ]
                   }
                 >
-                   - 
+                  - 
                   Réalisé
                 </Text>
               </Text>
@@ -3425,7 +3425,7 @@ exports[`AccessibilityActionPlan should render correctly 1`] = `
                   ]
                 }
               >
-                 - 
+                - 
                 Réalisé
               </Text>
             </Text>
@@ -3503,7 +3503,7 @@ exports[`AccessibilityActionPlan should render correctly 1`] = `
                   ]
                 }
               >
-                 - 
+                - 
                 Réalisé
               </Text>
             </Text>
@@ -3691,7 +3691,7 @@ exports[`AccessibilityActionPlan should render correctly 1`] = `
                     ]
                   }
                 >
-                   - 
+                  - 
                   Réalisé
                 </Text>
               </Text>
@@ -3880,7 +3880,7 @@ exports[`AccessibilityActionPlan should render correctly 1`] = `
                     ]
                   }
                 >
-                   - 
+                  - 
                   Réalisé
                 </Text>
               </Text>
@@ -3959,7 +3959,7 @@ exports[`AccessibilityActionPlan should render correctly 1`] = `
                   ]
                 }
               >
-                 - 
+                - 
                 Réalisé
               </Text>
             </Text>
@@ -4023,22 +4023,136 @@ exports[`AccessibilityActionPlan should render correctly 1`] = `
                 ]
               }
             >
-              Mettre en place une charte graphique 100% accessible
               <Text
-                done={false}
                 style={
                   [
                     {
                       "color": "#161617",
-                      "fontFamily": "Montserrat-SemiBold",
+                      "fontFamily": "Montserrat-Medium",
                       "fontSize": 16,
                       "lineHeight": 25.6,
                     },
                   ]
                 }
               >
-                 - 
-                Prochainement
+                Rendre le site
+                 
+                <View>
+                  <View
+                    accessibilityLabel="https://passculture.app/"
+                    accessibilityRole="link"
+                    accessibilityState={
+                      {
+                        "busy": undefined,
+                        "checked": undefined,
+                        "disabled": undefined,
+                        "expanded": undefined,
+                        "selected": undefined,
+                      }
+                    }
+                    accessibilityValue={
+                      {
+                        "max": undefined,
+                        "min": undefined,
+                        "now": undefined,
+                        "text": undefined,
+                      }
+                    }
+                    accessible={true}
+                    focusable={true}
+                    onClick={[Function]}
+                    onResponderGrant={[Function]}
+                    onResponderMove={[Function]}
+                    onResponderRelease={[Function]}
+                    onResponderTerminate={[Function]}
+                    onResponderTerminationRequest={[Function]}
+                    onStartShouldSetResponder={[Function]}
+                    style={
+                      [
+                        [
+                          {
+                            "userSelect": "auto",
+                          },
+                          {
+                            "top": 3,
+                          },
+                        ],
+                        {
+                          "opacity": 1,
+                        },
+                      ]
+                    }
+                    testID="https://passculture.app/"
+                  >
+                    <View
+                      paddingForIcon={0}
+                      style={
+                        [
+                          {
+                            "alignItems": "center",
+                            "flexDirection": "row",
+                            "top": 0,
+                          },
+                        ]
+                      }
+                    >
+                      <View
+                        accessibilityLabel="Nouvelle fenêtre"
+                        height={16}
+                        testID="button-icon"
+                        width={16}
+                      >
+                        <Text>
+                          button-icon-SVG-Mock
+                        </Text>
+                      </View>
+                      <View
+                        numberOfSpaces={1}
+                        style={
+                          [
+                            {
+                              "width": 4,
+                            },
+                          ]
+                        }
+                      />
+                      <Text
+                        style={
+                          [
+                            {
+                              "color": "#eb0055",
+                              "fontFamily": "Montserrat-SemiBold",
+                              "fontSize": 12,
+                              "lineHeight": 19.2,
+                            },
+                          ]
+                        }
+                        typography="BodyAccentXs"
+                      >
+                        https://passculture.app/
+                      </Text>
+                    </View>
+                  </View>
+                </View>
+                 
+                100% accessible
+                <Text
+                  done={false}
+                  style={
+                    [
+                      {
+                        "color": "#161617",
+                        "fontFamily": "Montserrat-SemiBold",
+                        "fontSize": 16,
+                        "lineHeight": 25.6,
+                      },
+                    ]
+                  }
+                >
+                  - 
+                  En cours
+                   - poursuivi en 2025
+                </Text>
               </Text>
             </Text>
           </View>
@@ -4101,7 +4215,7 @@ exports[`AccessibilityActionPlan should render correctly 1`] = `
                 ]
               }
             >
-              Réaliser un nouvel audit d’accessibilité du portail pro par un cabinet externe
+              Améliorer la lisibilité de l’accessibilité des offres avec la mise en place des modalités d’accessibilité par offre
               <Text
                 done={false}
                 style={
@@ -4115,8 +4229,9 @@ exports[`AccessibilityActionPlan should render correctly 1`] = `
                   ]
                 }
               >
-                 - 
-                Prochainement
+                - 
+                En cours
+                 - poursuivi en 2025
               </Text>
             </Text>
           </View>
@@ -4179,135 +4294,23 @@ exports[`AccessibilityActionPlan should render correctly 1`] = `
                 ]
               }
             >
+              Mettre en place une charte graphique 100% accessible
               <Text
+                done={false}
                 style={
                   [
                     {
                       "color": "#161617",
-                      "fontFamily": "Montserrat-Medium",
+                      "fontFamily": "Montserrat-SemiBold",
                       "fontSize": 16,
                       "lineHeight": 25.6,
                     },
                   ]
                 }
               >
-                Rendre le site
-                 
-                <View>
-                  <View
-                    accessibilityLabel="https://passculture.app/"
-                    accessibilityRole="link"
-                    accessibilityState={
-                      {
-                        "busy": undefined,
-                        "checked": undefined,
-                        "disabled": undefined,
-                        "expanded": undefined,
-                        "selected": undefined,
-                      }
-                    }
-                    accessibilityValue={
-                      {
-                        "max": undefined,
-                        "min": undefined,
-                        "now": undefined,
-                        "text": undefined,
-                      }
-                    }
-                    accessible={true}
-                    focusable={true}
-                    onClick={[Function]}
-                    onResponderGrant={[Function]}
-                    onResponderMove={[Function]}
-                    onResponderRelease={[Function]}
-                    onResponderTerminate={[Function]}
-                    onResponderTerminationRequest={[Function]}
-                    onStartShouldSetResponder={[Function]}
-                    style={
-                      [
-                        [
-                          {
-                            "userSelect": "auto",
-                          },
-                          {
-                            "top": 3,
-                          },
-                        ],
-                        {
-                          "opacity": 1,
-                        },
-                      ]
-                    }
-                    testID="https://passculture.app/"
-                  >
-                    <View
-                      paddingForIcon={0}
-                      style={
-                        [
-                          {
-                            "alignItems": "center",
-                            "flexDirection": "row",
-                            "top": 0,
-                          },
-                        ]
-                      }
-                    >
-                      <View
-                        accessibilityLabel="Nouvelle fenêtre"
-                        height={16}
-                        testID="button-icon"
-                        width={16}
-                      >
-                        <Text>
-                          button-icon-SVG-Mock
-                        </Text>
-                      </View>
-                      <View
-                        numberOfSpaces={1}
-                        style={
-                          [
-                            {
-                              "width": 4,
-                            },
-                          ]
-                        }
-                      />
-                      <Text
-                        style={
-                          [
-                            {
-                              "color": "#eb0055",
-                              "fontFamily": "Montserrat-SemiBold",
-                              "fontSize": 12,
-                              "lineHeight": 19.2,
-                            },
-                          ]
-                        }
-                        typography="BodyAccentXs"
-                      >
-                        https://passculture.app/
-                      </Text>
-                    </View>
-                  </View>
-                </View>
-                 
-                100% accessible
-                <Text
-                  done={false}
-                  style={
-                    [
-                      {
-                        "color": "#161617",
-                        "fontFamily": "Montserrat-SemiBold",
-                        "fontSize": 16,
-                        "lineHeight": 25.6,
-                      },
-                    ]
-                  }
-                >
-                   - 
-                  En cours
-                </Text>
+                - 
+                Prochainement
+                 - a faire en 2025
               </Text>
             </Text>
           </View>
@@ -4370,7 +4373,7 @@ exports[`AccessibilityActionPlan should render correctly 1`] = `
                 ]
               }
             >
-              Améliorer la lisibilité de l’accessibilité des offres avec la mise en place des modalités d’accessibilité par offre
+              Réaliser un nouvel audit d’accessibilité du portail pro par un cabinet externe
               <Text
                 done={false}
                 style={
@@ -4384,8 +4387,9 @@ exports[`AccessibilityActionPlan should render correctly 1`] = `
                   ]
                 }
               >
-                 - 
-                En cours
+                - 
+                Prochainement
+                 - a faire en 2025
               </Text>
             </Text>
           </View>
@@ -4510,7 +4514,7 @@ exports[`AccessibilityActionPlan should render correctly 1`] = `
                   ]
                 }
               >
-                 - 
+                - 
                 Réalisé
               </Text>
             </Text>
@@ -4588,7 +4592,7 @@ exports[`AccessibilityActionPlan should render correctly 1`] = `
                   ]
                 }
               >
-                 - 
+                - 
                 Réalisé
               </Text>
             </Text>
@@ -4763,7 +4767,7 @@ exports[`AccessibilityActionPlan should render correctly 1`] = `
                   ]
                 }
               >
-                 - 
+                - 
                 Réalisé
               </Text>
             </Text>
@@ -4938,7 +4942,7 @@ exports[`AccessibilityActionPlan should render correctly 1`] = `
                   ]
                 }
               >
-                 - 
+                - 
                 Réalisé
               </Text>
             </Text>
@@ -5016,7 +5020,7 @@ exports[`AccessibilityActionPlan should render correctly 1`] = `
                   ]
                 }
               >
-                 - 
+                - 
                 Réalisé
               </Text>
             </Text>
@@ -5206,7 +5210,7 @@ exports[`AccessibilityActionPlan should render correctly 1`] = `
                     ]
                   }
                 >
-                   - 
+                  - 
                   Réalisé
                 </Text>
               </Text>
@@ -5285,7 +5289,7 @@ exports[`AccessibilityActionPlan should render correctly 1`] = `
                   ]
                 }
               >
-                 - 
+                - 
                 Réalisé
               </Text>
             </Text>
@@ -5411,7 +5415,7 @@ exports[`AccessibilityActionPlan should render correctly 1`] = `
                   ]
                 }
               >
-                 - 
+                - 
                 Réalisé
               </Text>
             </Text>
@@ -5489,7 +5493,7 @@ exports[`AccessibilityActionPlan should render correctly 1`] = `
                   ]
                 }
               >
-                 - 
+                - 
                 Réalisé
               </Text>
             </Text>
@@ -5567,7 +5571,7 @@ exports[`AccessibilityActionPlan should render correctly 1`] = `
                   ]
                 }
               >
-                 - 
+                - 
                 Réalisé
               </Text>
             </Text>
@@ -5645,7 +5649,7 @@ exports[`AccessibilityActionPlan should render correctly 1`] = `
                   ]
                 }
               >
-                 - 
+                - 
                 Réalisé
               </Text>
             </Text>
@@ -5723,7 +5727,7 @@ exports[`AccessibilityActionPlan should render correctly 1`] = `
                   ]
                 }
               >
-                 - 
+                - 
                 Réalisé
               </Text>
             </Text>
@@ -5801,7 +5805,7 @@ exports[`AccessibilityActionPlan should render correctly 1`] = `
                   ]
                 }
               >
-                 - 
+                - 
                 Réalisé
               </Text>
             </Text>
@@ -5879,7 +5883,7 @@ exports[`AccessibilityActionPlan should render correctly 1`] = `
                   ]
                 }
               >
-                 - 
+                - 
                 Réalisé
               </Text>
             </Text>
@@ -5957,7 +5961,7 @@ exports[`AccessibilityActionPlan should render correctly 1`] = `
                   ]
                 }
               >
-                 - 
+                - 
                 Réalisé
               </Text>
             </Text>
diff --git a/src/features/profile/components/Buttons/ActionPlanTag/ActionPlanTag.tsx b/src/features/profile/components/Buttons/ActionPlanTag/ActionPlanTag.tsx
index b0ac23b7d18..a939cf07698 100644
--- a/src/features/profile/components/Buttons/ActionPlanTag/ActionPlanTag.tsx
+++ b/src/features/profile/components/Buttons/ActionPlanTag/ActionPlanTag.tsx
@@ -11,10 +11,17 @@ export enum ActionPlanStatus {
 
 export const ActionPlanTag = ({
   status = ActionPlanStatus.DONE,
+  details,
 }: {
   status?: ActionPlanStatus
+  details?: string
 }) => {
-  return <StyledButtonText done={status === ActionPlanStatus.DONE}> - {status}</StyledButtonText>
+  return (
+    <StyledButtonText done={status === ActionPlanStatus.DONE}>
+      - {status}
+      {details && ` - ${details}`}
+    </StyledButtonText>
+  )
 }
 
 const StyledButtonText = styled(TypoDS.BodyAccent)<{ done: boolean }>(({ theme, done }) => ({
diff --git a/src/features/profile/pages/Accessibility/AccessibilityActionPlan2024.tsx b/src/features/profile/pages/Accessibility/AccessibilityActionPlan2024.tsx
index 4e999ae25cb..3865ff5d915 100644
--- a/src/features/profile/pages/Accessibility/AccessibilityActionPlan2024.tsx
+++ b/src/features/profile/pages/Accessibility/AccessibilityActionPlan2024.tsx
@@ -75,14 +75,6 @@ export const AccessibilityActionPlan2024 = () => (
         <ActionPlanTag status={ActionPlanStatus.DONE} />
       </BulletListItem>
 
-      <BulletListItem text="Mettre en place une charte graphique 100% accessible">
-        <ActionPlanTag status={ActionPlanStatus.TODO} />
-      </BulletListItem>
-
-      <BulletListItem text="Réaliser un nouvel audit d’accessibilité du portail pro par un cabinet externe">
-        <ActionPlanTag status={ActionPlanStatus.TODO} />
-      </BulletListItem>
-
       <BulletListItem>
         <TypoDS.Body>
           Rendre le site{' '}
@@ -94,12 +86,20 @@ export const AccessibilityActionPlan2024 = () => (
             externalNav={{ url: 'https://passculture.app/' }}
           />{' '}
           100% accessible
-          <ActionPlanTag status={ActionPlanStatus.ONGOING} />
+          <ActionPlanTag status={ActionPlanStatus.ONGOING} details="poursuivi en 2025" />
         </TypoDS.Body>
       </BulletListItem>
 
       <BulletListItem text="Améliorer la lisibilité de l’accessibilité des offres avec la mise en place des modalités d’accessibilité par offre">
-        <ActionPlanTag status={ActionPlanStatus.ONGOING} />
+        <ActionPlanTag status={ActionPlanStatus.ONGOING} details="poursuivi en 2025" />
+      </BulletListItem>
+
+      <BulletListItem text="Mettre en place une charte graphique 100% accessible">
+        <ActionPlanTag status={ActionPlanStatus.TODO} details="a faire en 2025" />
+      </BulletListItem>
+
+      <BulletListItem text="Réaliser un nouvel audit d’accessibilité du portail pro par un cabinet externe">
+        <ActionPlanTag status={ActionPlanStatus.TODO} details="a faire en 2025" />
       </BulletListItem>
     </VerticalUl>
   </React.Fragment>