Focus le champ d'erreur quand le statut est "Non conforme" (#766)

* open accordion when status is not compliant and focus error field * remove useless import * remove unnecessary nextTick * Fix focus in NC textarea after disclose animation * a11y: Add sr-only info for NC checkbox label Tells user that focus is going to be moved automatically on the following textarea * update extra label after focus moves * update changelog --------- Co-authored-by: Yaacov <[email protected]>
DISIC · Sep 5, 2024 · 5c59f00 · 5c59f00
1 parent 761b969
commit 5c59f00
Show file tree

Hide file tree

Showing 5 changed files with 68 additions and 19 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.
 
+## 05/09/2024
+
+### Nouvelles fonctionnalités 🚀
+
+- Le champs "Erreur et recommandation" est automatiquement focus lorsque le critère est défini comme "Non conforme" ([#766](https://github.com/DISIC/Ara/pull/766))
+
 ## 24/07/2024
 
 ### Autres changements ⚙️

diff --git a/confiture-web-app/src/components/audit/AuditGenerationCriterium.vue b/confiture-web-app/src/components/audit/AuditGenerationCriterium.vue
@@ -40,6 +40,7 @@ const props = defineProps<{
 
 const statuses: Array<{
   label: string;
+  extraLabel?: string;
   value: CriteriumResultStatus;
   color?: RadioColor;
 }> = [
@@ -50,6 +51,8 @@ const statuses: Array<{
   },
   {
     label: formatStatus(CriteriumResultStatus.NOT_COMPLIANT),
+    extraLabel:
+      "Le focus se déplacera dans le champ « Erreur et recommandation »",
     value: CriteriumResultStatus.NOT_COMPLIANT,
     color: "red"
   },
@@ -128,6 +131,10 @@ function updateResultStatus(status: CriteriumResultStatus) {
   store
     .updateResults(props.auditUniqueId, [{ ...result.value, status }])
     .then(() => {
+      if (status === CriteriumResultStatus.NOT_COMPLIANT) {
+        criteriumNotCompliantAccordion.value?.disclose();
+      }
+
       if (
         store.everyCriteriumAreTested &&
         !auditStore.currentAudit?.publicationDate

diff --git a/confiture-web-app/src/components/audit/CriteriumNotCompliantAccordion.vue b/confiture-web-app/src/components/audit/CriteriumNotCompliantAccordion.vue
@@ -32,7 +32,7 @@ const emit = defineEmits<{
   (e: "update:quickWin", payload: boolean): void;
 }>();
 
-defineExpose({ onFileRequestFinished });
+defineExpose({ onFileRequestFinished, disclose });
 
 const userImpacts: Array<{
   label: string;
@@ -71,12 +71,35 @@ function handleDeleteFile(image: AuditFile) {
 function onFileRequestFinished() {
   fileUpload.value?.onFileRequestFinished();
 }
+
+const lazyAccordionRef = ref<InstanceType<typeof LazyAccordion>>();
+const commentFieldRef = ref<HTMLTextAreaElement>();
+
+let hasJustBeenSetAsNotCompliant = false;
+
+async function disclose() {
+  const accordion = lazyAccordionRef.value?.accordionRef;
+
+  hasJustBeenSetAsNotCompliant = true;
+  dsfr(accordion).accordionsGroup.members[0].disclose();
+}
+
+function lazyAccordionOpened() {
+  if (!hasJustBeenSetAsNotCompliant) {
+    return;
+  }
+
+  commentFieldRef.value?.focus();
+  hasJustBeenSetAsNotCompliant = false;
+}
 </script>
 
 <template>
   <LazyAccordion
+    ref="lazyAccordionRef"
     title="Erreur et recommandation"
     disclose-color="var(--background-default-grey)"
+    @opened="lazyAccordionOpened"
   >
     <!-- COMMENT -->
     <div class="fr-input-group fr-mb-1w">
@@ -85,6 +108,7 @@ function onFileRequestFinished() {
       </label>
       <textarea
         :id="`criterum-comment-field-${id}`"
+        ref="commentFieldRef"
         :value="comment ?? ''"
         class="fr-input"
         rows="5"

diff --git a/confiture-web-app/src/components/audit/LazyAccordion.vue b/confiture-web-app/src/components/audit/LazyAccordion.vue
@@ -10,6 +10,12 @@ defineProps<{
   discloseColor?: string;
 }>();
 
+const accordionRef = ref<HTMLDivElement>();
+
+defineExpose({ accordionRef });
+
+const emit = defineEmits(["opened"]);
+
 const showContent = ref(false);
 const uniqueId = useUniqueId();
 
@@ -19,29 +25,34 @@ function onConceal() {
 
 function onDisclose() {
   showContent.value = true;
+  requestAnimationFrame(function () {
+    emit("opened");
+  });
 }
 </script>
 
 <template>
-  <div
-    class="fr-accordion"
-    :class="{ 'dynamic-color': !!discloseColor, 'is-open': showContent }"
-  >
-    <span class="fr-accordion__title">
-      <button
-        class="fr-accordion__btn"
-        aria-expanded="false"
-        :aria-controls="`accordion-${uniqueId}`"
-      >
-        {{ title }}
-      </button>
-    </span>
+  <div ref="accordionRef" class="fr-accordions-group">
     <div
-      :id="`accordion-${uniqueId}`"
-      class="fr-collapse"
-      v-on="{ 'dsfr.disclose': onDisclose, 'dsfr.conceal': onConceal }"
+      class="fr-accordion"
+      :class="{ 'dynamic-color': !!discloseColor, 'is-open': showContent }"
     >
-      <slot v-if="showContent"></slot>
+      <span class="fr-accordion__title">
+        <button
+          class="fr-accordion__btn"
+          aria-expanded="false"
+          :aria-controls="`accordion-${uniqueId}`"
+        >
+          {{ title }}
+        </button>
+      </span>
+      <div
+        :id="`accordion-${uniqueId}`"
+        class="fr-collapse"
+        v-on="{ 'dsfr.disclose': onDisclose, 'dsfr.conceal': onConceal }"
+      >
+        <slot v-if="showContent"></slot>
+      </div>
     </div>
   </div>
 </template>

diff --git a/confiture-web-app/src/components/ui/RadioGroup.vue b/confiture-web-app/src/components/ui/RadioGroup.vue
@@ -11,6 +11,7 @@ const props = defineProps<{
   items: {
     value: any;
     label: string;
+    extraLabel?: string;
     color?: RadioColor;
   }[];
   disabled?: boolean;
@@ -53,7 +54,7 @@ function handleChange(value: string) {
         :class="item.color"
         :for="`checkbox-group-${uniqueId}--${i}`"
       >
-        {{ item.label }}
+        {{ item.label }}<span class="fr-sr-only">, {{ item.extraLabel }}</span>
       </label>
     </div>
   </fieldset>