From 73aea07be48b648948fc5da0af927b149df749dd Mon Sep 17 00:00:00 2001
From: Thomas Parisot <thom4parisot@users.noreply.github.com>
Date: Mon, 18 Dec 2023 19:33:53 +0100
Subject: [PATCH 1/4] fix: appelle une seule fois clearAllMocks

---
 src/components/DesignSystem/AccordionGroup.test.js          | 4 +---
 src/components/Features/FeatureGroup.test.js                | 1 -
 .../Features/SingleItemCertificationBodyForm.test.js        | 1 -
 src/components/Features/Table.test.js                       | 1 -
 src/components/OperatorSetup/index.test.js                  | 3 +--
 tests-setup.js                                              | 2 ++
 widget/Notification.test.js                                 | 6 +-----
 7 files changed, 5 insertions(+), 13 deletions(-)

diff --git a/src/components/DesignSystem/AccordionGroup.test.js b/src/components/DesignSystem/AccordionGroup.test.js
index 134bc4c7..3ebaf037 100644
--- a/src/components/DesignSystem/AccordionGroup.test.js
+++ b/src/components/DesignSystem/AccordionGroup.test.js
@@ -1,4 +1,4 @@
-import { afterEach, describe, expect, test, vi } from "vitest"
+import { describe, expect, test } from "vitest"
 import { defineComponent } from "vue"
 import { mount } from "@vue/test-utils"
 
@@ -7,8 +7,6 @@ import AccordionGroup from "./AccordionGroup.vue"
 
 
 describe("AccordionGroup", () => {
-  afterEach(() => vi.clearAllMocks())
-
   test('we trigger an edit form', async () => {
     const TestComponent = defineComponent({
       components: { AccordionGroup, AccordionSection },
diff --git a/src/components/Features/FeatureGroup.test.js b/src/components/Features/FeatureGroup.test.js
index 8adf6b0a..eab7c6e9 100644
--- a/src/components/Features/FeatureGroup.test.js
+++ b/src/components/Features/FeatureGroup.test.js
@@ -26,7 +26,6 @@ describe("FeatureGroup", () => {
   afterEach(() => {
     document.body.outerHTML = ''
     permissions.$reset()
-    vi.clearAllMocks()
   })
 
   test('properly renders a group', async () => {
diff --git a/src/components/Features/SingleItemCertificationBodyForm.test.js b/src/components/Features/SingleItemCertificationBodyForm.test.js
index ecc25a8c..81e27a7f 100644
--- a/src/components/Features/SingleItemCertificationBodyForm.test.js
+++ b/src/components/Features/SingleItemCertificationBodyForm.test.js
@@ -51,7 +51,6 @@ describe("SingleItemCertificationBodyForm", () => {
 
   afterEach(() => {
     document.body.outerHTML = ''
-    vi.clearAllMocks()
   })
 
   test("we assign a certification state", async () => {
diff --git a/src/components/Features/Table.test.js b/src/components/Features/Table.test.js
index 4b82b3d3..3ebf638d 100644
--- a/src/components/Features/Table.test.js
+++ b/src/components/Features/Table.test.js
@@ -32,7 +32,6 @@ describe("Features Table", () => {
 
   afterEach(() => {
     document.body.outerHTML = ''
-    vi.clearAllMocks()
   })
 
   test("features are listed as 3 groups of 2 and 1 and 2 features (one being multi-crops)", () => {
diff --git a/src/components/OperatorSetup/index.test.js b/src/components/OperatorSetup/index.test.js
index 353ff5dc..30c70029 100644
--- a/src/components/OperatorSetup/index.test.js
+++ b/src/components/OperatorSetup/index.test.js
@@ -1,4 +1,4 @@
-import { afterEach, beforeAll, describe, it, expect, vi } from "vitest"
+import { beforeAll, describe, it, expect } from "vitest"
 import { mount, flushPromises } from "@vue/test-utils"
 import { createPinia, setActivePinia } from "pinia"
 
@@ -27,7 +27,6 @@ describe("OperatorSetup", () => {
       ]
     })
   })
-  afterEach(() => vi.clearAllMocks())
 
   it("should render only telepac tab if there is only telepac source in props", () => {
     const wrapper = mount(OperatorSetup, {
diff --git a/tests-setup.js b/tests-setup.js
index 5a96c545..ac74b8be 100644
--- a/tests-setup.js
+++ b/tests-setup.js
@@ -30,6 +30,8 @@ vi.mock('maplibre-gl', () => ({
     getLayer: vi.fn(),
     getSource: vi.fn(),
     getStyle: vi.fn().mockImplementation(() => ({layers: []})),
+    isStyleLoaded: vi.fn().mockReturnValue(true),
+    setLayoutProperty: vi.fn(),
     resize: vi.fn(),
   })),
   NavigationControl: vi.fn(),
diff --git a/widget/Notification.test.js b/widget/Notification.test.js
index e12baccb..6792b1ac 100644
--- a/widget/Notification.test.js
+++ b/widget/Notification.test.js
@@ -1,4 +1,4 @@
-import { afterEach, beforeEach, describe, expect, it, vi } from "vitest"
+import { beforeEach, describe, expect, it, vi } from "vitest"
 import { mount } from "@vue/test-utils"
 
 import Notification from "./Notification.ce.vue"
@@ -17,10 +17,6 @@ describe("Notification", () => {
     setActivePinia(createPinia())
   })
 
-  afterEach(() => {
-    vi.clearAllMocks()
-  })
-
   it("should render loading state then Telepac form", async () => {
     const wrapper = mount(Notification, {
       props: {

From d63b30a6f9971fac7e21d3c6656d4fc4f6c60c9c Mon Sep 17 00:00:00 2001
From: Thomas Parisot <thom4parisot@users.noreply.github.com>
Date: Mon, 18 Dec 2023 20:14:49 +0100
Subject: [PATCH 2/4] =?UTF-8?q?feat(Map):=20affiche=20l'attribution=20comp?=
 =?UTF-8?q?acte=20et=20l'=C3=A9chelle?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Map/MapContainer.test.js | 42 ++++++++++++++
 src/components/Map/MapContainer.vue     | 76 +++++++++++++++++--------
 tests-setup.js                          |  3 +
 3 files changed, 98 insertions(+), 23 deletions(-)
 create mode 100644 src/components/Map/MapContainer.test.js

diff --git a/src/components/Map/MapContainer.test.js b/src/components/Map/MapContainer.test.js
new file mode 100644
index 00000000..47e3fcf5
--- /dev/null
+++ b/src/components/Map/MapContainer.test.js
@@ -0,0 +1,42 @@
+import { describe, expect, test, vi } from "vitest"
+import { mount } from "@vue/test-utils"
+import { NavigationControl, ScaleControl } from 'maplibre-gl'
+
+import MapContainer from "./MapContainer.vue"
+
+describe("MapContainer", () => {
+  test('we display navigation with no interactive elements', async () => {
+    const wrapper = mount(MapContainer, {
+      props: { controls: false }
+    })
+
+    expect(NavigationControl).toHaveBeenCalledTimes(0)
+    expect(ScaleControl).toHaveBeenCalledTimes(0)
+  })
+
+  test('we display navigation control, without attribution', async () => {
+    const wrapper = mount(MapContainer, {
+      props: { controls: true }
+    })
+
+    expect(NavigationControl).toHaveBeenCalledTimes(1)
+    expect(ScaleControl).toHaveBeenCalledTimes(0)
+
+    const customMenuSpy = wrapper.vm.map.addControl.mock.calls.at(1)
+    expect(customMenuSpy).toHaveProperty('0.onAdd')
+    expect(customMenuSpy).toHaveProperty('1', 'bottom-right')
+  })
+
+  test('we display navigation control and attribution', async () => {
+    const wrapper = mount(MapContainer, {
+      props: { showAttribution: true }
+    })
+
+    expect(NavigationControl).toHaveBeenCalledOnce()
+    expect(ScaleControl).toHaveBeenCalledOnce()
+
+    const attributionSpy = wrapper.vm.map.addControl.mock.calls.at(2)
+    expect(attributionSpy).toHaveProperty('0.onAdd')
+    expect(attributionSpy).toHaveProperty('1', 'bottom-right')
+  })
+})
diff --git a/src/components/Map/MapContainer.vue b/src/components/Map/MapContainer.vue
index 537edb8a..678d083f 100644
--- a/src/components/Map/MapContainer.vue
+++ b/src/components/Map/MapContainer.vue
@@ -1,16 +1,12 @@
 <template>
   <aside ref="mapContainer" class="maplibre-container">
     <slot v-if="map" />
-    <div class="legend">
-      <slot name="legend" />
-    </div>
-    <slot name="credits" />
   </aside>
 </template>
 
 <script setup>
 import { onMounted, onUpdated, provide, ref, shallowRef, watch } from 'vue'
-import { Map as MapLibre, NavigationControl } from 'maplibre-gl'
+import { Map as MapLibre, NavigationControl, ScaleControl } from 'maplibre-gl'
 
 const map = shallowRef(null)
 const mapContainer = ref(null)
@@ -18,6 +14,10 @@ const mapContainer = ref(null)
 provide('map', map)
 
 const props = defineProps({
+  showAttribution: {
+    type: Boolean,
+    default: false
+  },
   bounds: Array,
   controls: {
     type: Boolean,
@@ -38,12 +38,14 @@ const emit = defineEmits(['zoom:change'])
 
 onMounted(() => {
   map.value = new MapLibre({
+    attributionControl: false,
     container: mapContainer.value,
     hash: false,
     bounds: props.bounds,
     padding: 50,
     ...props.options,
     locale: {
+      'AttributionControl.ToggleAttribution': 'Déplier/replier les informations',
       'NavigationControl.ResetBearing': 'Restaurer l’orientation au nord',
       'NavigationControl.ZoomIn': 'Zoomer',
       'NavigationControl.ZoomOut': 'Dézoomer',
@@ -55,12 +57,25 @@ onMounted(() => {
     map.value.addControl({
       onAdd: () => {
         const el = document.createElement('div')
-        el.className = 'maplibregl-ctrl maplibregl-ctrl-group cartobio-controls fr-mb-1w'
+        el.className = 'maplibregl-ctrl maplibregl-ctrl-group cartobio-controls'
         return el
       }
     }, 'bottom-right')
   }
 
+  if (props.showAttribution) {
+    map.value.addControl({
+      onAdd: () => {
+        const el = document.createElement('div')
+        el.className = 'maplibregl-ctrl maplibregl-ctrl-attrib'
+        el.innerHTML = `<a href="" target="_blank">Sources des données et licences</a>`
+        return el
+      }
+    }, 'bottom-right')
+
+    map.value.addControl(new ScaleControl({ maxWidth: 80, unit: 'metric' }), 'bottom-right')
+  }
+
   map.value.once('load', () => {
     emit('zoom:change', map.value.getZoom())
   })
@@ -87,14 +102,41 @@ defineExpose({
   font: inherit;
 }
 
+.maplibregl-ctrl-bottom-left {
+  z-index: 10;    /* has to be above maplibregl-ctrl-bottom-right to overlap it */
+}
+
 .maplibregl-ctrl-bottom-right {
-  bottom: 1.5rem;
-  right: 1.5rem;
+  display: grid;
+  grid-template-areas:
+    'null null custom-controls'
+    'null null group-controls'
+    'attribution scale scale';
+  gap: 1rem;
+
+  bottom: 1rem;
+  right: 1rem;
   padding: 0;
-}
 
-.maplibregl-ctrl-bottom-right .maplibregl-ctrl-group {
-  margin: 0;
+  .maplibregl-ctrl {
+    margin: 0;
+  }
+
+  .maplibregl-ctrl-attrib {
+    background-color: hsla(0,0%,100%, .90);
+    font-size: 0.75rem;
+    grid-area: attribution;
+  }
+  .maplibregl-ctrl-scale {
+    grid-area: scale;
+  }
+
+  .maplibregl-ctrl-group {
+    grid-area: group-controls;
+  }
+  .cartobio-controls {
+    grid-area: custom-controls;
+  }
 }
 
 .legend > * {
@@ -103,10 +145,6 @@ defineExpose({
 </style>
 
 <style lang="postcss" scoped>
-:deep(.maplibregl-ctrl-attrib) {
-  display: none;
-}
-
 :deep(.maplibregl-popup) {
   position: absolute;
   left: 0;
@@ -128,12 +166,4 @@ defineExpose({
 .maplibre-container .maplibregl-canvas-container {
   z-index: 0
 }
-
-.legend {
-  position: absolute;
-  height: 100%;
-  width: 100%;
-  z-index: 1;
-  pointer-events: none;
-}
 </style>
diff --git a/tests-setup.js b/tests-setup.js
index ac74b8be..0540afb0 100644
--- a/tests-setup.js
+++ b/tests-setup.js
@@ -27,14 +27,17 @@ vi.mock('maplibre-gl', () => ({
     loadImage: vi.fn(),
     addSource: vi.fn(),
     addLayer: vi.fn(),
+    fitBounds: vi.fn(),
     getLayer: vi.fn(),
     getSource: vi.fn(),
+    getZoom: vi.fn(),
     getStyle: vi.fn().mockImplementation(() => ({layers: []})),
     isStyleLoaded: vi.fn().mockReturnValue(true),
     setLayoutProperty: vi.fn(),
     resize: vi.fn(),
   })),
   NavigationControl: vi.fn(),
+  ScaleControl: vi.fn(),
 }));
 
 vi.stubGlobal('matchMedia', vi.fn(() => ({

From 548b0c1c8a51685c530ce76eb0e4021be15afb9b Mon Sep 17 00:00:00 2001
From: Thomas Parisot <thom4parisot@users.noreply.github.com>
Date: Mon, 18 Dec 2023 20:15:54 +0100
Subject: [PATCH 3/4] fix(FeaturesLayer): utilise une variable ilots au pluriel
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Par cohésion et pour éviter les typos
---
 src/components/Map/FeaturesLayer.vue          | 23 ++++++++++++-------
 .../exploitations/[id]/index.vue              |  6 ++---
 .../[id]/ajout-parcelle/dessin.vue            |  4 ++--
 .../[id]/ajout-parcelle/index.vue             |  4 ++--
 src/pages/exploitations/[id]/index.vue        |  6 ++---
 .../[id]/modifier/[featureId].vue             |  2 +-
 6 files changed, 26 insertions(+), 19 deletions(-)

diff --git a/src/components/Map/FeaturesLayer.vue b/src/components/Map/FeaturesLayer.vue
index f84ebbac..e7cfe529 100644
--- a/src/components/Map/FeaturesLayer.vue
+++ b/src/components/Map/FeaturesLayer.vue
@@ -24,29 +24,29 @@ export default {
       type: Boolean,
       default: false
     },
-    showNumerosIlot: {
+    showNumerosIlots: {
       type: Boolean,
       default: false
     },
     style: {
       type: Object,
-      default: ({ showNumeroIlots }) => ({
+      default: (props) => ({
         layers: [
           {
             "id": "numeros-ilots",
             "type": "symbol",
             "source": "data",
-            "minzoom": 14,
+            "minzoom": 12,
             "layout": {
               "text-field": [
                 "case",
                 ["has", "NUMERO_I"],
-                ["concat", ["get", "NUMERO_I"], " - ", ["get", "NUMERO_P"]],
+                ["concat", ["get", "NUMERO_I"], ".", ["get", "NUMERO_P"]],
                 "",
               ],
               "text-font": ["Noto Sans Regular"],
               "text-size": 12,
-              "visibility": showNumeroIlots ? "visible" : "none",
+              "visibility": props.showNumeroIlots ? "visible" : "none",
             },
             "paint": {
               "text-color": "rgba(0, 0, 0, 1)",
@@ -63,9 +63,16 @@ export default {
     const featureStore = useFeaturesStore()
     const map = inject('map')
 
-    watch(() => props.showNumerosIlot, (showNumeroIlots) => {
-      map.value.setLayoutProperty('parcellaire-operateur/numeros-ilots', 'visibility', showNumeroIlots ? 'visible' : 'none')
-    })
+    watch(() => props.showNumerosIlots, (showNumeroIlots) => {
+      const visibility = showNumeroIlots ? 'visible' : 'none'
+
+      if (map.value.isStyleLoaded()) {
+        map.value.setLayoutProperty('parcellaire-operateur/numeros-ilots', 'visibility', visibility)
+      }
+      else {
+        map.value.once('load', () => map.value.setLayoutProperty('parcellaire-operateur/numeros-ilots', 'visibility', visibility))
+      }
+    }, { immediate: true })
 
     if (props.interactive) {
       featureStore.bindMaplibreFeatureState(map.value, 'parcellaire-operateur/data')
diff --git a/src/pages/certification/exploitations/[id]/index.vue b/src/pages/certification/exploitations/[id]/index.vue
index 7e277a2b..f58fed7e 100644
--- a/src/pages/certification/exploitations/[id]/index.vue
+++ b/src/pages/certification/exploitations/[id]/index.vue
@@ -24,14 +24,14 @@ meta:
       <div class="fr-col-6 fr-col--map" v-if="recordStore.isSetup">
         <div class="sticky-map" :class="{ 'sticky-map--full-size': isMapFullSize }">
           <div :class="{ 'full-size-map fr-card fr-card--shadow fr-p-2w': isMapFullSize }">
-            <MapContainer class="map" :class="{ 'map--full-size': isMapFullSize }" :mode="isMapFullSize ? 'fullsize' : 'compact'" :bounds="mapBounds" ref="mapRef">
+            <MapContainer class="map" :class="{ 'map--full-size': isMapFullSize }" :mode="isMapFullSize ? 'fullsize' : 'compact'" :bounds="mapBounds" :show-attribution="true" ref="mapRef">
               <LayerSelector v-model:fond="fond" v-model:classification="showClassification" v-model:cadastre="showCadastre" v-model:ilots="showIlots" />
               <GeojsonLayer v-if="fond === 'plan'" :style="baseStyle" name="base" :before="showCadastre ? 'cadastre' : showClassification ? 'surroundings' : 'parcellaire-operateur'" />
               <GeojsonLayer v-if="fond === 'satellite'" :style="satelliteStyle" name="satellite" :before="showCadastre ? 'cadastre' : showClassification ? 'surroundings' : 'parcellaire-operateur'" />
               <GeojsonLayer v-if="showCadastre" :style="cadastreStyle" name="cadastre" before="parcellaire-operateur" />
               <GeojsonLayer v-if="showClassification" :style="surroundingsStyle" name="surroundings" before="parcellaire-operateur" />
 
-              <FeaturesLayer :show-numeros-ilot="showIlots" interactive />
+              <FeaturesLayer :show-numeros-ilots="showIlots" interactive />
               <CustomControls @center="focusOnOriginalBbox" v-model:large="isMapFullSize" />
             </MapContainer>
           </div>
@@ -87,7 +87,7 @@ const mapRef = shallowRef(null);
 const fond = ref('plan')
 const showClassification = ref(false)
 const showCadastre = ref(false)
-const showIlots = ref(false)
+const showIlots = ref(true)
 const isMapFullSize = ref(false)
 
 const validationRules = readonly({
diff --git a/src/pages/exploitations/[id]/ajout-parcelle/dessin.vue b/src/pages/exploitations/[id]/ajout-parcelle/dessin.vue
index a2d53171..fac370cf 100644
--- a/src/pages/exploitations/[id]/ajout-parcelle/dessin.vue
+++ b/src/pages/exploitations/[id]/ajout-parcelle/dessin.vue
@@ -28,7 +28,7 @@ meta:
           <GeojsonLayer v-if="showCadastre" :style="cadastreStyle" name="cadastre" before="parcellaire-operateur" />
           <GeojsonLayer v-if="showClassification" :style="surroundingsStyle" name="surroundings" before="parcellaire-operateur" />
 
-          <FeaturesLayer :show-numeros-ilot="showIlots" />
+          <FeaturesLayer :show-numeros-ilots="showIlots" />
         </MapContainer>
       </div>
       <div class="fr-col-3">
@@ -130,7 +130,7 @@ const map = ref(null) // MapContainer instance
 const fond = ref('satellite')
 const showClassification = ref(false)
 const showCadastre = ref(false)
-const showIlots = ref(false)
+const showIlots = ref(true)
 let draw // TerraDraw instance
 
 /**
diff --git a/src/pages/exploitations/[id]/ajout-parcelle/index.vue b/src/pages/exploitations/[id]/ajout-parcelle/index.vue
index 91d80f77..6056231f 100644
--- a/src/pages/exploitations/[id]/ajout-parcelle/index.vue
+++ b/src/pages/exploitations/[id]/ajout-parcelle/index.vue
@@ -27,7 +27,7 @@
           <GeojsonLayer v-if="showCadastre" :style="cadastreStyle" name="cadastre" before="parcellaire-operateur" />
           <GeojsonLayer v-if="showClassification" :style="surroundingsStyle" name="surroundings" before="parcellaire-operateur" />
 
-          <FeaturesLayer :show-numeros-ilot="showIlots" />
+          <FeaturesLayer :show-numeros-ilots="showIlots" />
         </MapContainer>
         <SetupOverlay v-else>
           Parcellaire inconnu
@@ -71,7 +71,7 @@ const record = recordStore.record
 const fond = ref('plan')
 const showClassification = ref(false)
 const showCadastre = ref(true)
-const showIlots = ref(false)
+const showIlots = ref(true)
 
 const pendingChangesCollection = shallowRef(null)
 const mapBounds = computed(() => {
diff --git a/src/pages/exploitations/[id]/index.vue b/src/pages/exploitations/[id]/index.vue
index 6e578cb9..88d7cbde 100644
--- a/src/pages/exploitations/[id]/index.vue
+++ b/src/pages/exploitations/[id]/index.vue
@@ -20,14 +20,14 @@ meta:
       <div class="fr-col-6 fr-col--map">
         <div class="sticky-map" :class="{ 'sticky-map--full-size': isMapFullSize }">
           <div :class="{ 'full-size-map fr-card fr-card--shadow fr-p-2w': isMapFullSize }">
-            <MapContainer class="map" :class="{ 'map--full-size': isMapFullSize }" :mode="isMapFullSize ? 'fullsize' : 'compact'" :bounds="mapBounds">
+            <MapContainer class="map" :class="{ 'map--full-size': isMapFullSize }" :mode="isMapFullSize ? 'fullsize' : 'compact'" :bounds="mapBounds" :show-attribution="true">
               <LayerSelector v-model:fond="fond" v-model:classification="showClassification" v-model:cadastre="showCadastre" v-model:ilots="showIlots" />
               <GeojsonLayer v-if="fond === 'plan'" :style="baseStyle" name="base" :before="showCadastre ? 'cadastre' : showClassification ? 'surroundings' : 'parcellaire-operateur'" />
               <GeojsonLayer v-if="fond === 'satellite'" :style="satelliteStyle" name="satellite" :before="showCadastre ? 'cadastre' : showClassification ? 'surroundings' : 'parcellaire-operateur'" />
               <GeojsonLayer v-if="showCadastre" :style="cadastreStyle" name="cadastre" before="parcellaire-operateur" />
               <GeojsonLayer v-if="showClassification" :style="surroundingsStyle" name="surroundings" before="parcellaire-operateur" />
 
-              <FeaturesLayer :show-numeros-ilot="showIlots" interactive />
+              <FeaturesLayer :show-numeros-ilots="showIlots" interactive />
               <CustomControls @center="focusOnOriginalBbox" v-model:large="isMapFullSize" />
             </MapContainer>
           </div>
@@ -80,7 +80,7 @@ const { record } = storeToRefs(recordStore)
 const fond = ref('plan')
 const showClassification = ref(false)
 const showCadastre = ref(false)
-const showIlots = ref(false)
+const showIlots = ref(true)
 
 const isMapFullSize = ref(false)
 
diff --git a/src/pages/exploitations/[id]/modifier/[featureId].vue b/src/pages/exploitations/[id]/modifier/[featureId].vue
index d78a8775..505ecee7 100644
--- a/src/pages/exploitations/[id]/modifier/[featureId].vue
+++ b/src/pages/exploitations/[id]/modifier/[featureId].vue
@@ -29,7 +29,7 @@ meta:
           <GeojsonLayer v-if="showCadastre" :style="cadastreStyle" name="cadastre" before="parcellaire-operateur" />
           <GeojsonLayer v-if="showClassification" :style="surroundingsStyle" name="surroundings" before="parcellaire-operateur" />
 
-          <FeaturesLayer :data="otherCollection" :show-numeros-ilot="showIlots" />
+          <FeaturesLayer :data="otherCollection" :show-numeros-ilots="showIlots" />
         </MapContainer>
       </div>
       <div class="fr-col-3">

From 96e4d857a0f0023e02d69e35059a34fa942f82c8 Mon Sep 17 00:00:00 2001
From: Thomas Parisot <thom4parisot@users.noreply.github.com>
Date: Mon, 18 Dec 2023 20:16:18 +0100
Subject: [PATCH 4/4] =?UTF-8?q?fix(LayerSelector):=20harmonise=20les=20mar?=
 =?UTF-8?q?ges=20et=20les=20libell=C3=A9s=20Aria?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Map/LayerSelector.vue | 26 ++++++++++++++++++--------
 1 file changed, 18 insertions(+), 8 deletions(-)

diff --git a/src/components/Map/LayerSelector.vue b/src/components/Map/LayerSelector.vue
index 37b08ae3..57ac40e1 100644
--- a/src/components/Map/LayerSelector.vue
+++ b/src/components/Map/LayerSelector.vue
@@ -27,7 +27,7 @@ defineEmits(['update:fond', 'update:classification', 'update:cadastre', 'update:
 
 <template>
 <Teleport to=".maplibregl-ctrl-bottom-left">
-  <div class="container maplibregl-ctrl fr-mb-2w fr-ml-2w">
+  <div class="container maplibregl-ctrl">
     <button
       class="menu-toggle"
       :class="{ 'menu-toggle--satellite': fond === 'satellite', 'menu-toggle--plan': fond === 'plan' }"
@@ -53,16 +53,19 @@ defineEmits(['update:fond', 'update:classification', 'update:cadastre', 'update:
         <span>Satellite</span>
       </button>
       <h6>Calques</h6>
-      <button class="menu-entry" :class="{ 'active': classification }" @click="$emit('update:classification', !classification)">
-        <img src="@/assets/map/classification.jpg" alt="Couche classification" />
-        <span>Classification</span>
+      <button aria-label="Calque classification" class="menu-entry" :class="{ 'active': classification }" @click="$emit('update:classification', !classification)">
+        <img src="@/assets/map/classification.jpg" alt="" />
+        <span>
+          Classification
+          <small class="fr-hint-text">Voir la <a href="https://docs-cartobio.agencebio.org/agriculteurs.trices/annexes/legendes-de-la-carte" @click.stop target="_blank">méthode de classification</a></small>
+        </span>
       </button>
-      <button class="menu-entry" :class="{ 'active': cadastre }" @click="$emit('update:cadastre', !cadastre)">
-        <img src="@/assets/map/cadastre.jpg" alt="Couche cadastre" />
+      <button aria-label="Calque numéros de cadastre" class="menu-entry" :class="{ 'active': cadastre }" @click="$emit('update:cadastre', !cadastre)">
+        <img src="@/assets/map/cadastre.jpg" alt="" />
         <span>Numéros de cadastre</span>
       </button>
-      <button class="menu-entry" :class="{ 'active': ilots }" @click="$emit('update:ilots', !ilots)">
-        <img src="../../assets/map/ilots.png" alt="Numéros d'îlots" />
+      <button aria-label="Calque " class="menu-entry" :class="{ 'active': ilots }" @click="$emit('update:ilots', !ilots)">
+        <img src="../../assets/map/ilots.png" alt="" />
         <span>Numéros d'îlots (PAC)</span>
       </button>
     </div>
@@ -77,6 +80,7 @@ defineEmits(['update:fond', 'update:classification', 'update:cadastre', 'update:
   gap: 1rem;
   justify-content: center;
   align-items: end;
+  margin: 1rem;
 }
 
 .menu-toggle {
@@ -134,6 +138,12 @@ defineEmits(['update:fond', 'update:classification', 'update:cadastre', 'update:
   gap: 1rem;
   font-size: 1rem;
   margin-bottom: 0.5rem;
+
+  > span {
+    align-items: flex-start;
+    display: flex;
+    flex-direction: column;
+  }
 }
 
 .menu .menu-entry:hover {