Améliore l'affichage de la progression de l 'audit (#1115)

* update save indicator icons and spacing

* update last saving relative time in save indicator tooltip

* rework audit progress bar layout and add tooltip slot

* fix typos

* fix typos

* update progress bar left padding

* update changelog

* fix common e2e tests (non breaking space)

Author: bellangerq

CHANGELOG.md

@@ -13,6 +13,7 @@
 
 #### <span aria-hidden="true">🐛</span> Corrections
 
+- Corrige l’accessibilité de la barre de progression de l’audit et de l’indicateur d’enregistrement ([#1115](https://github.com/DISIC/Ara/pull/1115))
 - Corrige l’affichage de l’éditeur lorsque les CSS sont désactivées ([#1120](https://github.com/DISIC/Ara/pull/1120))
 
 ### 22/05/2025

confiture-web-app/src/assets/images/cloud-check.svg

@@ -213,7 +213,7 @@ function copyStatementLink(uniqueId: string) {
           {{
             isInProgress || isNotStarted
               ? "Audit en cours"
-              : `${audit.complianceLevel}%`
+              : `${audit.complianceLevel} %`
           }}
         </p>
         <p

confiture-web-app/src/assets/images/cloud-off-line.svg

@@ -266,9 +266,24 @@ onMounted(() => {
         v-if="showAuditProgressBar"
         :value="resultStore.auditProgress"
         label="Progression de l’audit"
-        :size="4"
+        tooltip-label="Informations sur la progression de l’audit"
+        :size="8"
         class="progress-bar"
-      />
+      >
+        <template #tooltip-content>
+          <p class="fr-text--sm">
+            La progression de l'audit se base sur les critères évalués de chaque
+            <strong>page de votre échantillon</strong>. Évaluez les critères de
+            toutes les pages pour terminer votre audit.
+          </p>
+          <p class="fr-text--xs fr-mb-0">
+            À noter : les critères des
+            <strong>éléments transverses</strong> sont optionnels. Ils sont pris
+            en compte dans le calcul du taux mais pas dans la progression de
+            l’audit.
+          </p>
+        </template>
+      </AuditProgressBar>
 
       <div
         v-else-if="auditStore.currentAudit?.publicationDate"
@@ -507,7 +522,7 @@ onMounted(() => {
 }
 
 .audit-main-indicator {
-  margin-left: 2rem;
+  margin-left: 0.75rem;
 }
 
 @media (width < 36rem) {

confiture-web-app/src/assets/images/upload-cloud-2-line.svg

@@ -1,13 +1,18 @@
 <script setup lang="ts">
 import { computed } from "vue";
 
+import { useUniqueId } from "../../composables/useUniqueId";
+
 const props = defineProps<{
   value: number;
   label: string;
   size: number; // value in px
   inline?: boolean;
+  tooltipLabel?: string;
 }>();
 
+const uniqueId = useUniqueId();
+
 const progressPercentage = computed(() => {
   const percentage = props.value * 100;
   const rounded = Math.round(percentage);
@@ -24,13 +29,39 @@ const progressBarSize = computed(() => `${props.size / 16}rem`);
 </script>
 
 <template>
-  <div :class="['audit-progress', { 'audit-progress--inline': inline }]">
+  <div
+    :class="[
+      'audit-progress',
+      {
+        'audit-progress--inline': inline,
+        'audit-progress--with-tooltip':
+          tooltipLabel && $slots['tooltip-content']
+      }
+    ]"
+  >
     <span :class="['audit-progress-label', { 'fr-sr-only': inline }]">
       {{ label }}
     </span>
+    <template v-if="tooltipLabel && $slots['tooltip-content']">
+      <button
+        class="fr-btn--tooltip fr-btn"
+        type="button"
+        :aria-describedby="`progress-bar-tooltip-${uniqueId}`"
+      >
+        {{ tooltipLabel }}
+      </button>
+      <span
+        :id="`progress-bar-tooltip-${uniqueId}`"
+        class="fr-tooltip fr-placement fr-text--sm"
+        role="tooltip"
+        aria-hidden="true"
+      >
+        <slot name="tooltip-content" />
+      </span>
+    </template>
     <span
       :class="[
-        ' fr-text--action-high-grey fr-m-0 audit-progress-percentage',
+        ' fr-text--action-high-grey fr-mb-0 audit-progress-percentage',
         {
           'fr-text--xs': !inline
         }
@@ -43,34 +74,38 @@ const progressBarSize = computed(() => `${props.size / 16}rem`);
 </template>
 
 <style scoped>
-.audit-progress-bar {
-  background-color: var(--background-contrast-grey);
-  position: relative;
-  grid-column: 1 / -1;
-}
-
 .audit-progress {
   background: none;
-  display: grid;
-  gap: v-bind(progressBarSize) 1rem;
-  grid-template-columns: 1fr 4ch;
-  grid-template-rows: auto v-bind(progressBarSize);
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: start;
+  gap: v-bind(progressBarSize) 0.125rem;
 }
 
 .audit-progress--inline {
-  grid-template-rows: v-bind(progressBarSize);
-  gap: 0 0.5rem;
+  gap: 0.5rem;
+  flex-direction: row-reverse;
+  flex-wrap: nowrap;
 
   .audit-progress-bar {
     height: v-bind(progressBarSize);
-    grid-column: 1 / span 1;
   }
+}
+.audit-progress-label {
+  font-weight: 500;
+}
 
-  .audit-progress-percentage {
-    grid-column: 2;
-    grid-row: 1;
-    align-self: center;
-  }
+.audit-progress-percentage {
+  color: var(--text-mention-grey);
+  margin-inline-start: auto;
+}
+
+.audit-progress-bar {
+  background-color: var(--background-contrast-grey);
+  position: relative;
+  height: v-bind(progressBarSize);
+  flex-basis: 100%;
 }
 
 .audit-progress-bar::after {
@@ -83,14 +118,4 @@ const progressBarSize = computed(() => `${props.size / 16}rem`);
   transition: width 1s ease;
   width: v-bind(progressBarValue);
 }
-
-.audit-progress-label {
-  font-weight: 500;
-}
-
-.audit-progress-percentage {
-  color: var(--text-mention-grey);
-  align-self: end;
-  text-align: end;
-}
 </style>

confiture-web-app/src/components/account/dashboard/AuditRow.vue

@@ -2,12 +2,14 @@
 import { debounce } from "lodash-es";
 import { computed, ref, watch } from "vue";
 
+import { useUniqueId } from "../../composables/useUniqueId";
 import { useAuditStore, useResultsStore, useSystemStore } from "../../store";
 import { StoreName } from "../../types";
-import Dropdown from "../ui/Dropdown.vue";
+import { formatDate, pluralize } from "../../utils";
 
-/* Change the saving status in a way that it wont "flicker" */
+const uniqueId = useUniqueId();
 
+/* Change the saving status in a way that it wont "flicker" */
 export interface Props {
   storeName?: StoreName;
 }
@@ -41,59 +43,56 @@ watch(
   }
 );
 
-/* Show an alert when the app is offline */
-
+/* Update tooltip content conditionally */
 const systemStore = useSystemStore();
 
-const dropdownTitle = computed(() => {
+const saveContent = computed(() => {
   if (isLoading.value) {
-    return "Enregistrement…";
-  }
-  if (!systemStore.isOnline) {
-    return "Enregistrement impossible";
+    return {
+      status: "Enregistrement…",
+      description: "Modifications en cours d’enregistrement…",
+      class: "save-indicator-icon--loading"
+    };
   }
 
-  return "Enregistré";
-});
-
-const dropdownMainText = computed(() => {
-  if (isLoading.value) {
-    return "Modifications en cours d’enregistrement…";
-  }
   if (!systemStore.isOnline) {
-    return "L’enregistrement de vos modifications est impossible hors connexion. Veuillez vérifier votre connexion internet.";
-  }
-  return "Ara enregistre automatiquement votre travail";
-});
-
-const dropdownIcon = computed(() => {
-  if (isLoading.value) {
-    return "fr-icon-refresh-line";
-  }
-  if (!systemStore.isOnline) {
-    return "fr-icon-warning-line";
+    return {
+      status: "Enregistrement impossible",
+      description:
+        "L’enregistrement de vos modifications est impossible hors connexion. Veuillez vérifier votre connexion internet.",
+      class: "save-indicator-icon--error"
+    };
   }
 
-  return "fr-icon-success-line";
+  return {
+    status: "Enregistré",
+    description: "Ara enregistre automatiquement votre travail.",
+    class: "save-indicator-icon--default"
+  };
 });
 
 /* Display the time since last successful save */
-
 const relativeLastSaveDate = ref<string>();
 
-/**
- *
- * @param seconds
- */
 function formatInterval(seconds: number) {
   if (seconds < 60) {
-    return `il y a ${seconds} secondes`;
+    return `il y a quelques secondes`;
   } else if (seconds < 60 * 60) {
     return `il y a ${Math.floor(seconds / 60)} min`;
-  } else {
+  } else if (seconds < 60 * 60 * 24) {
     const hours = Math.floor(seconds / (60 * 60));
     const minutes = Math.floor((seconds - hours * 60 * 60) / 60);
-    return `il y a ${hours} h ${minutes} m`;
+    return minutes > 0
+      ? `il y a ${hours} h ${minutes} min`
+      : `il y a ${hours} h`;
+  } else if (seconds < 60 * 60 * 24 * 7) {
+    const days = Math.floor(seconds / (60 * 60 * 24));
+    return `il y a ${days} ${pluralize("jour", "jours", days)}`;
+  } else if (store.value.lastRequestSuccessEnd) {
+    const date = new Date(store.value.lastRequestSuccessEnd);
+    return `le ${formatDate(date.toString())}`;
+  } else {
+    return "il y a plusieurs jours";
   }
 }
 
@@ -127,26 +126,26 @@ watch(
 </script>
 
 <template>
-  <div class="dropdown-container">
-    <Dropdown
-      :title="dropdownTitle"
-      align-left
-      icon-left
-      :button-props="{
-        class: `fr-btn--tertiary-no-outline ${dropdownIcon}`,
-        style: !systemStore.isOnline
-          ? 'color: var(--text-default-error);'
-          : undefined
-      }"
+  <div class="save-indicator">
+    <button
+      :class="[`fr-btn--tooltip fr-btn fr-btn--sm ${saveContent.class}`]"
+      type="button"
+      :aria-describedby="`save-indicator-${uniqueId}`"
     >
-      <p class="fr-text--sm fr-mb-1v">
-        {{ dropdownMainText }}
-      </p>
-
-      <p v-if="relativeLastSaveDate" class="fr-text--xs fr-m-0">
-        Dernier enregistrement {{ relativeLastSaveDate }}
-      </p>
-    </Dropdown>
+      Informations sur l’enregistrement
+    </button>
+    <span
+      :id="`save-indicator-${uniqueId}`"
+      class="fr-tooltip fr-placement fr-text--sm"
+      role="tooltip"
+      aria-hidden="true"
+    >
+      {{ saveContent.description }}
+      <small class="fr-text--xs fr-m-0 save-indicator-relative-time">
+        Dernier enregistrement {{ relativeLastSaveDate }}.
+      </small>
+    </span>
+    <p class="fr-m-0 save-indicator-label">{{ saveContent.status }}</p>
 
     <p class="fr-sr-only" aria-live="polite" role="alert">
       {{ saveText }}
@@ -155,10 +154,38 @@ watch(
 </template>
 
 <style scoped>
-.dropdown-container {
-  min-width: 10rem;
+.save-indicator {
+  align-items: center;
+  display: flex;
+  gap: 0.125rem;
+}
+
+.save-indicator-icon--default::before {
+  mask-image: url("../../assets/images/cloud-check.svg");
+}
+
+.save-indicator-icon--loading::before {
+  mask-image: url("../../assets/images/upload-cloud-2-line.svg");
+}
+
+.save-indicator-icon--error::before {
+  mask-image: url("../../assets/images/cloud-off-line.svg");
+}
+
+.save-indicator-icon--error {
+  color: var(--text-default-error);
+
+  & ~ .save-indicator-label {
+    color: var(--text-default-error);
+  }
+}
+
+.save-indicator-label {
+  color: var(--text-mention-grey);
 }
-:deep(.fr-btn--tertiary-no-outline) {
-  padding: 0;
+
+.save-indicator-relative-time {
+  display: block;
+  color: var(--text-mention-grey);
 }
 </style>