From 7d8e886f4aa6a95f0b7022df1f6ea7a0e96c9d83 Mon Sep 17 00:00:00 2001
From: Quentin Bellanger <hello@quentin-bellanger.com>
Date: Wed, 31 Jan 2024 10:32:36 +0100
Subject: [PATCH] =?UTF-8?q?D=C3=A9place=20la=20checkmark=20pour=20indiquer?=
 =?UTF-8?q?=20qu'une=20=C3=A9tape=20est=20termin=C3=A9e=20(#630)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* move checkmark for finished step

* remove old aria-hidden attr

* update changelog
---
 CHANGELOG.md                                  |  6 +++
 .../src/components/overview/AuditStep.vue     | 42 ++++++++++++---
 .../src/components/overview/ReportStep.vue    | 35 +++++++++++--
 .../src/components/overview/StatementStep.vue | 35 ++++++++++---
 .../src/components/overview/StepCard.vue      | 51 ++-----------------
 5 files changed, 101 insertions(+), 68 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index b54053d9..5c217a5f 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,6 +2,12 @@
 
 Tous les changements notables de Ara sont documentés ici avec leur date, leur catégorie (nouvelle fonctionnalité, correction de bug ou autre changement) et leur pull request (PR) associée.
 
+## 31/01/2024
+
+### Autres changements ⚙️
+
+- Corrige l’accessibilité de l’indicateur d’étape terminée sur la synthèse d’un audit ([#630](https://github.com/DISIC/Ara/pull/630))
+
 ## 25/01/2024
 
 ### Nouvelles fonctionnalités 🚀
diff --git a/confiture-web-app/src/components/overview/AuditStep.vue b/confiture-web-app/src/components/overview/AuditStep.vue
index 37be40d1..892b64d1 100644
--- a/confiture-web-app/src/components/overview/AuditStep.vue
+++ b/confiture-web-app/src/components/overview/AuditStep.vue
@@ -35,14 +35,30 @@ const auditIsInProgress = computed(() => {
 </script>
 
 <template>
-  <StepCard id="audit-step" :checked="auditIsReady">
-    <h2 class="fr-h3 fr-mb-1w audit-step-title" aria-describedby="audit-step">
-      Audit
-      <p v-if="audit.auditType" class="fr-badge">
-        {{ getCriteriaCount(audit.auditType) }}
-        critères
-      </p>
-    </h2>
+  <StepCard>
+    <div class="fr-mb-1w audit-step-heading">
+      <span
+        v-if="auditIsReady"
+        id="audit-step-status"
+        class="fr-icon--lg fr-icon-checkbox-circle-fill audit-step-check"
+      >
+        <span class="sr-only">Étape terminée</span>
+      </span>
+
+      <h2
+        class="fr-h3 fr-mb-0 audit-step-title"
+        aria-describedby="audit-step-status"
+      >
+        Audit
+        <p
+          v-if="audit.auditType"
+          class="fr-badge fr-badge--info fr-badge--no-icon"
+        >
+          {{ getCriteriaCount(audit.auditType) }}
+          critères
+        </p>
+      </h2>
+    </div>
 
     <p class="fr-text--sm fr-mb-2w audit-step-date">
       <template v-if="auditIsInProgress && audit.creationDate">
@@ -186,6 +202,12 @@ const auditIsInProgress = computed(() => {
 </template>
 
 <style scoped>
+.audit-step-heading {
+  align-items: center;
+  display: flex;
+  gap: 1rem;
+}
+
 .audit-step-title {
   grid-column: 1 / -1;
   grid-row: 1;
@@ -196,6 +218,10 @@ const auditIsInProgress = computed(() => {
   gap: 0.5rem;
 }
 
+.audit-step-check {
+  color: var(--text-default-success);
+}
+
 .audit-step-date {
   color: var(--text-mention-grey);
   grid-column: 1 / -1;
diff --git a/confiture-web-app/src/components/overview/ReportStep.vue b/confiture-web-app/src/components/overview/ReportStep.vue
index 8fcb3b05..85dc1050 100644
--- a/confiture-web-app/src/components/overview/ReportStep.vue
+++ b/confiture-web-app/src/components/overview/ReportStep.vue
@@ -18,11 +18,25 @@ const auditIsReady = computed(() => {
 </script>
 
 <template>
-  <StepCard id="report-step" :checked="auditIsReady">
-    <h2 class="fr-h3 fr-mb-1w report-step-title" aria-describedby="report-step">
-      Rapport d’audit
-      <p class="fr-badge fr-badge--info">Généré automatiquement</p>
-    </h2>
+  <StepCard>
+    <div class="fr-mb-1w report-step-heading">
+      <span
+        v-if="auditIsReady"
+        id="report-step-status"
+        class="fr-icon--lg fr-icon-checkbox-circle-fill report-step-check"
+      >
+        <span class="sr-only">Étape terminée</span>
+      </span>
+      <h2
+        class="fr-h3 fr-mb-0 report-step-title"
+        aria-describedby="report-step-status"
+      >
+        Rapport d’audit
+        <p class="fr-badge fr-badge--info fr-badge--no-icon">
+          Généré automatiquement
+        </p>
+      </h2>
+    </div>
     <p class="report-step-description">
       {{
         auditIsReady
@@ -63,6 +77,13 @@ const auditIsReady = computed(() => {
 </template>
 
 <style scoped>
+.report-step-heading {
+  align-items: center;
+  display: flex;
+  gap: 1rem;
+  grid-column: 1 / -1;
+}
+
 .report-step-title {
   grid-column: 1 / -1;
   grid-row: 1;
@@ -73,6 +94,10 @@ const auditIsReady = computed(() => {
   gap: 0.5rem;
 }
 
+.report-step-check {
+  color: var(--text-default-success);
+}
+
 .report-step-description {
   grid-column: 1 / -1;
   grid-row: 2;
diff --git a/confiture-web-app/src/components/overview/StatementStep.vue b/confiture-web-app/src/components/overview/StatementStep.vue
index a1b12107..4176e85d 100644
--- a/confiture-web-app/src/components/overview/StatementStep.vue
+++ b/confiture-web-app/src/components/overview/StatementStep.vue
@@ -23,13 +23,23 @@ const auditIsPublishable = computed(() => {
 </script>
 
 <template>
-  <StepCard id="statement-step" :checked="auditIsPublishable">
-    <h2
-      class="fr-h3 fr-mb-1w statement-step-title"
-      aria-describedby="statement-step"
-    >
-      Déclaration d’accessibilité
-    </h2>
+  <StepCard>
+    <div class="fr-mb-1w statement-step-heading">
+      <span
+        v-if="auditIsPublishable"
+        id="statement-step-status"
+        class="fr-icon--lg fr-icon-checkbox-circle-fill statement-step-check"
+      >
+        <span class="sr-only">Étape terminée</span>
+      </span>
+      <h2
+        class="fr-h3 fr-mb-0 statement-step-title"
+        aria-describedby="statement-step-status"
+      >
+        Déclaration d’accessibilité
+      </h2>
+    </div>
+
     <p class="statement-step-description">
       <template v-if="auditIsPublishable">
         Vous pouvez livrer la déclaration d’accessibilité.
@@ -117,11 +127,22 @@ const auditIsPublishable = computed(() => {
 </template>
 
 <style scoped>
+.statement-step-heading {
+  align-items: center;
+  display: flex;
+  gap: 1rem;
+  grid-column: 1 / -1;
+}
+
 .statement-step-title {
   grid-column: 1 / -1;
   grid-row: 1;
 }
 
+.statement-step-check {
+  color: var(--text-default-success);
+}
+
 .statement-step-description {
   grid-column: 1 / -1;
   grid-row: 2;
diff --git a/confiture-web-app/src/components/overview/StepCard.vue b/confiture-web-app/src/components/overview/StepCard.vue
index 7d26125c..46d9e1ec 100644
--- a/confiture-web-app/src/components/overview/StepCard.vue
+++ b/confiture-web-app/src/components/overview/StepCard.vue
@@ -1,61 +1,16 @@
-<script setup lang="ts">
-defineProps<{
-  checked?: boolean;
-  id: string;
-}>();
-</script>
-
 <template>
-  <li class="step-card-wrapper">
-    <span
-      :id="id"
-      :class="[
-        'fr-icon--lg fr-icon-checkbox-circle-fill step-card-check',
-        { 'step-card-check--success': checked }
-      ]"
-      aria-hidden="true"
-    >
-      <span class="sr-only">{{
-        checked ? "Étape terminée" : "Étape à réaliser"
-      }}</span>
-    </span>
-
-    <div class="fr-px-4w fr-py-3w step-card">
-      <slot />
-    </div>
+  <li class="fr-px-4w fr-py-3w step-card">
+    <slot />
   </li>
 </template>
 
 <style scoped>
-.step-card-wrapper {
-  display: flex;
-  gap: 1.5rem;
-  align-items: center;
-  max-width: 49.5rem;
-}
-
 .step-card {
   border: 1px solid var(--border-default-grey);
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 0 1rem;
   flex-grow: 1;
-}
-
-.step-card-check {
-  color: var(--border-default-grey);
-  margin: 0 auto;
-}
-
-.step-card-check--success {
-  color: var(--text-default-success);
-}
-
-@media (max-width: 48rem) {
-  .step-card-wrapper {
-    flex-direction: column;
-    align-items: stretch;
-    gap: 1rem;
-  }
+  max-width: 49.5rem;
 }
 </style>