839 bug mauvaise position de lusager après utilisation des ancres pages dans le rapport (#945)

yaaax · bellangerq · hissalht · web-flow · commit a948b79e76b5 · 2025-02-06T20:29:40.000+02:00
* 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>
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
diff --git a/confiture-web-app/src/router.ts b/confiture-web-app/src/router.ts
diff --git a/confiture-web-app/src/styles/filters.css b/confiture-web-app/src/styles/filters.css
