a11y: skiplink optionnel vers la recherche et la carte

AgenceBio · May 21, 2024 · c554a1a · c554a1a
1 parent b7f7713
commit c554a1a
Show file tree

Hide file tree

Showing 6 changed files with 19 additions and 6 deletions.
diff --git a/src/components/MainHeader.vue b/src/components/MainHeader.vue
@@ -5,6 +5,9 @@
         <li>
           <a class="fr-link" href="#content">Contenu</a>
         </li>
+        <li v-for="(href, text) of $route.meta.skipLinks" :key="href">
+          <a class="fr-link" :href>{{ text }}</a>
+        </li>
         <li>
           <a class="fr-link" href="#header-navigation">Menu</a>
         </li>

diff --git a/src/components/Map/MapContainer.vue b/src/components/Map/MapContainer.vue
@@ -26,6 +26,7 @@ const props = defineProps({
     type: Boolean,
     default: true
   },
+  mapId: String,
   minInitialZoom: {
     type: [Number, String],
     default: 14,
@@ -88,6 +89,10 @@ onMounted(() => {
     const zoom = Math.min(map.value.getZoom(), parseFloat(props.minInitialZoom))
     map.value.setZoom(zoom)
 
+    if (props.mapId) {
+      map.value.getCanvas().setAttribute('id', props.mapId)
+    }
+
     emit('zoom:change', map.value.getZoom())
   })
 

diff --git a/src/components/record/Table.vue b/src/components/record/Table.vue
@@ -8,7 +8,7 @@
       </li>
     </ul>
 
-    <table @mouseout="hoveredFeatureId = null">
+    <table @mouseout="hoveredFeatureId = null" id="parcellaire-table">
       <caption>Parcellaire agricole</caption>
       <colgroup>
         <col class="selection" />

diff --git a/src/pages/certification/exploitations/index.test.js b/src/pages/certification/exploitations/index.test.js
@@ -109,7 +109,7 @@ describe("certification/exploitations", () => {
 
     // // change search to nothing
     // // it should reset the filters
-    await wrapper.find('#search-input').setValue('')
+    await wrapper.find('#search').setValue('')
     await wrapper.find('form').trigger('submit')
 
     // todo: rather test against a router that works in tests, outside of components

diff --git a/src/pages/certification/exploitations/index.vue b/src/pages/certification/exploitations/index.vue
@@ -1,6 +1,8 @@
 <route lang="yaml">
 meta:
   requiredRoles: ['certif', 'audit']
+  skipLinks:
+    Recherche: '#search'
   seo:
     title: Liste des exploitations
 </route>
@@ -17,7 +19,7 @@ meta:
             id="header-search"
             role="search"
         >
-          <label class="fr-label" for="search-input">
+          <label class="fr-label" for="search">
             Recherche par nom d'exploitation, SIRET ou numéro bio
           </label>
           <input
@@ -26,7 +28,7 @@ meta:
               minlength="1" autocomplete="cartobio-operator"
               v-model.trim="userInput"
               autofocustype="search"
-              id="search-input"
+              id="search"
               :disabled="!isOnline"
           >
           <button
@@ -55,7 +57,7 @@ meta:
               <th scope="col" :aria-sort="sortAttribute('audit_date')" class="table-header-audit_date fr-text--align-right"><TableSort code="audit_date" v-model="sortOrder" @update:modelValue="v => updateQuery({ ...v, page: 1 })">Date de l'audit</TableSort></th>
               <th scope="col" :aria-sort="sortAttribute('statut')" class="table-header-statut fr-text--align-right"><TableSort code="statut" v-model="sortOrder" @update:modelValue="v => updateQuery({ ...v, page: 1 })">Statut</TableSort></th>
             </thead>
-            <tbody>
+            <tbody aria-live="polite">
               <tr v-if="isSearching">
                 <td colspan="4" class="center">
                   <Spinner>Chargement des données…</Spinner>

diff --git a/src/pages/exploitations/[numeroBio]/[recordId]/index.vue b/src/pages/exploitations/[numeroBio]/[recordId]/index.vue
@@ -1,6 +1,9 @@
 <route lang="yaml">
 meta:
   requiresAuth: true
+  skipLinks:
+    Parcellaire: '#parcellaire-table'
+    Carte du parcellaire: '#parcellaire-map'
   seo:
     title: Parcellaire
 </route>
@@ -49,7 +52,7 @@ meta:
       <div class="fr-col-12 fr-col-lg-6 fr-unhidden-lg fr-col--map" :class="{ 'fr-hidden': vue !== 'carte' }">
         <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="recordStore.bounds" :show-attribution="true" ref="mapRef">
+            <MapContainer class="map" :class="{ 'map--full-size': isMapFullSize }" :mode="isMapFullSize ? 'fullsize' : 'compact'" :bounds="recordStore.bounds" :show-attribution="true" ref="mapRef" map-id="parcellaire-map">
               <LayerSelector v-model:fond="mapPrefs.background" v-model:classification="mapPrefs.rpg" v-model:cadastre="mapPrefs.cadastre" />
               <GeojsonLayer v-if="mapPrefs.background === 'plan'" :style="baseStyle" name="base" :before="mapPrefs.cadastre ? 'cadastre' : mapPrefs.rpg ? 'surroundings' : 'parcellaire-operateur'" />
               <GeojsonLayer v-if="mapPrefs.background === 'satellite'" :style="satelliteStyle" name="satellite" :before="mapPrefs.cadastre ? 'cadastre' : mapPrefs.rpg ? 'surroundings' : 'parcellaire-operateur'" />