Déplace la checkmark pour indiquer qu'une étape est terminée (#630)

* move checkmark for finished step * remove old aria-hidden attr * update changelog
DISIC · Jan 31, 2024 · 7d8e886 · 7d8e886
1 parent eec4933
commit 7d8e886
Show file tree

Hide file tree

Showing 5 changed files with 101 additions and 68 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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>