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

* Fix duplicate ids in errors and improvements tabs * Update CHANGELOG
DISIC · Dec 18, 2024 · 0427bae · 0427bae
1 parent cc47f30
commit 0427bae
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 11 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.
 
+## 18/12/2024
+
+### Corrections 🐛
+
+- Corrige la mauvaise position verticale dans la page après utilisation des ancres « Pages » du rapport ([#879](https://github.com/DISIC/Ara/pull/879))
+
 ## 13/12/2024
 
 ### Corrections 🐛

diff --git a/confiture-web-app/src/components/report/ReportCriteria.vue b/confiture-web-app/src/components/report/ReportCriteria.vue
@@ -9,6 +9,7 @@ import { ReportImprovement } from "./getReportImprovements";
 defineProps<{
   count: number;
   pagesData: ReportError[] | ReportImprovement[];
+  tabSlug: string;
   transverseData: ReportError | ReportImprovement;
   showFilters?: boolean;
   topNotice?: string;
@@ -36,12 +37,12 @@ const hasFilters = computed(() => {
           <button
             class="fr-sidemenu__btn"
             hidden
-            aria-controls="fr-sidemenu-wrapper"
+            :aria-controls="`report-${tabSlug}_sidemenu-wrapper`"
             aria-expanded="false"
           >
             Pages
           </button>
-          <div id="fr-sidemenu-wrapper" class="fr-collapse">
+          <div :id="`report-${tabSlug}_sidemenu-wrapper`" class="fr-collapse">
             <div class="fr-sidemenu__title fr-mb-2w">Pages</div>
             <ul class="fr-sidemenu__list">
               <li
@@ -56,10 +57,10 @@ const hasFilters = computed(() => {
               >
                 <a
                   class="fr-sidemenu__link"
-                  href="#elements-transverses"
+                  :href="`#${tabSlug}_elements-transverses`"
                   :aria-current="
                     route.hash
-                      ? isActive('#elements-transverses')
+                      ? isActive(`#${tabSlug}_elements-transverses`)
                         ? 'true'
                         : undefined
                       : 'true'
@@ -72,13 +73,17 @@ const hasFilters = computed(() => {
                 :key="page.name"
                 class="fr-sidemenu__item"
                 :class="{
-                  'fr-sidemenu__item--active': isActive(`#${page.id}`)
+                  'fr-sidemenu__item--active': isActive(
+                    `#${tabSlug}_${page.id}`
+                  )
                 }"
               >
                 <a
                   class="fr-sidemenu__link"
-                  :href="`#${page.id}`"
-                  :aria-current="isActive(`#${page.id}`) ? 'true' : undefined"
+                  :href="`#${tabSlug}_${page.id}`"
+                  :aria-current="
+                    isActive(`#${tabSlug}_${page.id}`) ? 'true' : undefined
+                  "
                 >
                   {{ page.name }}
                 </a>

diff --git a/confiture-web-app/src/components/report/ReportErrors.vue b/confiture-web-app/src/components/report/ReportErrors.vue
@@ -100,6 +100,7 @@ function resetFilters() {
     :pages-data="pagesErrors"
     :transverse-data="transverseErrors"
     :show-filters="true"
+    tab-slug="errors"
   >
     <template #filter>
       <div class="fr-text--bold fr-text--xl fr-mb-2w filter-title">Filtres</div>
@@ -198,7 +199,7 @@ function resetFilters() {
 
     <template v-if="transverseErrors.topics.length" #transverse-data>
       <section class="fr-mb-8w">
-        <h2 id="elements-transverses" class="fr-h3 fr-mb-2w page-title">
+        <h2 id="errors_elements-transverses" class="fr-h3 fr-mb-2w page-title">
           Éléments transverses
         </h2>
 
@@ -223,7 +224,7 @@ function resetFilters() {
 
     <template #pages-data>
       <section v-for="page in pagesErrors" :key="page.id" class="fr-mb-8w">
-        <h2 :id="`${page.id}`" class="fr-h3 fr-mb-2w page-title">
+        <h2 :id="`errors_${page.id}`" class="fr-h3 fr-mb-2w page-title">
           {{ page.name }}
         </h2>
         <a

diff --git a/confiture-web-app/src/components/report/ReportImprovements.vue b/confiture-web-app/src/components/report/ReportImprovements.vue
@@ -31,11 +31,15 @@ const improvementsCount = computed(() => {
     top-notice="Ci-dessous les commentaires de l’auditeur ou de l’auditrice concernant des critères conformes ou non applicables."
     :count="improvementsCount"
     :pages-data="pagesImprovements"
+    tab-slug="improvements"
     :transverse-data="transverseImprovements"
   >
     <template #transverse-data>
       <section v-if="transverseImprovements.topics.length > 0" class="fr-mb-8w">
-        <h2 id="elements-transverses" class="fr-h3 fr-mb-2w page-title">
+        <h2
+          id="improvements_elements-transverses"
+          class="fr-h3 fr-mb-2w page-title"
+        >
           Éléments transverses
         </h2>
 
@@ -67,7 +71,7 @@ const improvementsCount = computed(() => {
         :key="page.id"
         class="fr-mb-8w"
       >
-        <h2 :id="`${page.id}`" class="fr-h3 fr-mb-2w page-title">
+        <h2 :id="`improvements_${page.id}`" class="fr-h3 fr-mb-2w page-title">
           {{ page.name }}
         </h2>
         <a