From da4b483a3cae23639a892fc6f8cda720f022102a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Th=C3=A9o=20LUDWIG?= <contact@theoludwig.fr>
Date: Thu, 1 Aug 2024 00:36:45 +0200
Subject: [PATCH] fix: a11y issues with curriculum-vitae

---
 packages/config-tailwind/styles.css           | 29 +++++--------------
 .../CurriculumVitaeProfile.tsx                | 12 ++++----
 .../CurriculumVitaeSection.tsx                |  2 +-
 3 files changed, 14 insertions(+), 29 deletions(-)

diff --git a/packages/config-tailwind/styles.css b/packages/config-tailwind/styles.css
index 0e3cb6e..296cac7 100644
--- a/packages/config-tailwind/styles.css
+++ b/packages/config-tailwind/styles.css
@@ -192,19 +192,13 @@ code .line:last-child {
   }
   .h1,
   .h2,
-  .h3,
-  h1,
-  h2,
-  h3 {
+  .h3 {
     margin-top: 20px;
     margin-bottom: 10px;
   }
   .h4,
   .h5,
-  .h6,
-  h4,
-  h5,
-  h6 {
+  .h6 {
     margin-top: 10px;
     margin-bottom: 10px;
   }
@@ -213,31 +207,22 @@ code .line:last-child {
   .h3,
   .h4,
   .h5,
-  .h6,
-  h1,
-  h2,
-  h3,
-  h4,
-  h5,
-  h6 {
+  .h6 {
     font-family: inherit;
     line-height: 1.1;
     color: inherit;
   }
-  .h3,
-  h3 {
+  .h3 {
     font-size: 24px;
   }
-  .h4,
-  h4 {
+  .h4 {
     font-size: 18px;
   }
-  .h5,
-  h5 {
+  .h5 {
     font-size: 14px;
   }
   .text-muted {
-    color: #777;
+    color: #414141;
   }
   .list-unstyled {
     padding-left: 0;
diff --git a/packages/ui/src/CurriculumVitae/CurriculumVitaeProfile.tsx b/packages/ui/src/CurriculumVitae/CurriculumVitaeProfile.tsx
index b33ff74..197b4e6 100644
--- a/packages/ui/src/CurriculumVitae/CurriculumVitaeProfile.tsx
+++ b/packages/ui/src/CurriculumVitae/CurriculumVitaeProfile.tsx
@@ -23,14 +23,14 @@ export const CurriculumVitaeProfile: React.FC<
           />
         </div>
         <div className="name-and-profession text-center">
-          <h3>
+          <h1 className="h3">
             <strong>{t("meta.title")}</strong>
-          </h3>
-          <h5 className="text-muted">{t("curriculum-vitae.description")}</h5>
-          <h5 className="text-muted">
+          </h1>
+          <h2 className="text-muted h5">{t("curriculum-vitae.description")}</h2>
+          <h2 className="text-muted h5">
             <BirthDate />
-          </h5>
-          <h5 className="text-muted">{t("home.about.nationality.value")}</h5>
+          </h2>
+          <h2 className="text-muted h5">{t("home.about.nationality.value")}</h2>
         </div>
       </div>
       <div className="flex justify-center">
diff --git a/packages/ui/src/CurriculumVitae/CurriculumVitaeSection.tsx b/packages/ui/src/CurriculumVitae/CurriculumVitaeSection.tsx
index ee53083..9b6ea56 100644
--- a/packages/ui/src/CurriculumVitae/CurriculumVitaeSection.tsx
+++ b/packages/ui/src/CurriculumVitae/CurriculumVitaeSection.tsx
@@ -14,7 +14,7 @@ export const CurriculumVitaeSection: React.FC<CurriculumVitaeSectionProps> = (
       <div className="icon">{icon}</div>
 
       <div className="info">
-        <h4 className="font-semibold uppercase">{title}</h4>
+        <h2 className="h4 font-semibold uppercase">{title}</h2>
 
         <div className="content">{children}</div>
       </div>