Merge branch 'main' into 948-bug-rechargement-de-la-page-sur-le-mauva…

…is-onglet-transverse
DISIC · Feb 25, 2025 · 4b9dac5 · 4b9dac5
2 parents d45a692 + 20f4ac0
commit 4b9dac5
Show file tree

Hide file tree

Showing 17 changed files with 174 additions and 93 deletions.
diff --git a/.github/ISSUE_TEMPLATE/bug.md b/.github/ISSUE_TEMPLATE/bug.md
@@ -0,0 +1,27 @@
+---
+name: Bug
+about: Le titre du ticket doit être clair, concis et résumer le problème
+title: ''
+labels: ''
+assignees: ''
+
+---
+
+- **Relevé par** : [Prénom]
+- **Le** : [xx/xx/xx]
+
+## Description du problème
+
+- [Description détaillée du problème, localisation et impact sur l'usager.] 
+
+## Scénario pour reproduire le bug 
+
+- [Liste des actions à réaliser pour reproduire le bug] 
+
+## Correction à apporter
+
+- [Description du comportement attendu]
+
+--- 
+
+🔮  Pensez à lancer et/ou mettre à jour les tests end-to-end si nécessaire avant passage en prod.
diff --git a/.github/ISSUE_TEMPLATE/nouvelle-fonctionnalité.md b/.github/ISSUE_TEMPLATE/nouvelle-fonctionnalité.md
@@ -0,0 +1,21 @@
+---
+name: Nouvelle fonctionnalité
+about: Le titre du ticket doit être clair, concis et résumer l’objectif ou le problème à résoudre
+title: ''
+labels: ''
+assignees: ''
+
+---
+
+## Description du problème 
+
+- [Description détaillée du problème, localisation et impact sur l’usager.]
+- [Inclure toutes les informations ou données pertinentes.] 
+
+## Pistes de solutions
+
+- [Premières idées ou recommandations pour résoudre le problème.]
+
+--- 
+
+🔮  Pensez à lancer et/ou mettre à jour les tests end-to-end si nécessaire avant passage en prod.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -2,16 +2,16 @@
 
 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.
 
-## 06/02/2025
+## 07/02/2025
 
-### Corrections 🐛
+### Nouvelles fonctionnalités 🚀
 
-- Dans la page du rapport, lorsque l’un des deux onglets « Détails des non-conformités » ou « Points d’amélioration » est sélectionné, les liens présents dans le menu latéral de gauche pointent désormais correctement vers les différentes parties du rapport. ([#839](https://github.com/DISIC/Ara/issues/839))
+- Ajoute une aide et des exemples sur l’impact usager ([#928](https://github.com/DISIC/Ara/pull/928))
 
-### Autres changements ⚙️
+## 06/02/2025
+
+### Corrections 🐛
 
-- L’interface du rapport a été revue : la barre d’onglets et le menu latéral de gauche sont désormais positionnés « en adhérence » (_sticky_)
-- La page de création d’audit conserve l’onglet sélectionné lorsque l’on rafraichit la page
 - Corrige la hiérarchie des titres et les annonces d’enregistrement pour les technologies d’assistance ([#933](https://github.com/DISIC/Ara/pull/933))
 
 ## 05/02/2025
@@ -614,7 +614,7 @@ Tous les changements notables de Ara sont documentés ici avec leur date, leur c
 ### Autres changements ⚙️
 
 - Mise à jour du DSFR en version `1.9.0` ([#326](https://github.com/DISIC/Ara/pull/326))
-- Mise à jour de l’adresse email de contact : <[email protected]> ([#328](https://github.com/DISIC/Ara/pull/328))
+- Mise à jour de l’adresse email de contact : [email protected] ([#328](https://github.com/DISIC/Ara/pull/328))
 
 ## 08/03/2023
 

diff --git a/confiture-web-app/.eslintrc b/confiture-web-app/.eslintrc
@@ -17,18 +17,6 @@
   },
   "rules": {
     "vue/multi-word-component-names": "off",
-    "no-irregular-whitespace": "off",
-    "vue/no-irregular-whitespace": [
-      "error",
-      {
-        "skipStrings": true,
-        "skipComments": true,
-        "skipRegExps": true,
-        "skipTemplates": true,
-        "skipHTMLAttributeValues": true,
-        "skipHTMLTextContents": true
-      }
-    ],
     "vue/no-v-html": "off",
     "no-duplicate-imports": "error",
     "@typescript-eslint/no-explicit-any": "off",

diff --git a/confiture-web-app/src/components/audit/AraTabs.vue b/confiture-web-app/src/components/audit/AraTabs.vue
@@ -15,7 +15,6 @@ import { useUniqueId } from "../../composables/useUniqueId";
 import { AraTabsTabData } from "./AraTabsTabData";
 
 /** Types */
-
 export interface TabsRouteParams {
   name: string;
   params: {
@@ -196,9 +195,7 @@ onBeforeRouteUpdate(async (to, from) => {
           @keydown.home.prevent="selectFirstTab"
           @keydown.end.prevent="selectLastTab"
         >
-          <component :is="tab.icon" v-if="tab.icon" class="fr-mr-2v" />{{
-            tab.label
-          }}
+          <LayoutIcon v-if="i === 0" class="fr-mr-2v" />{{ tab.label }}
         </button>
       </li>
     </ul>

diff --git a/confiture-web-app/src/components/audit/AuditGenerationCriterium.vue b/confiture-web-app/src/components/audit/AuditGenerationCriterium.vue
@@ -275,12 +275,15 @@ const showTransverseStatus = computed(() => {
       <RadioGroup
         :disabled="isOffline"
         :model-value="result.status"
-        :label="`Statut du critère ${topicNumber}.${criterium.number}`"
         hide-label
         :default-value="CriteriumResultStatus.NOT_TESTED"
         :items="statuses"
         @update:model-value="updateResultStatus"
-      />
+      >
+        <template #label>
+          Statut du critère {{ topicNumber }}.{{ criterium.number }}
+        </template>
+      </RadioGroup>
     </div>
 
     <!-- TRANSVERSE STATUS -->

diff --git a/confiture-web-app/src/components/audit/AuditGenerationHeader.vue b/confiture-web-app/src/components/audit/AuditGenerationHeader.vue
@@ -548,8 +548,7 @@ onMounted(() => {
 
 .sticky-indicator {
   position: sticky;
-  /* Prevent "one line background flickering" when scrolling the page */
-  top: -0.1px;
+  top: 0;
   z-index: 4;
   gap: 0.5rem 0;
   align-items: center;

diff --git a/confiture-web-app/src/components/audit/CriteriumNotCompliantAccordion.vue b/confiture-web-app/src/components/audit/CriteriumNotCompliantAccordion.vue
@@ -40,19 +40,19 @@ const userImpacts: Array<{
   color?: RadioColor;
 }> = [
   {
-    value: CriterionResultUserImpact.MINOR,
-    label: formatUserImpact(CriterionResultUserImpact.MINOR),
-    color: RadioColor.GREY
+    value: CriterionResultUserImpact.BLOCKING,
+    label: formatUserImpact(CriterionResultUserImpact.BLOCKING),
+    color: RadioColor.RED
   },
   {
     value: CriterionResultUserImpact.MAJOR,
     label: formatUserImpact(CriterionResultUserImpact.MAJOR),
     color: RadioColor.YELLOW
   },
   {
-    value: CriterionResultUserImpact.BLOCKING,
-    label: formatUserImpact(CriterionResultUserImpact.BLOCKING),
-    color: RadioColor.RED
+    value: CriterionResultUserImpact.MINOR,
+    label: formatUserImpact(CriterionResultUserImpact.MINOR),
+    color: RadioColor.GREY
   }
 ];
 
@@ -143,11 +143,57 @@ const title = "Erreur et recommandation";
       class="fr-mb-4w"
       :model-value="userImpact"
       :items="userImpacts"
-      label="Impact sur l’usager"
       :default-value="null"
       :disabled="isOffline"
       @update:model-value="$emit('update:userImpact', $event)"
-    />
+    >
+      <template #label>
+        <div class="user-impact-label">
+          Impact sur l’usager
+          <button
+            aria-describedby="tooltip"
+            type="button"
+            class="fr-btn fr-btn--tooltip fr-btn--sm fr-icon-question-line fr-btn--tertiary-no-outline"
+            data-fr-js-tooltip-referent="true"
+          >
+            Informations sur l’impact usager
+          </button>
+
+          <Teleport to="body">
+            <div
+              id="tooltip"
+              class="fr-tooltip fr-placement"
+              role="tooltip"
+              data-fr-js-tooltip="true"
+            >
+              <p class="fr-text--xs fr-mb-1w">
+                <strong>Bloquant</strong> : empêche complètement l’accès ou
+                l’utilisation.<br />
+                <span class="user-impact-example"
+                  >Ex : il est impossible de soumettre un formulaire au
+                  clavier.</span
+                >
+              </p>
+              <p class="fr-text--xs fr-mb-1w">
+                <strong>Majeur</strong> : rend l’accès ou l’utilisation
+                difficile.<br />
+                <span class="user-impact-example"
+                  >Ex : les champs ne sont pas regroupés.</span
+                >
+              </p>
+              <p class="fr-text--xs fr-mb-0">
+                <strong>Mineur</strong> : gêne légèrement sans empêcher l’accès
+                ou l’utilisation.<br />
+                <span class="user-impact-example"
+                  >Ex : des retours à la ligne sont utilisés pour espacer des
+                  textes.</span
+                >
+              </p>
+            </div>
+          </Teleport>
+        </div>
+      </template>
+    </RadioGroup>
 
     <!-- QUICK WIN -->
     <div class="fr-fieldset__element fr-fieldset__element--inline">
@@ -178,10 +224,13 @@ const title = "Erreur et recommandation";
   gap: 0.5rem;
 }
 
-.user-impact-container {
-  border: none;
+.user-impact-label {
   display: flex;
-  gap: 1rem;
-  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.user-impact-example {
+  font-style: italic;
 }
 </style>
diff --git a/confiture-web-app/src/components/overview/AuditGridStep.vue b/confiture-web-app/src/components/overview/AuditGridStep.vue
@@ -61,7 +61,8 @@ const csvExportSizeEstimation = computed(() => {
     <ul class="fr-btns-group fr-btns-group--icon-left">
       <li>
         <a
-          class="fr-btn fr-btn--tertiary fr-mb-1w fr-btn--icon-left fr-icon-download-line"
+          class="fr-btn fr-mb-1w fr-btn--icon-left fr-icon-download-line"
+          :class="auditIsReady ? 'fr-btn--secondary' : 'fr-btn--tertiary'"
           aria-describedby="audit-grid-step-download-informations"
           :href="csvExportUrl"
           :download="csvExportFilename"

diff --git a/confiture-web-app/src/components/report/ReportCriteria.vue b/confiture-web-app/src/components/report/ReportCriteria.vue
@@ -24,7 +24,7 @@ function isActive(id: string) {
 
 <template>
   <div class="main">
-    <div class="sidebar filters-wrapper">
+    <div class="sidebar">
       <nav class="fr-sidemenu fr-mb-3w" aria-label="Liste des pages">
         <div class="fr-sidemenu__inner">
           <button
@@ -87,6 +87,7 @@ function isActive(id: string) {
       </nav>
       <slot name="filter" />
     </div>
+
     <div>
       <div class="fr-mb-5w">
         <p v-if="topNotice" class="fr-text--sm fr-mb-3w improvements-notice">
@@ -108,7 +109,6 @@ function isActive(id: string) {
 </template>
 
 <style scoped>
-@import "../../styles/filters.css";
 .main {
   display: grid;
   grid-template-columns: 20rem minmax(0, 1fr);
@@ -119,9 +119,8 @@ function isActive(id: string) {
   box-shadow: inset -1px 0 0 0 var(--border-default-grey);
 }
 
-:deep(.page-title) {
+.page-title {
   color: var(--text-active-blue-france);
-  scroll-margin: 4rem;
 }
 
 .fr-sidemenu__inner {
@@ -142,8 +141,4 @@ function isActive(id: string) {
 .improvements-notice {
   color: var(--text-mention-grey);
 }
-
-.filters-wrapper {
-  --filters-top-offset: 4.5rem;
-}
 </style>
diff --git a/confiture-web-app/src/components/report/ReportErrors.vue b/confiture-web-app/src/components/report/ReportErrors.vue
@@ -132,16 +132,14 @@ function resetFilters() {
           <div class="fr-fieldset__content">
             <div class="fr-checkbox-group">
               <input
-                id="user-impact-filter-minor"
+                id="user-impact-filter-blocking"
                 v-model="userImpactFilters"
-                :value="CriterionResultUserImpact.MINOR"
+                :value="CriterionResultUserImpact.BLOCKING"
                 type="checkbox"
               />
-              <label class="fr-label" for="user-impact-filter-minor">
-                Mineur ({{ minorUserImpactErrorCount }})
-                <span class="fr-hint-text">
-                  Gêne dans l’utilisation du site
-                </span>
+              <label class="fr-label" for="user-impact-filter-blocking">
+                Bloquant ({{ blockingUserImpactErrorCount }})
+                <span class="fr-hint-text">Empêche l’utilisation</span>
               </label>
             </div>
             <div class="fr-checkbox-group">
@@ -153,23 +151,19 @@ function resetFilters() {
               />
               <label class="fr-label" for="user-impact-filter-major">
                 Majeur ({{ majorUserImpactErrorCount }})
-                <span class="fr-hint-text">
-                  Complexifie grandement l’utilisation du site
-                </span>
+                <span class="fr-hint-text">Complexifie l’utilisation</span>
               </label>
             </div>
             <div class="fr-checkbox-group">
               <input
-                id="user-impact-filter-blocking"
+                id="user-impact-filter-minor"
                 v-model="userImpactFilters"
-                :value="CriterionResultUserImpact.BLOCKING"
+                :value="CriterionResultUserImpact.MINOR"
                 type="checkbox"
               />
-              <label class="fr-label" for="user-impact-filter-blocking">
-                Bloquant ({{ blockingUserImpactErrorCount }})
-                <span class="fr-hint-text">
-                  Empêche totalement l’utilisation du site
-                </span>
+              <label class="fr-label" for="user-impact-filter-minor">
+                Mineur ({{ minorUserImpactErrorCount }})
+                <span class="fr-hint-text">Gêne l’utilisation</span>
               </label>
             </div>
             <div class="fr-checkbox-group">

diff --git a/confiture-web-app/src/components/ui/RadioGroup.vue b/confiture-web-app/src/components/ui/RadioGroup.vue
@@ -1,9 +1,10 @@
 <script lang="ts" setup>
+import { defineSlots } from "vue";
+
 import { useUniqueId } from "../../composables/useUniqueId";
 import { RadioColor } from "./Radio.vue";
 
 const props = defineProps<{
-  label: string;
   hideLabel?: boolean;
   items: {
     value: any;
@@ -17,6 +18,8 @@ const props = defineProps<{
   modelValue: any;
 }>();
 
+defineSlots<{ label(): void }>;
+
 const emit = defineEmits<{
   (e: "update:modelValue", payload: any): void;
 }>();
@@ -35,7 +38,7 @@ function handleChange(value: string) {
 <template>
   <fieldset class="fr-mx-0 fr-p-0 fieldset">
     <legend :class="hideLabel ? 'fr-sr-only' : 'fr-label fr-mb-3v'">
-      {{ label }}
+      <slot name="label" />
     </legend>
     <div v-for="(item, i) in items" :key="i">
       <input