From a948b79e76b5682b34e790c6c0221bd01c629c13 Mon Sep 17 00:00:00 2001
From: Yaacov <yaacov@goodimpact.studio>
Date: Thu, 6 Feb 2025 19:29:40 +0100
Subject: [PATCH] =?UTF-8?q?839=20bug=20mauvaise=20position=20de=20lusager?=
 =?UTF-8?q?=20apr=C3=A8s=20utilisation=20des=20ancres=20pages=20dans=20le?=
 =?UTF-8?q?=20rapport=20(#945)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* Fix duplicate ids in errors and improvements tabs

* Update CHANGELOG

* Hide dropdown menu instead of removing it from DOM (#881)

* Hide dropdown menu instead of removing it from DOM

Note: no more smooth transition after this change

* Update CHANGELOG

* MAJ du label pour le nom de la procédure (#910)

* update procedure name field label

* update tests

* use custom matomo vue plugin

* MAJ du DSFR en 1.13.0 (#915)

* update dsfr package version

* fix audit update notes test

* update changelog

* Mise à jour de node en version 22.13.0 (#919)

* update node version to 22.13

* add .nvmrc

* smdlfjk

* fix matomo url regex to anonymize urls

* Supprime la page Contexte (#924)

* remove context page links and usages

* remove context page component and route

* update changelog

---------

Co-authored-by: Quentin Bellanger <hello@quentin-bellanger>

* MAJ de la page données personnelles (#923)

* update privacy page content

* use thead and add border for tables

* Fix typo

* lint stuff

---------

Co-authored-by: Benoît Dequick <33344370+benoitdequick@users.noreply.github.com>
Co-authored-by: Quentin Bellanger <hello@quentin-bellanger>

* MAJ du plan du site (#925)

* add account dashboard, roadmpa and changelog pages to sitemap

* add account, sitemap and contact pages to sitemap

---------

Co-authored-by: Quentin Bellanger <hello@quentin-bellanger>

* fix typo

* Supprime la 1ere étape du changement de mot de passe dans le compte (#926)

* skip first step

* add test for already logged in passord reset

* cleanup test

* fix NewPasswordForm style

* update changelog

* add homepage in sitemap when not connected

* 859 redondance de linformation en cours (#914)

* replace list title with badges

* remove status column in audit list

* add progress bar value prop

* add inline layout for progress bar

* increase column gap in audits list

* end align percentage

* exlude transverse criteria to compute progress

* fix duplication type

* reduce space between progress bar and value

* update changelog

---------

Co-authored-by: Quentin Bellanger <hello@quentin-bellanger>

* Génère les types des payloads de l'API (#722)

* generate and copy api types on install

* delete dist folder before generating types

* disable config validation when generating types

* use generated types in report

* use more generated types

* use generated types for account and audit listing

* hide some props

* use generated types in feedback form

* generate prisma client before generating types

* update dockerfile

* clean up

* add guideline

* hotfix: fix backend dockerfile and a typing issue preventing build

* Corrige un petit bug visuel de la liste des audits (#930)

* adjust audit list grid columns

* make audits list more mobile friendly

* remove responsive tablet-like state

---------

Co-authored-by: Quentin Bellanger <hello@quentin-bellanger>

* Update CHANGELOG

* feat(report): top alert message no more sticky

* fix(report): scroll to anchor fixed

* a hack has been added on DSFR tabs to remove overflow hidden, scroll to anchor then put back overflow hidden

* the link behaviour has changed from an instant scroll to a smooth scroll (when javascript is enabled)

* fix(ui): move tabs 0.1px up

to hide the "one line scrolling backround" at the top

* feat(AraTabs): add "icon" and "selectedTab" props

* fix(report): remove tabs DSFR hack

as planning to use AraTabs

* feat(report): minor UI fixes

* titles: in blue

* results: smaller font

* header: smaller bottom margin

* feat(report): use AraTabs in Report

* fix(AuditGenerationPage): stay on current tab on refresh

* fit(ui): smooth scroll behavior

(only if prefers-reduced-motion: no-preference)

* Fix duplicate ids in errors and improvements tabs (#879)

* Fix duplicate ids in errors and improvements tabs

* Update CHANGELOG

* Explicite louverture des livrables dans un nouvel onglet (#932)

* modify steps

* modify consult report link in audit page

* update changelog

* adjust download button

* ignore account status

* set copy link to secondary

* update changelog

* Refonte visuelle rapide du rapport (#929)

* add separator between improvements + add count on top

* remove tests & references accordion, error accordion and topic number

* adjust spacing between errors and small css tweaks

* update report tests wording

* adjust example images size

* update wording on report counts

* lowercase improvements count

* update changelog

* update tests

---------

Co-authored-by: Quentin Bellanger <hello@quentin-bellanger>

* Update PrivacyPage.vue

* Update CHANGELOG

* fix(report): scroll to anchor fixed

* a hack has been added on DSFR tabs to remove overflow hidden, scroll to anchor then put back overflow hidden

* the link behaviour has changed from an instant scroll to a smooth scroll (when javascript is enabled)

* fix(report): remove tabs DSFR hack

as planning to use AraTabs

* feat(report): minor UI fixes

* titles: in blue

* results: smaller font

* header: smaller bottom margin

* Update CHANGELOG

* chore(ReportCriteria): remove useless code

* fix(lint): please linter

+ fix non breakable spaces between « and » characters

* fit(ui): remove smooth scroll behavior

* chore(lint): authorize irregular whitespaces in texts

For example, the non-breakable space, used in french.

* fix(doc): modify CHANGELOG to better fit reality

+ simplify one sentence

+ add the 🐛 emoji

* chore(ui): add comments to explain why -0.1px

* chore(css): move filters CSS to a separate file

---------

Co-authored-by: Quentin Bellanger <hello@quentin-bellanger.com>
Co-authored-by: Adrien Boutigny <adrien@slash-tmp.dev>
Co-authored-by: Quentin Bellanger <hello@quentin-bellanger>
Co-authored-by: Benoît Dequick <33344370+benoitdequick@users.noreply.github.com>
---
 CHANGELOG.md                                  |  8 +-
 confiture-web-app/.eslintrc                   | 12 +++
 .../src/components/audit/AraTabs.vue          | 18 ++--
 .../audit/AuditGenerationHeader.vue           |  3 +-
 .../src/components/report/ReportCriteria.vue  | 11 ++-
 .../src/pages/audit/AuditGenerationPage.vue   | 76 +++++++++++------
 .../src/pages/misc/PrivacyPage.vue            | 17 ++--
 .../src/pages/report/ReportPage.vue           | 85 +++++++------------
 confiture-web-app/src/router.ts               |  2 +-
 confiture-web-app/src/styles/filters.css      | 16 ++++
 10 files changed, 148 insertions(+), 100 deletions(-)
 create mode 100644 confiture-web-app/src/styles/filters.css

diff --git a/CHANGELOG.md b/CHANGELOG.md
index b2835e4b4..e74701699 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -6,6 +6,12 @@ Tous les changements notables de Ara sont documentés ici avec leur date, leur c
 
 ### Corrections 🐛
 
+- 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))
+
+### Autres changements ⚙️
+
+- 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
@@ -608,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 : ara@design.numerique.gouv.fr ([#328](https://github.com/DISIC/Ara/pull/328))
+- Mise à jour de l’adresse email de contact : <ara@design.numerique.gouv.fr> ([#328](https://github.com/DISIC/Ara/pull/328))
 
 ## 08/03/2023
 
diff --git a/confiture-web-app/.eslintrc b/confiture-web-app/.eslintrc
index 52745e466..1c1d68717 100644
--- a/confiture-web-app/.eslintrc
+++ b/confiture-web-app/.eslintrc
@@ -17,6 +17,18 @@
   },
   "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
index 45711da3b..b430c52f9 100644
--- a/confiture-web-app/src/components/audit/AraTabs.vue
+++ b/confiture-web-app/src/components/audit/AraTabs.vue
@@ -5,14 +5,18 @@
  -->
 
 <script setup lang="ts" generic="T">
-import { ref, watch } from "vue";
+import { type Component, ref, watch } from "vue";
 
 import { useUniqueId } from "../../composables/useUniqueId";
-import LayoutIcon from "../icons/LayoutIcon.vue";
 
 const props = defineProps<{
-  tabs: { label: string; data: T }[];
-  stickyTop: string;
+  tabs: {
+    label: string;
+    icon?: Component;
+    data: T;
+  }[];
+  selectedTab?: number;
+  stickyTop?: string;
 }>();
 
 defineSlots<{
@@ -27,7 +31,7 @@ const uniqueId = useUniqueId();
 const tabId = (i: number) => "tab-" + uniqueId.value + "-" + i;
 const panelId = (i: number) => "panel-" + uniqueId.value + "-" + i;
 
-const currentTab = ref(0);
+const currentTab = ref(props.selectedTab || 0);
 const tabControlRefs = ref<HTMLButtonElement[]>();
 
 const selectNextTab = () => {
@@ -81,7 +85,9 @@ watch(currentTab, (currentTab) => {
           @keydown.home.prevent="selectFirstTab"
           @keydown.end.prevent="selectLastTab"
         >
-          <LayoutIcon v-if="i === 0" class="fr-mr-2v" />{{ tab.label }}
+          <component :is="tab.icon" v-if="tab.icon" class="fr-mr-2v" />{{
+            tab.label
+          }}
         </button>
       </li>
     </ul>
diff --git a/confiture-web-app/src/components/audit/AuditGenerationHeader.vue b/confiture-web-app/src/components/audit/AuditGenerationHeader.vue
index 90608224f..b37f3ec72 100644
--- a/confiture-web-app/src/components/audit/AuditGenerationHeader.vue
+++ b/confiture-web-app/src/components/audit/AuditGenerationHeader.vue
@@ -548,7 +548,8 @@ onMounted(() => {
 
 .sticky-indicator {
   position: sticky;
-  top: 0;
+  /* Prevent "one line background flickering" when scrolling the page */
+  top: -0.1px;
   z-index: 4;
   gap: 0.5rem 0;
   align-items: center;
diff --git a/confiture-web-app/src/components/report/ReportCriteria.vue b/confiture-web-app/src/components/report/ReportCriteria.vue
index 6192030a3..ac1585354 100644
--- a/confiture-web-app/src/components/report/ReportCriteria.vue
+++ b/confiture-web-app/src/components/report/ReportCriteria.vue
@@ -23,7 +23,7 @@ function isActive(id: string) {
 
 <template>
   <div class="main">
-    <div class="sidebar">
+    <div class="sidebar filters-wrapper">
       <nav class="fr-sidemenu fr-mb-3w" aria-label="Liste des pages">
         <div class="fr-sidemenu__inner">
           <button
@@ -86,7 +86,6 @@ 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,6 +107,7 @@ function isActive(id: string) {
 </template>
 
 <style scoped>
+@import "../../styles/filters.css";
 .main {
   display: grid;
   grid-template-columns: 20rem minmax(0, 1fr);
@@ -118,8 +118,9 @@ function isActive(id: string) {
   box-shadow: inset -1px 0 0 0 var(--border-default-grey);
 }
 
-.page-title {
+:deep(.page-title) {
   color: var(--text-active-blue-france);
+  scroll-margin: 4rem;
 }
 
 .fr-sidemenu__inner {
@@ -140,4 +141,8 @@ 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/pages/audit/AuditGenerationPage.vue b/confiture-web-app/src/pages/audit/AuditGenerationPage.vue
index df3353806..990350dcc 100644
--- a/confiture-web-app/src/pages/audit/AuditGenerationPage.vue
+++ b/confiture-web-app/src/pages/audit/AuditGenerationPage.vue
@@ -1,11 +1,12 @@
 <script setup lang="ts">
-import { computed, onBeforeUnmount, ref, watch } from "vue";
-import { onBeforeRouteLeave, useRoute } from "vue-router";
+import { type Component, computed, onBeforeUnmount, ref, watch } from "vue";
+import { onBeforeRouteLeave, useRoute, useRouter } from "vue-router";
 
 import AraTabs from "../../components/audit/AraTabs.vue";
 import AuditGenerationFilters from "../../components/audit/AuditGenerationFilters.vue";
 import AuditGenerationHeader from "../../components/audit/AuditGenerationHeader.vue";
 import AuditGenerationPageCriteria from "../../components/audit/AuditGenerationPageCriteria.vue";
+import LayoutIcon from "../../components/icons/LayoutIcon.vue";
 import PageMeta from "../../components/PageMeta";
 import { StatDonutTheme } from "../../components/StatDonut.vue";
 import BackLink from "../../components/ui/BackLink.vue";
@@ -15,9 +16,10 @@ import rgaa from "../../criteres.json";
 import { CRITERIA_BY_AUDIT_TYPE } from "../../criteria";
 import { useAuditStore, useFiltersStore, useResultsStore } from "../../store";
 import { AuditPage, AuditType, CriteriumResultStatus } from "../../types";
-import { pluralize } from "../../utils";
+import { pluralize, slugify } from "../../utils";
 
 const route = useRoute();
+const router = useRouter();
 
 const uniqueId = computed(() => route.params.uniqueId as string);
 const auditStore = useAuditStore();
@@ -77,14 +79,27 @@ const topics = computed(() => {
 
 const auditIsInProgress = computed(() => resultsStore.auditProgress < 1);
 
-function updateCurrentPageId(i: number) {
+function updateCurrentPageId(tabIndex: number) {
   auditStore.updateCurrentPageId(
-    i === 0
+    tabIndex === 0
       ? auditStore.currentAudit?.transverseElementsPage.id ?? null
       : auditStore.currentAudit?.pages
-        ? auditStore.currentAudit?.pages.at(i - 1)?.id ?? null
+        ? auditStore.currentAudit?.pages.at(tabIndex - 1)?.id ?? null
         : null
   );
+
+  // change the URL in the browser adress bar without triggering vue-router navigation
+  history.pushState(
+    {},
+    "null",
+    router.resolve({
+      name: "audit-generation",
+      params: {
+        uniqueId: uniqueId.value,
+        tab: slugify(tabsData.value[tabIndex].label)
+      }
+    }).fullPath
+  );
 }
 
 const {
@@ -172,7 +187,10 @@ let resizeObserver: ResizeObserver | null = null;
 watch(auditGenerationHeader, async () => {
   const stickyIndicator = auditGenerationHeader.value?.stickyIndicator;
   resizeObserver = new ResizeObserver((entries) => {
-    stickyTop.value = entries[0].target.clientHeight + "px";
+    const target = entries[0].target;
+    stickyTop.value = `calc(${getComputedStyle(target).top} + ${
+      target.clientHeight
+    }px)`;
   });
   stickyIndicator && resizeObserver.observe(stickyIndicator);
 });
@@ -211,13 +229,31 @@ const pageTitle = computed(() => {
   return "";
 });
 
-type TabData = { label: string; data: AuditPage };
+const targetTab = ref(route.params.tab as string | undefined);
+const targetTabIndex = computed(() => {
+  let index = tabsData.value.findIndex(
+    (t) => slugify(t.label).toLowerCase() === targetTab.value?.toLowerCase()
+  );
+  return index === -1 ? 0 : index;
+});
+
+type TabData = {
+  label: string;
+  icon?: Component;
+  data: AuditPage;
+};
 
 const tabsData = computed((): TabData[] => {
   const transversePage = auditStore.currentAudit?.transverseElementsPage;
   return [
     ...(transversePage
-      ? [{ label: transversePage?.name, data: transversePage }]
+      ? [
+          {
+            label: transversePage?.name,
+            icon: LayoutIcon,
+            data: transversePage
+          }
+        ]
       : []),
     ...(auditStore.currentAudit?.pages.map((p) => ({
       label: p.name,
@@ -257,7 +293,7 @@ const tabsData = computed((): TabData[] => {
         ]"
       >
         <div
-          :class="['filters-wrapper', { 'fr-pr-3v': showFilters }]"
+          :class="['filters-wrapper fr-pt-4v', { 'fr-pr-3v': showFilters }]"
           role="search"
           :style="{ '--filters-top-offset': stickyTop }"
         >
@@ -274,6 +310,7 @@ const tabsData = computed((): TabData[] => {
         <AraTabs
           :tabs="tabsData"
           :sticky-top="stickyTop"
+          :selected-tab="targetTabIndex"
           @change="updateCurrentPageId"
         >
           <template #panel="{ data }">
@@ -289,6 +326,8 @@ const tabsData = computed((): TabData[] => {
 </template>
 
 <style scoped>
+@import "../../styles/filters.css";
+
 /* Override DSFR columns width */
 .columns {
   --gap: 1.5rem;
@@ -316,23 +355,6 @@ const tabsData = computed((): TabData[] => {
   display: inline-block;
 }
 
-.filters-wrapper {
-  position: sticky;
-  top: var(--filters-top-offset, 0);
-  max-height: calc(100vh - var(--filters-top-offset, 0));
-  max-height: calc(100dvh - var(--filters-top-offset, 0));
-  overflow-y: auto;
-  padding-top: 1rem;
-}
-
-@media (width < 48rem) {
-  .filters-wrapper {
-    position: static;
-    max-height: none;
-    overflow-y: initial;
-  }
-}
-
 .page-wrapper {
   display: flex;
   flex-wrap: wrap;
diff --git a/confiture-web-app/src/pages/misc/PrivacyPage.vue b/confiture-web-app/src/pages/misc/PrivacyPage.vue
index f65b76ef3..3aa84bcc5 100644
--- a/confiture-web-app/src/pages/misc/PrivacyPage.vue
+++ b/confiture-web-app/src/pages/misc/PrivacyPage.vue
@@ -49,14 +49,19 @@ import PageMeta from "../../components/PageMeta";
                     2019)
                   </td>
                   <td rowspan="2">
-                    L’utilisateur·rice peut supprimer son compte et ses données personnelles à tout moment.<br>
-                    Un compte inactif pendant 5 ans est automatiquement supprimé ainsi que les données personnelles de l'utilisateur·rice. Les audits associés sont alors anonymisés.<br>
-                    Les audits réalisés sans compte sont automatiquement anonymisés après 5 ans et les données personnelles de l'utilisateur·rice supprimées.
+                    L’utilisateur·rice peut supprimer son compte et ses données
+                    personnelles à tout moment.<br />
+                    Un compte inactif pendant 5 ans est automatiquement supprimé
+                    ainsi que les données personnelles de l'utilisateur·rice.
+                    Les audits associés sont alors anonymisés.<br />
+                    Les audits réalisés sans compte sont automatiquement
+                    anonymisés après 5 ans et les données personnelles de
+                    l'utilisateur·rice supprimées.
                   </td>
                 </tr>
                 <tr>
                   <td>Prénom et nom</td>
-                  <td>« Signer » le rapport d’accessibilité</td>
+                  <td>« Signer » le rapport d’accessibilité</td>
                   <td>Intérêt légitime</td>
                 </tr>
               </tbody>
@@ -141,7 +146,7 @@ import PageMeta from "../../components/PageMeta";
     <h2>Suivi d’audience et vie privée</h2>
     <h3>Cookies déposés et <span lang="en">opt-out</span></h3>
     <p>
-      Ce site dépose un petit fichier texte (un « cookie ») sur votre appareil
+      Ce site dépose un petit fichier texte (un « cookie ») sur votre appareil
       lorsque vous le consultez. Cela nous permet de mesurer le nombre de
       visites et de comprendre quelles sont les pages les plus consultées.
     </p>
@@ -156,7 +161,7 @@ import PageMeta from "../../components/PageMeta";
     </p>
     <p>
       Nous utilisons pour cela Matomo, un outil libre, paramétré pour être en
-      conformité avec la recommandation « Cookies » de la CNIL. Cela signifie
+      conformité avec la recommandation « Cookies » de la CNIL. Cela signifie
       que votre adresse IP, par exemple, est anonymisée avant d’être
       enregistrée. Il est donc impossible d’associer vos visites sur ce site à
       votre personne.
diff --git a/confiture-web-app/src/pages/report/ReportPage.vue b/confiture-web-app/src/pages/report/ReportPage.vue
index a2c631e06..daa54ea9a 100644
--- a/confiture-web-app/src/pages/report/ReportPage.vue
+++ b/confiture-web-app/src/pages/report/ReportPage.vue
@@ -2,6 +2,7 @@
 import { computed, ref, watch } from "vue";
 import { useRoute, useRouter } from "vue-router";
 
+import AraTabs from "../../components/audit/AraTabs.vue";
 import PageMeta from "../../components/PageMeta";
 import OnboardingModal from "../../components/report/OnboardingModal.vue";
 import ReportErrors from "../../components/report/ReportErrors.vue";
@@ -36,14 +37,17 @@ const hasCompliantOrNotApplicableComments = computed(() => {
   });
 });
 
-const tabs = computed(() => [
-  { title: "Résultats", component: ReportResults },
-  ...(hasNotes.value ? [{ title: "Notes", component: ReportNotes }] : []),
-  { title: "Détails des non-conformités", component: ReportErrors },
-  ...(hasCompliantOrNotApplicableComments.value
-    ? [{ title: "Points d’amélioration", component: ReportImprovements }]
-    : [])
-]);
+type TabData = { label: string; data: any };
+const tabsData = computed((): TabData[] => {
+  return [
+    { label: "Résultats", data: ReportResults },
+    ...(hasNotes.value ? [{ label: "Notes", data: ReportNotes }] : []),
+    { label: "Détails des non-conformités", data: ReportErrors },
+    ...(hasCompliantOrNotApplicableComments.value
+      ? [{ label: "Points d’amélioration", data: ReportImprovements }]
+      : [])
+  ];
+});
 
 const showCopyAlert = ref(false);
 
@@ -83,14 +87,14 @@ function onOnboardingClose() {
 
 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()
+  let index = tabsData.value.findIndex(
+    (t) => slugify(t.label).toLowerCase() === targetTab.value?.toLowerCase()
   );
   return index === -1 ? 0 : index;
 });
 const router = useRouter();
 
-function handleTabChange(tabTitle: string) {
+function handleTabChange(tabIndex: number) {
   // change the URL in the browser adress bar without triggering vue-router navigation
   history.pushState(
     {},
@@ -99,12 +103,10 @@ function handleTabChange(tabTitle: string) {
       name: "report",
       params: {
         uniqueId,
-        tab: slugify(tabTitle)
+        tab: slugify(tabsData.value[tabIndex].label)
       }
     }).fullPath
   );
-
-  targetTab.value = slugify(tabTitle);
 }
 
 const csvExportUrl = computed(() => `/api/reports/${uniqueId}/exports/csv`);
@@ -137,7 +139,7 @@ const siteUrl = computed(() => {
     v-if="
       report.data && getAuditStatus(report.data) === AuditStatus.IN_PROGRESS
     "
-    class="fr-pt-1w in-progress-alert"
+    class="fr-pt-1w"
   >
     <div class="fr-alert fr-alert--warning fr-mb-6w">
       <p class="fr-alert__title">Audit en cours</p>
@@ -257,39 +259,19 @@ const siteUrl = computed(() => {
       </p>
     </div>
 
-    <div class="fr-tabs">
-      <ul class="fr-tabs__list" role="tablist" aria-label="Sections du rapport">
-        <li v-for="(tab, i) in tabs" :key="tab.title" role="presentation">
-          <button
-            :id="`tabpanel-${slugify(tab.title)}`"
-            class="fr-tabs__tab"
-            tabindex="0"
-            role="tab"
-            :aria-selected="i === targetTabIndex"
-            :aria-controls="`tabpanel-${slugify(tab.title)}-panel`"
-          >
-            {{ tab.title }}
-            <span v-if="i === targetTabIndex" class="fr-sr-only"
-              >&nbsp;Actif</span
-            >
-          </button>
-        </li>
-      </ul>
-      <div
-        v-for="(tab, i) in tabs"
-        :id="`tabpanel-${slugify(tab.title)}-panel`"
-        :key="tab.title"
-        class="fr-tabs__panel"
-        :class="{ 'fr-tabs__panel--selected': i === targetTabIndex }"
-        role="tabpanel"
-        :aria-labelledby="`tabpanel-${slugify(tab.title)}`"
-        tabindex="0"
-        v-on="{ 'dsfr.disclose': () => handleTabChange(tab.title) }"
-      >
-        <ReportResults v-if="i === 0" @to-tab="handleTabChange" />
-        <component :is="tab.component" v-else />
-      </div>
-    </div>
+    <!-- sticky-top="-0.1px" to prevent "one line background flickering"
+			when scrolling the page -->
+    <AraTabs
+      :tabs="tabsData"
+      sticky-top="-0.1px"
+      :selected-tab="targetTabIndex"
+      @change="handleTabChange"
+    >
+      <template #panel="{ data, i }">
+        <ReportResults v-if="i === 0" />
+        <component :is="data" v-else />
+      </template>
+    </AraTabs>
   </template>
 
   <TopLink />
@@ -312,11 +294,4 @@ const siteUrl = computed(() => {
 .dates {
   color: var(--text-mention-grey);
 }
-
-.in-progress-alert {
-  position: sticky;
-  top: 0;
-  background-color: var(--background-default-grey);
-  z-index: 3;
-}
 </style>
diff --git a/confiture-web-app/src/router.ts b/confiture-web-app/src/router.ts
index a75683dfa..f1b89e213 100644
--- a/confiture-web-app/src/router.ts
+++ b/confiture-web-app/src/router.ts
@@ -208,7 +208,7 @@ const router = createRouter({
       }
     },
     {
-      path: "/audits/:uniqueId/generation",
+      path: "/audits/:uniqueId/generation/:tab?",
       name: "audit-generation",
       component: AuditGenerationPage,
       meta: {
diff --git a/confiture-web-app/src/styles/filters.css b/confiture-web-app/src/styles/filters.css
new file mode 100644
index 000000000..d57a7ed89
--- /dev/null
+++ b/confiture-web-app/src/styles/filters.css
@@ -0,0 +1,16 @@
+.filters-wrapper {
+  position: sticky;
+  top: var(--filters-top-offset, 0);
+  max-height: calc(100vh - var(--filters-top-offset, 0));
+  max-height: calc(100dvh - var(--filters-top-offset, 0));
+  overflow-y: auto;
+  overflow-x: hidden;
+}
+
+@media (width < 48rem) {
+  .filters-wrapper {
+    position: static;
+    max-height: none;
+    overflow-y: initial;
+  }
+}