Informer l'usager sur les types d'audits (#604)

* add compliance tooltip on audit list

* change default pages when audit type changes

* design new audit type radios

* small tweaks

* align radio with label

* add doc link + hover bg

* set pristine to false when using dev button

* describe radio inputs with goals and requirements

* typo + css tweak + hide focus ring on radio click

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.
 
+## 16/01/2023
+
+### Autres changements ⚙️
+
+- Informe mieux l’usager sur les différents types d’audits lors du paramétrage d’un audit ([#604](https://github.com/DISIC/Ara/pull/604))
+
 ## 14/12/2023
 
 ### Nouvelles fonctionnalités 🚀

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

@@ -179,7 +179,23 @@ const csvExportFilename = computed(() => {
           }}
         </p>
       </template>
-      <p v-else class="fr-m-0">Non-applicable</p>
+      <p v-else class="fr-m-0">
+        Non-applicable
+        <button
+          class="fr-btn--tooltip fr-btn audit-compliance-level-tooltip"
+          aria-describedby="compliance-tooltip"
+        >
+          Information contextuelle
+        </button>
+        <span
+          id="compliance-tooltip"
+          class="fr-tooltip fr-placement"
+          role="tooltip"
+          aria-hidden="true"
+        >
+          Seul l'audit 106 critères permet d'obtenir un taux de conformité
+        </span>
+      </p>
     </div>
 
     <!-- Main action -->
@@ -328,12 +344,16 @@ const csvExportFilename = computed(() => {
 
 .audit-status,
 .audit-date,
-.audit-type,
-.audit-compliance-level {
+.audit-type {
   pointer-events: none;
   z-index: 1;
 }
 
+.audit-compliance-level-tooltip {
+  position: relative;
+  z-index: 1;
+}
+
 /* Make button take full column width */
 .audit-main-action {
   justify-content: center;