From 3b5ee5cc12a2c35d6200c2e1fe065fdad3c8f816 Mon Sep 17 00:00:00 2001
From: Adrien Boutigny <adrien@slash-tmp.dev>
Date: Wed, 6 Sep 2023 17:10:48 +0200
Subject: [PATCH 01/11] fix fieldset/legend structure

closes #469
---
 .../AuditGeneralInformationsForm.vue          | 49 ++++++++++--------
 .../TestEnvironmentSelection.vue              | 50 +++++++++++--------
 2 files changed, 56 insertions(+), 43 deletions(-)

diff --git a/confiture-web-app/src/components/AuditGeneralInformationsForm.vue b/confiture-web-app/src/components/AuditGeneralInformationsForm.vue
index 1977a731f..85ab256a6 100644
--- a/confiture-web-app/src/components/AuditGeneralInformationsForm.vue
+++ b/confiture-web-app/src/components/AuditGeneralInformationsForm.vue
@@ -164,27 +164,26 @@ const route = useRoute();
         :key="i"
         class="fr-mt-4w fr-p-4w page-card"
       >
-        <div class="fr-mb-2w page-header">
-          <legend>
-            <h3 class="fr-h6 fr-mb-0">Page {{ i + 1 }}</h3>
-          </legend>
-
-          <button
-            class="fr-btn fr-btn--tertiary-no-outline"
-            type="button"
-            :disabled="pages.length === 1"
-            @click="deletePage(i)"
-          >
-            Supprimer
-            <span class="sr-only">la page {{ i + 1 }}</span>
-          </button>
-        </div>
+        <legend class="page-legend">
+          <h3 class="fr-h6 fr-mb-0">Page {{ i + 1 }}</h3>
+        </legend>
+
+        <button
+          class="fr-btn fr-btn--tertiary-no-outline page-delete-button"
+          type="button"
+          :disabled="pages.length === 1"
+          @click="deletePage(i)"
+        >
+          Supprimer
+          <span class="sr-only">la page {{ i + 1 }}</span>
+        </button>
 
         <DsfrField
           :id="`page-name-${i + 1}`"
           ref="pageNameFieldRefs"
           v-model="page.name"
           label="Nom de la page"
+          class="fr-mt-2w page-field"
         />
 
         <DsfrField
@@ -193,6 +192,7 @@ const route = useRoute();
           label="URL de la page"
           type="url"
           required
+          class="page-field"
         >
           <template #hint>
             L’URL de la page doit commencer par <code>https://</code>
@@ -304,14 +304,21 @@ const route = useRoute();
 
 .page-card {
   border: 1px solid var(--border-default-grey);
+  display: grid;
+  grid-template-columns: auto auto;
+  align-items: center;
 }
 
-.page-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 1rem;
-  flex-wrap: wrap;
+.page-legend {
+  float: left;
+}
+
+.page-delete-button {
+  justify-self: end;
+}
+
+.page-field {
+  grid-column: 1 / -1;
 }
 
 .auditor-fields {
diff --git a/confiture-web-app/src/components/TestEnvironmentSelection/TestEnvironmentSelection.vue b/confiture-web-app/src/components/TestEnvironmentSelection/TestEnvironmentSelection.vue
index eb2a705eb..20879aa1d 100644
--- a/confiture-web-app/src/components/TestEnvironmentSelection/TestEnvironmentSelection.vue
+++ b/confiture-web-app/src/components/TestEnvironmentSelection/TestEnvironmentSelection.vue
@@ -280,22 +280,22 @@ function combineEnvironments(
       :key="i"
       class="fr-fieldset fr-m-0 fr-p-0 fr-mt-4w fr-p-4w env-card"
     >
-      <div class="fr-mb-2w env-header">
-        <legend>
-          <h3 class="fr-h6 fr-mb-0">Environnement {{ i + 1 }}</h3>
-        </legend>
-        <button
-          class="fr-btn fr-btn--tertiary-no-outline"
-          type="button"
-          :disabled="customEnvironments.length === 1"
-          @click="deleteEnvironment(i)"
-        >
-          Supprimer
-        </button>
-      </div>
-      <div class="fr-form-group">
+      <legend class="env-legend">
+        <h3 class="fr-h6 fr-mb-0">Environnement {{ i + 1 }}</h3>
+      </legend>
+      <button
+        class="fr-btn fr-btn--tertiary-no-outline env-delete-button"
+        type="button"
+        :disabled="customEnvironments.length === 1"
+        @click="deleteEnvironment(i)"
+      >
+        Supprimer
+      </button>
+      <div class="fr-form-group env-form">
         <fieldset class="fr-fieldset fr-fieldset--inline">
-          <legend class="fr-fieldset__legend fr-text--regular">Support</legend>
+          <legend class="fr-fieldset__legend fr-text--regular fr-mt-2w">
+            Support
+          </legend>
           <div class="fr-fieldset__content">
             <div class="fr-radio-group">
               <input
@@ -438,15 +438,21 @@ function combineEnvironments(
 
 .env-card {
   border: 1px solid var(--border-default-grey);
-  display: block;
+  display: grid;
+  grid-template-columns: auto auto;
+  align-items: center;
 }
 
-.env-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 1rem;
-  flex-wrap: wrap;
+.env-legend {
+  float: left;
+}
+
+.env-delete-button {
+  justify-self: end;
+}
+
+.env-card > *:not(.env-legend, .env-delete-button) {
+  grid-column: 1 / -1;
 }
 
 @media (max-width: 992px) {

From 6257c8672a7e3f030404141f062a46f12fcdad35 Mon Sep 17 00:00:00 2001
From: Adrien Boutigny <adrien@slash-tmp.dev>
Date: Wed, 6 Sep 2023 17:48:19 +0200
Subject: [PATCH 02/11] replace @vueuse/head with @unhead/vue and fix dynamic
 title on generation page

---
 confiture-web-app/package.json                |  2 +-
 confiture-web-app/src/App.vue                 |  2 +-
 .../src/components/AuditGenerationFilters.vue |  4 +-
 confiture-web-app/src/components/PageMeta.ts  |  4 +-
 confiture-web-app/src/main.ts                 |  2 +-
 .../src/pages/edit/EditAuditStepThreePage.vue | 36 +++++++-
 confiture-web-app/yarn.lock                   | 85 ++++++++++---------
 7 files changed, 84 insertions(+), 51 deletions(-)

diff --git a/confiture-web-app/package.json b/confiture-web-app/package.json
index fd331bee5..9c44f8e2d 100644
--- a/confiture-web-app/package.json
+++ b/confiture-web-app/package.json
@@ -15,7 +15,7 @@
     "@gouvfr/dsfr": "1.9.0",
     "@sentry/tracing": "^7.37.2",
     "@sentry/vue": "^7.37.2",
-    "@vueuse/head": "^1.0.22",
+    "@unhead/vue": "^1.5.3",
     "chart.js": "^4.1.0",
     "dompurify": "^2.4.1",
     "ky": "^0.33.0",
diff --git a/confiture-web-app/src/App.vue b/confiture-web-app/src/App.vue
index 53441b33e..5799f93f8 100644
--- a/confiture-web-app/src/App.vue
+++ b/confiture-web-app/src/App.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { provide, ref, watch } from "vue";
 import { useRoute } from "vue-router";
-import { useHead } from "@vueuse/head";
+import { useHead } from "@unhead/vue";
 
 import Breadcrumb, { BreadcrumbLink } from "./components/Breadcrumb.vue";
 import ToastNotification from "./components/ToastNotification.vue";
diff --git a/confiture-web-app/src/components/AuditGenerationFilters.vue b/confiture-web-app/src/components/AuditGenerationFilters.vue
index 3b08dfb25..bd8283a04 100644
--- a/confiture-web-app/src/components/AuditGenerationFilters.vue
+++ b/confiture-web-app/src/components/AuditGenerationFilters.vue
@@ -2,6 +2,7 @@
 import { computed, watch, nextTick } from "vue";
 import { ref } from "vue";
 import { useFiltersStore, useResultsStore } from "../store";
+import { pluralize } from "../utils";
 
 defineProps<{
   topics: { title: string; number: number; value: number }[];
@@ -116,7 +117,8 @@ watch(
 
     <div role="alert" aria-live="polite">
       <p v-if="filterStore.search" class="fr-mt-2w fr-mb-1w">
-        {{ resultsCount }} {{ resultsCount !== 1 ? "résultats" : "résultat" }}
+        {{ resultsCount }}
+        {{ pluralize("résultat", "résultats", resultsCount) }}
       </p>
       <!-- FIXME: can't change color on dismissable tags. "fr-tag--blue-france" -->
     </div>
diff --git a/confiture-web-app/src/components/PageMeta.ts b/confiture-web-app/src/components/PageMeta.ts
index cd178fe5e..24d8b54e8 100644
--- a/confiture-web-app/src/components/PageMeta.ts
+++ b/confiture-web-app/src/components/PageMeta.ts
@@ -1,5 +1,5 @@
 import { defineComponent } from "vue";
-import { useHead } from "@vueuse/head";
+import { useHead } from "@unhead/vue";
 
 const PageMeta = defineComponent({
   name: "PageMeta",
@@ -21,7 +21,7 @@ const PageMeta = defineComponent({
      * If no props are provided, defaults are used.
      */
     useHead({
-      title: props.title,
+      title: () => props.title ?? "",
       meta: [
         { name: "description", content: props.description },
         { name: "og:title", content: props.title },
diff --git a/confiture-web-app/src/main.ts b/confiture-web-app/src/main.ts
index a6af74126..9226e46d5 100644
--- a/confiture-web-app/src/main.ts
+++ b/confiture-web-app/src/main.ts
@@ -1,7 +1,7 @@
 import { createApp } from "vue";
 import { createPinia } from "pinia";
 import { marked } from "marked";
-import { createHead } from "@vueuse/head";
+import { createHead } from "@unhead/vue";
 // @ts-expect-error vue-matomo does not have any sort of typescript support :'(
 import Matomo from "vue-matomo";
 
diff --git a/confiture-web-app/src/pages/edit/EditAuditStepThreePage.vue b/confiture-web-app/src/pages/edit/EditAuditStepThreePage.vue
index b678a2f58..d1d3c6e1f 100644
--- a/confiture-web-app/src/pages/edit/EditAuditStepThreePage.vue
+++ b/confiture-web-app/src/pages/edit/EditAuditStepThreePage.vue
@@ -14,9 +14,9 @@ import { useWrappedFetch } from "../../composables/useWrappedFetch";
 import { useIsOffline } from "../../composables/useIsOffline";
 import rgaa from "../../criteres.json";
 import { history } from "../../router";
-import { useAuditStore, useResultsStore } from "../../store";
+import { useAuditStore, useResultsStore, useFiltersStore } from "../../store";
 import { AuditType, CriteriumResultStatus } from "../../types";
-import { captureWithPayloads, getCriteriaCount } from "../../utils";
+import { captureWithPayloads, getCriteriaCount, pluralize } from "../../utils";
 import { CRITERIA_BY_AUDIT_TYPE } from "../../criteria";
 
 const route = useRoute();
@@ -204,13 +204,41 @@ function handleUpdateResultError(err: any) {
 }
 
 const isOffline = useIsOffline();
+
+const filterStore = useFiltersStore();
+const filterResultsCount = computed(() =>
+  filterStore.filteredTopics
+    .map((t) => t.criteria.length)
+    .reduce((total, length) => (total += length), 0)
+);
+
+const pageTitle = computed(() => {
+  if (auditStore.data) {
+    // Audit XXX - X résultats pour « XXX »
+    if (filterStore.search) {
+      const r = `Audit ${auditStore.data.procedureName} - ${
+        filterResultsCount.value
+      } ${pluralize(
+        "résultat",
+        "résultats",
+        filterResultsCount.value
+      )} pour « ${filterStore.search} »`;
+      console.log({ r });
+      return r;
+    }
+
+    return `Audit ${auditStore.data.procedureName}`;
+  }
+
+  return "";
+});
 </script>
 
 <template>
   <!-- FIXME: handle loading states -->
-  <div class="page-wrapper" v-if="auditStore.data && resultsStore.data">
+  <div v-if="auditStore.data && resultsStore.data" class="page-wrapper">
     <PageMeta
-      :title="`Audit ${auditStore.data.procedureName}`"
+      :title="pageTitle"
       description="Réalisez simplement et validez votre audit d'accessibilité numérique."
     />
 
diff --git a/confiture-web-app/yarn.lock b/confiture-web-app/yarn.lock
index 25f87ec7b..5fffa58b8 100644
--- a/confiture-web-app/yarn.lock
+++ b/confiture-web-app/yarn.lock
@@ -451,35 +451,38 @@
     "@typescript-eslint/types" "5.46.1"
     eslint-visitor-keys "^3.3.0"
 
-"@unhead/dom@^1.0.9":
-  version "1.0.13"
-  resolved "https://registry.yarnpkg.com/@unhead/dom/-/dom-1.0.13.tgz#76aab52c913346e248916cbf9a8c64dfd11f0c5d"
-  integrity sha512-ErfhK3Nwk3kpxnPEOrkruKAdS3/TrNlKs0nYtKgFJ1ywJYg+uNwRFDe82v4JdUMhnfmbgL/qcO3PTx3Dv09IEQ==
+"@unhead/dom@1.5.3":
+  version "1.5.3"
+  resolved "https://registry.yarnpkg.com/@unhead/dom/-/dom-1.5.3.tgz#49ff04a6601248461be546aa978229cd086c27ff"
+  integrity sha512-0a9aO34lzy40jT3DycpyaQCMbksveKajkhEACxcs2VdG04tndRK0s3UzdvJFV8nnTfRZAI+y3yEIjTLWswgFWQ==
   dependencies:
-    "@unhead/schema" "1.0.13"
+    "@unhead/schema" "1.5.3"
+    "@unhead/shared" "1.5.3"
 
-"@unhead/schema@1.0.13", "@unhead/schema@^1.0.9":
-  version "1.0.13"
-  resolved "https://registry.yarnpkg.com/@unhead/schema/-/schema-1.0.13.tgz#f98ed4f7801091611be6d8b49a86b8a576621a82"
-  integrity sha512-K8SiAEkM8G7GaF1QvsKlthLmRqGB8R9SvZXMCucZqb2VQ6bU4IFSs/4q6dKxmV0fXb5AHdKUL9+rX/4rQ6FsZg==
+"@unhead/schema@1.5.3":
+  version "1.5.3"
+  resolved "https://registry.yarnpkg.com/@unhead/schema/-/schema-1.5.3.tgz#1566e75d525632b17f789fc19456815cd8183c74"
+  integrity sha512-UpvxfEn+2CJAO6Ytr/Mnps67/zm4ezWjP5JrisjTx8NqWQtIsuvkdp81GpTGVYGHuaPe9c/SqtlsL9aL9oUv8Q==
   dependencies:
-    "@zhead/schema" "^1.0.7"
-    hookable "^5.4.2"
+    hookable "^5.5.3"
+    zhead "^2.0.10"
 
-"@unhead/ssr@^1.0.9":
-  version "1.0.13"
-  resolved "https://registry.yarnpkg.com/@unhead/ssr/-/ssr-1.0.13.tgz#d4b14bc3d227170d15dd0e3571313873df3bfc05"
-  integrity sha512-pach3THVx8LU54M6aQ4qZeQdcLjXVnPlpHe7pQjHGvD6iBJC5bZc8TL+CHdTRxeiq2DqMA5uyfoor7VJJTi5AQ==
+"@unhead/shared@1.5.3":
+  version "1.5.3"
+  resolved "https://registry.yarnpkg.com/@unhead/shared/-/shared-1.5.3.tgz#b5f0b5580a4e51021ff4f4de52998f8d923c5fb0"
+  integrity sha512-JMRHlOmKTOlC949u3LTZIObwB9vRPLwLqbI5SRp9Cb1hheizTaHHsj7R7UfYpXzrbfNrx6wvnOosb5RF6Urikw==
   dependencies:
-    "@unhead/schema" "1.0.13"
+    "@unhead/schema" "1.5.3"
 
-"@unhead/vue@^1.0.9":
-  version "1.0.13"
-  resolved "https://registry.yarnpkg.com/@unhead/vue/-/vue-1.0.13.tgz#1d2df3867147794183086db3f1598c411a7637e3"
-  integrity sha512-sGl640UQqN8HUYTKXOh6gErk/vw8byPdx1+ECqX4ec7UZYktsWgfyIReYBu09Qm3O6pIYfX8HlZbDipX+wQAOQ==
+"@unhead/vue@^1.5.3":
+  version "1.5.3"
+  resolved "https://registry.yarnpkg.com/@unhead/vue/-/vue-1.5.3.tgz#260a1babcc40b206216a7bc073a07fb3981049e1"
+  integrity sha512-9xo7/ArTE+sunIK5RomfQWOPJYw3Vbvs/aJ1/vzaSQandqrgzSX8THiaZ+ZveefdJUqBXlq8tuTIf9ggzrW5Ww==
   dependencies:
-    "@unhead/schema" "1.0.13"
-    hookable "^5.4.2"
+    "@unhead/schema" "1.5.3"
+    "@unhead/shared" "1.5.3"
+    hookable "^5.5.3"
+    unhead "1.5.3"
 
 "@vitejs/plugin-vue@^4.0.0":
   version "4.0.0"
@@ -626,21 +629,6 @@
   resolved "https://registry.yarnpkg.com/@vue/shared/-/shared-3.2.45.tgz#a3fffa7489eafff38d984e23d0236e230c818bc2"
   integrity sha512-Ewzq5Yhimg7pSztDV+RH1UDKBzmtqieXQlpTVm2AwraoRL/Rks96mvd8Vgi7Lj+h+TH8dv7mXD3FRZR3TUvbSg==
 
-"@vueuse/head@^1.0.22":
-  version "1.0.22"
-  resolved "https://registry.yarnpkg.com/@vueuse/head/-/head-1.0.22.tgz#66b591d6e4dc636c6578d1c04a96bd6c2e00f3b6"
-  integrity sha512-YmUdbzNdCnhmrAFxGnJS+Rixj+swE+TQC9OEaYDHIro6gE7W11jugcdwVP00HrA4WRQhg+TOQ4YcY2oL/PP1hw==
-  dependencies:
-    "@unhead/dom" "^1.0.9"
-    "@unhead/schema" "^1.0.9"
-    "@unhead/ssr" "^1.0.9"
-    "@unhead/vue" "^1.0.9"
-
-"@zhead/schema@^1.0.7":
-  version "1.0.7"
-  resolved "https://registry.yarnpkg.com/@zhead/schema/-/schema-1.0.7.tgz#229d03af31025a02b2de02a7b065542d7121e0df"
-  integrity sha512-jN2ipkz39YrHd8uulgw/Y7x8iOxvR/cTkin/E9zRQVP5JBIrrJMiGyFFj6JBW4Q029xJ5dKtpwy/3RZWpz+dkQ==
-
 acorn-jsx@^5.3.2:
   version "5.3.2"
   resolved "https://registry.yarnpkg.com/acorn-jsx/-/acorn-jsx-5.3.2.tgz#7ed5bb55908b3b2f1bc55c6af1653bada7f07937"
@@ -1181,10 +1169,10 @@ he@^1.2.0:
   resolved "https://registry.yarnpkg.com/he/-/he-1.2.0.tgz#84ae65fa7eafb165fddb61566ae14baf05664f0f"
   integrity sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==
 
-hookable@^5.4.2:
-  version "5.4.2"
-  resolved "https://registry.yarnpkg.com/hookable/-/hookable-5.4.2.tgz#6a1d3c4b3cb5b4262f99b3070ce0ee92c9c78049"
-  integrity sha512-6rOvaUiNKy9lET1X0ECnyZ5O5kSV0PJbtA5yZUgdEF7fGJEVwSLSislltyt7nFwVVALYHQJtfGeAR2Y0A0uJkg==
+hookable@^5.5.3:
+  version "5.5.3"
+  resolved "https://registry.yarnpkg.com/hookable/-/hookable-5.5.3.tgz#6cfc358984a1ef991e2518cb9ed4a778bbd3215d"
+  integrity sha512-Yc+BQe8SvoXH1643Qez1zqLRmbA5rCL+sSmk6TVos0LWVfNIB7PGncdlId77WzLGSIB5KaWgTaNTs2lNVEI6VQ==
 
 https-proxy-agent@^5.0.0:
   version "5.0.1"
@@ -1728,6 +1716,16 @@ typescript@^4.9.4:
   resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.9.4.tgz#a2a3d2756c079abda241d75f149df9d561091e78"
   integrity sha512-Uz+dTXYzxXXbsFpM86Wh3dKCxrQqUcVMxwU54orwlJjOpO3ao8L7j5lH+dWfTwgCwIuM9GQ2kvVotzYJMXTBZg==
 
+unhead@1.5.3:
+  version "1.5.3"
+  resolved "https://registry.yarnpkg.com/unhead/-/unhead-1.5.3.tgz#8f39312b4cc14a6576fd66fff75e76fdd9a155d0"
+  integrity sha512-4hkVcX74zs+bv5s6ubIGd/iLgAN4D58u+z2wYbczPwUVFUxKyElTqT+9VjNX3T1SikKbOSl1pFyNKqBc+342lw==
+  dependencies:
+    "@unhead/dom" "1.5.3"
+    "@unhead/schema" "1.5.3"
+    "@unhead/shared" "1.5.3"
+    hookable "^5.5.3"
+
 unplugin@0.10.1:
   version "0.10.1"
   resolved "https://registry.yarnpkg.com/unplugin/-/unplugin-0.10.1.tgz#e00dc951c1901aef4124121057102a8c290e28b3"
@@ -1873,3 +1871,8 @@ yocto-queue@^0.1.0:
   version "0.1.0"
   resolved "https://registry.yarnpkg.com/yocto-queue/-/yocto-queue-0.1.0.tgz#0294eb3dee05028d31ee1a5fa2c556a6aaf10a1b"
   integrity sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==
+
+zhead@^2.0.10:
+  version "2.0.10"
+  resolved "https://registry.yarnpkg.com/zhead/-/zhead-2.0.10.tgz#dc89c420081fae78a6f3d10687428ae676bc6291"
+  integrity sha512-irug8fXNKjqazkA27cFQs7C6/ZD3qNiEzLC56kDyzQART/Z9GMGfg8h2i6fb9c8ZWnIx/QgOgFJxK3A/CYHG0g==

From 8e9909e8e7ec693c710c10b10c1a91e9b2c91251 Mon Sep 17 00:00:00 2001
From: Quentin Bellanger <hello@quentin-bellanger.com>
Date: Thu, 7 Sep 2023 14:41:30 +0200
Subject: [PATCH 03/11] add topic number, criterium number and status to
 transverse switch label

---
 .../src/components/AuditGenerationCriterium.vue           | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/confiture-web-app/src/components/AuditGenerationCriterium.vue b/confiture-web-app/src/components/AuditGenerationCriterium.vue
index e1734e59f..05a37e61e 100644
--- a/confiture-web-app/src/components/AuditGenerationCriterium.vue
+++ b/confiture-web-app/src/components/AuditGenerationCriterium.vue
@@ -18,7 +18,7 @@ import CriteriumTestsAccordion from "./CriteriumTestsAccordion.vue";
 import { useResultsStore, useFiltersStore } from "../store";
 import { useNotifications } from "../composables/useNotifications";
 import RadioGroup, { RadioColor } from "./RadioGroup.vue";
-import { captureWithPayloads } from "../utils";
+import { captureWithPayloads, formatStatus } from "../utils";
 import { useIsOffline } from "../composables/useIsOffline";
 
 const store = useResultsStore();
@@ -265,7 +265,11 @@ const isOffline = useIsOffline();
           class="fr-toggle__label fr-pr-2w"
           :for="`applicable-all-pages-${uniqueId}`"
         >
-          Sur toutes les pages
+          <span class="sr-only">
+            Appliquer le statut {{ formatStatus(result.status) }} pour le
+            critère {{ topicNumber }}.{{ criterium.number }}
+          </span>
+          &nbsp;Sur toutes les pages
         </label>
       </div>
     </div>

From 197a9a93e192a0fc154178b5531fb9191713c55b Mon Sep 17 00:00:00 2001
From: Quentin Bellanger <hello@quentin-bellanger.com>
Date: Thu, 7 Sep 2023 15:30:55 +0200
Subject: [PATCH 04/11] add current tab name to page title on step 3

---
 .../src/pages/edit/EditAuditStepThreePage.vue | 31 +++++++++++++------
 confiture-web-app/src/store/audit.ts          |  2 +-
 2 files changed, 23 insertions(+), 10 deletions(-)

diff --git a/confiture-web-app/src/pages/edit/EditAuditStepThreePage.vue b/confiture-web-app/src/pages/edit/EditAuditStepThreePage.vue
index d1d3c6e1f..cdec9f0ed 100644
--- a/confiture-web-app/src/pages/edit/EditAuditStepThreePage.vue
+++ b/confiture-web-app/src/pages/edit/EditAuditStepThreePage.vue
@@ -104,9 +104,12 @@ const topics = computed(() => {
 
 const currentPageId = ref(0);
 
-function updateCurrentPageId(i: number) {
+function updateCurrentPageId(i: number | null) {
   auditStore.updateCurrentPageId(i);
-  currentPageId.value = i;
+
+  if (i) {
+    currentPageId.value = i;
+  }
 }
 
 const {
@@ -213,21 +216,30 @@ const filterResultsCount = computed(() =>
 );
 
 const pageTitle = computed(() => {
+  // Audit XXX - [Page en cours « XXX » | Notes] - X résultats pour « XXX »
   if (auditStore.data) {
-    // Audit XXX - X résultats pour « XXX »
+    let title = `Audit ${auditStore.data.procedureName}`;
+
+    const tabName = auditStore.currentPageId
+      ? ` - Page en cours « ${
+          auditStore.data.pages.find((p) => p.id === auditStore.currentPageId)
+            ?.name
+        } »`
+      : " - Notes";
+
+    title += tabName;
+
     if (filterStore.search) {
-      const r = `Audit ${auditStore.data.procedureName} - ${
-        filterResultsCount.value
-      } ${pluralize(
+      const results = ` - ${filterResultsCount.value} ${pluralize(
         "résultat",
         "résultats",
         filterResultsCount.value
       )} pour « ${filterStore.search} »`;
-      console.log({ r });
-      return r;
+
+      title += results;
     }
 
-    return `Audit ${auditStore.data.procedureName}`;
+    return title;
   }
 
   return "";
@@ -434,6 +446,7 @@ const pageTitle = computed(() => {
             role="tabpanel"
             aria-labelledby="notes-panel"
             tabindex="0"
+            v-on="{ 'dsfr.disclose': () => updateCurrentPageId(null) }"
           >
             <div class="fr-input-group fr-mb-1w">
               <label class="fr-label" for="audit-notes"
diff --git a/confiture-web-app/src/store/audit.ts b/confiture-web-app/src/store/audit.ts
index bd5bbe924..d257ac052 100644
--- a/confiture-web-app/src/store/audit.ts
+++ b/confiture-web-app/src/store/audit.ts
@@ -107,7 +107,7 @@ export const useAuditStore = defineStore("audit", {
       return newAuditId;
     },
 
-    async updateCurrentPageId(id: number) {
+    async updateCurrentPageId(id: number | null) {
       this.currentPageId = id;
     },
   },

From 6950c76a4a200fd61184bd707e492adc021f576e Mon Sep 17 00:00:00 2001
From: Quentin Bellanger <hello@quentin-bellanger.com>
Date: Thu, 7 Sep 2023 16:58:23 +0200
Subject: [PATCH 05/11] indicate active tab in markup on report page

---
 confiture-web-app/src/pages/consult/ReportPage.vue | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/confiture-web-app/src/pages/consult/ReportPage.vue b/confiture-web-app/src/pages/consult/ReportPage.vue
index bd032bb16..08a29f51b 100644
--- a/confiture-web-app/src/pages/consult/ReportPage.vue
+++ b/confiture-web-app/src/pages/consult/ReportPage.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, ref, watch } from "vue";
+import { computed, ref, watch, Ref } from "vue";
 import { useRoute, useRouter } from "vue-router";
 
 import OnboardingModal from "../../components/OnboardingModal.vue";
@@ -94,10 +94,10 @@ function onOnboardingAlertClose() {
   localStorage.setItem("confiture:hide-onboarding-alert", "true");
 }
 
-const targetTab = route.params.tab as string | undefined;
+const targetTab = ref(route.params.tab) as Ref<string | undefined>;
 const targetTabIndex = computed(() => {
   let index = tabs.value.findIndex(
-    (t) => slugify(t.title).toLowerCase() === targetTab?.toLowerCase()
+    (t) => slugify(t.title).toLowerCase() === targetTab?.value?.toLowerCase()
   );
   return index === -1 ? 0 : index;
 });
@@ -116,6 +116,8 @@ function handleTabChange(tab: { title: string }) {
       },
     }).fullPath
   );
+
+  targetTab.value = slugify(tab.title);
 }
 
 const csvExportUrl = computed(() => `/api/reports/${uniqueId}/exports/csv`);
@@ -288,6 +290,7 @@ const csvExportSizeEstimation = computed(() => {
             :aria-controls="`tabpanel-${slugify(tab.title)}-panel`"
           >
             {{ tab.title }}
+            <span v-if="i === targetTabIndex" class="sr-only">&nbsp;Actif</span>
           </button>
         </li>
       </ul>
@@ -295,7 +298,7 @@ const csvExportSizeEstimation = computed(() => {
         v-for="(tab, i) in tabs"
         :id="`tabpanel-${slugify(tab.title)}-panel`"
         :key="tab.title"
-        class="fr-tabs__panel fr-tabs__panel--selected"
+        class="fr-tabs__panel"
         :class="{ 'fr-tabs__panel--selected': i === targetTabIndex }"
         role="tabpanel"
         :aria-labelledby="`tabpanel-${slugify(tab.title)}`"

From 97f5daf49a7bd5f2d1ffd05b805bad4d607654fd Mon Sep 17 00:00:00 2001
From: Quentin Bellanger <hello@quentin-bellanger.com>
Date: Fri, 8 Sep 2023 10:57:07 +0200
Subject: [PATCH 06/11] indicate active tab in markup on results and step 3
 pages

---
 .../src/components/ResultDetailsCard.vue      | 30 +++++++++++++------
 .../src/pages/edit/EditAuditStepThreePage.vue |  6 ++--
 2 files changed, 25 insertions(+), 11 deletions(-)

diff --git a/confiture-web-app/src/components/ResultDetailsCard.vue b/confiture-web-app/src/components/ResultDetailsCard.vue
index 950856d14..d228c3f3b 100644
--- a/confiture-web-app/src/components/ResultDetailsCard.vue
+++ b/confiture-web-app/src/components/ResultDetailsCard.vue
@@ -1,10 +1,18 @@
 <script lang="ts" setup>
+import { ref } from "vue";
+
 import { slugify } from "../utils";
 
 defineProps<{
   title: string;
   tableData: string[][];
 }>();
+
+const currentDisplay = ref("chart");
+
+function updateCurrentDisplay(display: string) {
+  currentDisplay.value = display;
+}
 </script>
 
 <template>
@@ -19,44 +27,48 @@ defineProps<{
       >
         <li role="presentation">
           <button
-            :id="`tabpanel-table-${slugify(title)}`"
+            :id="`tabpanel-chart-${slugify(title)}`"
             class="fr-tabs__tab"
             tabindex="0"
             role="tab"
             aria-selected="true"
-            :aria-controls="`tabpanel-table-${slugify(title)}-panel`"
+            :aria-controls="`tabpanel-chart-${slugify(title)}-panel`"
           >
             Graphique
           </button>
         </li>
         <li role="presentation">
           <button
-            :id="`tabpanel-chart-${slugify(title)}`"
+            :id="`tabpanel-table-${slugify(title)}`"
             class="fr-tabs__tab"
             tabindex="-1"
             role="tab"
             aria-selected="false"
-            :aria-controls="`tabpanel-chart-${slugify(title)}-panel`"
+            :aria-controls="`tabpanel-table-${slugify(title)}-panel`"
           >
             Tableau
           </button>
         </li>
       </ul>
       <div
-        :id="`tabpanel-table-${slugify(title)}-panel`"
-        class="fr-tabs__panel fr-tabs__panel--selected"
+        :id="`tabpanel-chart-${slugify(title)}-panel`"
+        class="fr-tabs__panel"
+        :class="{ 'fr-tabs__panel--selected': currentDisplay === 'chart' }"
         role="tabpanel"
-        :aria-labelledby="`tabpanel-table-${slugify(title)}`"
+        :aria-labelledby="`tabpanel-chart-${slugify(title)}`"
         tabindex="0"
+        v-on="{ 'dsfr.disclose': () => updateCurrentDisplay('chart') }"
       >
         <slot />
       </div>
       <div
-        :id="`tabpanel-chart-${slugify(title)}-panel`"
+        :id="`tabpanel-table-${slugify(title)}-panel`"
         class="fr-tabs__panel"
+        :class="{ 'fr-tabs__panel--selected': currentDisplay === 'table' }"
         role="tabpanel"
-        :aria-labelledby="`tabpanel-chart-${slugify(title)}`"
+        :aria-labelledby="`tabpanel-table-${slugify(title)}`"
         tabindex="0"
+        v-on="{ 'dsfr.disclose': () => updateCurrentDisplay('table') }"
       >
         <div class="fr-table fr-table--no-caption fr-mb-0">
           <table>
diff --git a/confiture-web-app/src/pages/edit/EditAuditStepThreePage.vue b/confiture-web-app/src/pages/edit/EditAuditStepThreePage.vue
index cdec9f0ed..590469ef7 100644
--- a/confiture-web-app/src/pages/edit/EditAuditStepThreePage.vue
+++ b/confiture-web-app/src/pages/edit/EditAuditStepThreePage.vue
@@ -428,7 +428,8 @@ const pageTitle = computed(() => {
             v-for="page in auditStore.data.pages"
             :id="`page-panel-${page.id}-panel`"
             :key="page.id"
-            class="fr-tabs__panel fr-tabs__panel--selected"
+            class="fr-tabs__panel"
+            :class="{ 'fr-tabs__panel--selected': currentPageId === page.id }"
             role="tabpanel"
             :aria-labelledby="`page-panel-${page.id}`"
             tabindex="0"
@@ -442,7 +443,8 @@ const pageTitle = computed(() => {
           </div>
           <div
             :id="`notes-panel-panel`"
-            class="fr-tabs__panel fr-tabs__panel--selected"
+            class="fr-tabs__panel"
+            :class="{ 'fr-tabs__panel--selected': currentPageId === null }"
             role="tabpanel"
             aria-labelledby="notes-panel"
             tabindex="0"

From 602fdd7b85f291090b8c1ff5eac4469e6eb0b76c Mon Sep 17 00:00:00 2001
From: Quentin Bellanger <hello@quentin-bellanger.com>
Date: Fri, 8 Sep 2023 11:06:40 +0200
Subject: [PATCH 07/11] indicate active tab in markup on results and step 3
 pages (2)

---
 .../src/components/ResultDetailsCard.vue        |  6 ++++++
 .../src/pages/edit/EditAuditStepThreePage.vue   | 17 +++++++++++++----
 2 files changed, 19 insertions(+), 4 deletions(-)

diff --git a/confiture-web-app/src/components/ResultDetailsCard.vue b/confiture-web-app/src/components/ResultDetailsCard.vue
index d228c3f3b..59033e33d 100644
--- a/confiture-web-app/src/components/ResultDetailsCard.vue
+++ b/confiture-web-app/src/components/ResultDetailsCard.vue
@@ -35,6 +35,9 @@ function updateCurrentDisplay(display: string) {
             :aria-controls="`tabpanel-chart-${slugify(title)}-panel`"
           >
             Graphique
+            <span v-if="currentDisplay === 'chart'" class="sr-only"
+              >&nbsp;Actif</span
+            >
           </button>
         </li>
         <li role="presentation">
@@ -47,6 +50,9 @@ function updateCurrentDisplay(display: string) {
             :aria-controls="`tabpanel-table-${slugify(title)}-panel`"
           >
             Tableau
+            <span v-if="currentDisplay === 'table'" class="sr-only"
+              >&nbsp;Actif</span
+            >
           </button>
         </li>
       </ul>
diff --git a/confiture-web-app/src/pages/edit/EditAuditStepThreePage.vue b/confiture-web-app/src/pages/edit/EditAuditStepThreePage.vue
index 590469ef7..dc9ae375d 100644
--- a/confiture-web-app/src/pages/edit/EditAuditStepThreePage.vue
+++ b/confiture-web-app/src/pages/edit/EditAuditStepThreePage.vue
@@ -102,14 +102,12 @@ const topics = computed(() => {
   );
 });
 
-const currentPageId = ref(0);
+const currentPageId = ref<number | null>(0);
 
 function updateCurrentPageId(i: number | null) {
   auditStore.updateCurrentPageId(i);
 
-  if (i) {
-    currentPageId.value = i;
-  }
+  currentPageId.value = i;
 }
 
 const {
@@ -393,6 +391,11 @@ const pageTitle = computed(() => {
                 :aria-controls="`page-panel-${auditStore.data.pages[0].id}-panel`"
               >
                 {{ auditStore.data.pages[0].name }}
+                <span
+                  v-if="currentPageId === auditStore.data.pages[0].id"
+                  class="sr-only"
+                  >&nbsp;Actif</span
+                >
               </button>
             </li>
             <li
@@ -409,6 +412,9 @@ const pageTitle = computed(() => {
                 :aria-controls="`page-panel-${page.id}-panel`"
               >
                 {{ page.name }}
+                <span v-if="currentPageId === page.id" class="sr-only"
+                  >&nbsp;Actif</span
+                >
               </button>
             </li>
             <li role="presentation">
@@ -421,6 +427,9 @@ const pageTitle = computed(() => {
                 :aria-controls="`notes-panel-panel`"
               >
                 Notes
+                <span v-if="currentPageId === null" class="sr-only"
+                  >&nbsp;Actif</span
+                >
               </button>
             </li>
           </ul>

From 2dcd6bbc97718ae4b1cf71cf2cb08e6c665abfac Mon Sep 17 00:00:00 2001
From: Quentin Bellanger <hello@quentin-bellanger.com>
Date: Fri, 8 Sep 2023 11:42:22 +0200
Subject: [PATCH 08/11] Update
 confiture-web-app/src/pages/consult/ReportPage.vue

Co-authored-by: Adrien Boutigny <adrien@slash-tmp.dev>
---
 confiture-web-app/src/pages/consult/ReportPage.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/confiture-web-app/src/pages/consult/ReportPage.vue b/confiture-web-app/src/pages/consult/ReportPage.vue
index 08a29f51b..eb647d128 100644
--- a/confiture-web-app/src/pages/consult/ReportPage.vue
+++ b/confiture-web-app/src/pages/consult/ReportPage.vue
@@ -94,7 +94,7 @@ function onOnboardingAlertClose() {
   localStorage.setItem("confiture:hide-onboarding-alert", "true");
 }
 
-const targetTab = ref(route.params.tab) as Ref<string | undefined>;
+const targetTab = ref(route.params.tab as string | undefined);
 const targetTabIndex = computed(() => {
   let index = tabs.value.findIndex(
     (t) => slugify(t.title).toLowerCase() === targetTab?.value?.toLowerCase()

From 709a1a3a2a72abd1942c6bde3e4792744cbf776f Mon Sep 17 00:00:00 2001
From: Quentin Bellanger <hello@quentin-bellanger.com>
Date: Fri, 8 Sep 2023 11:42:32 +0200
Subject: [PATCH 09/11] Update
 confiture-web-app/src/pages/consult/ReportPage.vue

Co-authored-by: Adrien Boutigny <adrien@slash-tmp.dev>
---
 confiture-web-app/src/pages/consult/ReportPage.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/confiture-web-app/src/pages/consult/ReportPage.vue b/confiture-web-app/src/pages/consult/ReportPage.vue
index eb647d128..5debb21f2 100644
--- a/confiture-web-app/src/pages/consult/ReportPage.vue
+++ b/confiture-web-app/src/pages/consult/ReportPage.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, ref, watch, Ref } from "vue";
+import { computed, ref, watch } from "vue";
 import { useRoute, useRouter } from "vue-router";
 
 import OnboardingModal from "../../components/OnboardingModal.vue";

From 92e11223f70b906f772f3e59beb2a60c12dc2ec6 Mon Sep 17 00:00:00 2001
From: Quentin Bellanger <hello@quentin-bellanger.com>
Date: Fri, 8 Sep 2023 11:42:39 +0200
Subject: [PATCH 10/11] Update
 confiture-web-app/src/pages/consult/ReportPage.vue

Co-authored-by: Adrien Boutigny <adrien@slash-tmp.dev>
---
 confiture-web-app/src/pages/consult/ReportPage.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/confiture-web-app/src/pages/consult/ReportPage.vue b/confiture-web-app/src/pages/consult/ReportPage.vue
index 5debb21f2..7ff381df4 100644
--- a/confiture-web-app/src/pages/consult/ReportPage.vue
+++ b/confiture-web-app/src/pages/consult/ReportPage.vue
@@ -97,7 +97,7 @@ function onOnboardingAlertClose() {
 const targetTab = ref(route.params.tab as string | undefined);
 const targetTabIndex = computed(() => {
   let index = tabs.value.findIndex(
-    (t) => slugify(t.title).toLowerCase() === targetTab?.value?.toLowerCase()
+    (t) => slugify(t.title).toLowerCase() === targetTab.value?.toLowerCase()
   );
   return index === -1 ? 0 : index;
 });

From b54c871a993e0fa71342e8f878edea7a996c1c77 Mon Sep 17 00:00:00 2001
From: Quentin Bellanger <hello@quentin-bellanger.com>
Date: Fri, 8 Sep 2023 11:44:29 +0200
Subject: [PATCH 11/11] update changelog

---
 confiture-web-app/src/assets/CHANGELOG.md | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/confiture-web-app/src/assets/CHANGELOG.md b/confiture-web-app/src/assets/CHANGELOG.md
index 663c2a6ee..c20b356ca 100644
--- a/confiture-web-app/src/assets/CHANGELOG.md
+++ b/confiture-web-app/src/assets/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.
 
+## 08/09/2023
+
+### Corrections 🐛
+
+- Corrige les problèmes d’accessibilité suite au contre-audit ([#478](https://github.com/DISIC/Ara/pull/478))
+
 ## 06/09/2023
 
 ### Corrections 🐛