Merge pull request #16 from OpenWebconcept/feature/OWC-95

Feature/owc 95

Author: markacato

build/blocks/owc-openkaarten/streetmap/client.js

@@ -1,5 +1,5 @@
 {
-    "/blocks/owc-openkaarten/streetmap/client.js": "/blocks/owc-openkaarten/streetmap/client.js?id=bf40ff132ebc066be4205d782460f249",
+    "/blocks/owc-openkaarten/streetmap/client.js": "/blocks/owc-openkaarten/streetmap/client.js?id=b70bf331ca1a2402b53582b042146a37",
     "/blocks/owc-openkaarten/streetmap/style.css": "/blocks/owc-openkaarten/streetmap/style.css?id=0c70cc29722d11466724176fc03cdd58",
     "/blocks/owc-openkaarten/streetmap/editor.css": "/blocks/owc-openkaarten/streetmap/editor.css?id=f4316f0723fb86e3b028a9b448b1f3ae"
 }

build/blocks/owc-openkaarten/streetmap/client.js.map

@@ -3,14 +3,31 @@ export const calculateBounds = (datasets) => {
 	let maxLat = null;
 	let minLong = null;
 	let maxLong = null;
-	datasets.forEach(({ features }) => {
-		features.forEach(({ geometry }) => {
-			const [lat, long] = geometry.coordinates.reverse(); // lat-long reversed
 
+	const processCoordinates = (coords) => {
+		// Handle a single coordinate pair
+		if (!Array.isArray(coords[0])) {
+			const [lat, long] = coords.reverse(); // lat-long reversed
 			minLat = minLat === null ? lat : Math.min(minLat, lat);
 			maxLat = maxLat === null ? lat : Math.max(maxLat, lat);
 			minLong = minLong === null ? long : Math.min(minLong, long);
 			maxLong = maxLong === null ? long : Math.max(maxLong, long);
+			return;
+		}
+
+		// Handle arrays of coordinates (Polygons)
+		coords.forEach(coordSet => {
+			if (Array.isArray(coordSet[0])) {
+				coordSet.forEach(coord => processCoordinates(coord.slice()));
+			} else {
+				processCoordinates(coordSet.slice());
+			}
+		});
+	};
+
+	datasets.forEach(({ features }) => {
+		features.forEach(({ geometry }) => {
+			processCoordinates(geometry.coordinates.slice());
 		});
 	});
 

build/mix-manifest.json

@@ -1,5 +1,5 @@
 <script setup>
-import {defineProps, onMounted, ref} from 'vue';
+import {defineProps, onMounted, ref, nextTick} from 'vue';
 import BaseAlert from './BaseAlert.vue';
 import BaseLoader from './BaseLoader.vue';
 import TheMap from './TheMap.vue';
@@ -58,9 +58,16 @@ const handleDatasetChange = (id, checked) => {
   }
 };
 
-// Add a function to toggle the view
-const toggleView = () => {
+const containerRef = ref(null);
+
+// Function to toggle the view and set focus
+const toggleViewAndFocus = () => {
   showListView.value = !showListView.value;
+  nextTick(() => {
+    if (containerRef.value) {
+      containerRef.value.focus();
+    }
+  });
 };
 
 /**
@@ -178,7 +185,11 @@ onMounted(() => {
 </script>
 
 <template v-if="endpoint">
-  <div class="owc-openkaarten-streetmap-container" ref="container">
+  <div
+    class="owc-openkaarten-streetmap-container"
+    ref="containerRef"
+    tabindex="-1"
+  >
     <BaseAlert v-if="error" type="error" :message="error"/>
     <section
         class="owc-openkaarten-streetmap__results"
@@ -194,15 +205,15 @@ onMounted(() => {
           :selectedDatasets="selectedDatasets"
           :tileLayerUri="tileLayerUri"
           :primaryColor="primaryColor"
-          @toggleView="toggleView"
+          @toggleView="toggleViewAndFocus"
           @datasetChange="handleDatasetChange"
       />
       <ListViewResults
           v-if="!loading && showListView"
           :datasets="datasets"
           :selectedDatasets="selectedDatasets"
           :primaryColor="primaryColor"
-          @toggleView="toggleView"
+          @toggleView="toggleViewAndFocus"
           @datasetChange="handleDatasetChange"
       />
     </section>
@@ -215,6 +226,11 @@ onMounted(() => {
   max-width: 100%;
 }
 
+.owc-openkaarten-streetmap-container:focus,
+.owc-openkaarten-streetmap__results:focus {
+  outline: none !important;
+}
+
 .owc-openkaarten-streetmap-container {
   margin-inline: auto;
   width: min(calc(100% - 32px), 1440px);

package-lock.json

@@ -1,5 +1,5 @@
 <script setup>
-import { onMounted } from 'vue';
+import { onMounted, onUnmounted, ref, watch, nextTick } from 'vue';
 import BaseFiltersCheckbox from './BaseFiltersCheckbox.vue';
 import BaseTooltipCardClose from './BaseTooltipCardClose.vue';
 
@@ -35,30 +35,111 @@ const datasetChange = (id, checked) => {
 	emit('datasetChange', id, checked);
 };
 
+const filterContainer = ref(null);
+const closeButton = ref(null);
+let previousActiveElement = null;
+
+const getFocusableElements = (element) => {
+	return element.querySelectorAll(
+		'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
+	);
+};
+
+const handleTab = (e) => {
+	if (!props.open || !filterContainer.value) return;
+
+	const focusableElements = getFocusableElements(filterContainer.value);
+	const firstFocusable = focusableElements[0];
+	const lastFocusable = focusableElements[focusableElements.length - 1];
+
+	if (e.shiftKey) {
+		if (document.activeElement === firstFocusable) {
+			e.preventDefault();
+			lastFocusable.focus();
+		}
+	} else {
+		if (document.activeElement === lastFocusable) {
+			e.preventDefault();
+			firstFocusable.focus();
+		}
+	}
+};
+
 const handleKeyup = (e) => {
-	if (props.open && e.key === 'Escape') {
-		emit('closeFilters');
+	if (!props.open) return;
+	
+	if (e.key === 'Escape') {
+		closeFiltersWithX();
+	}
+};
+
+const handleClickOutside = (e) => {
+	if (!props.open) return;
+	
+	if (filterContainer.value && !filterContainer.value.contains(e.target)) {
+		closeFiltersWithX();
+	}
+};
+
+const closeFiltersWithX = () => {
+	const filterButton = document.querySelector('.leaflet-control-filters');
+	if (filterButton) {
+		filterButton.focus();
+	}
+	emit('closeFilters');
+};
+
+const closeFiltersWithConfirm = (event) => {
+	event?.preventDefault();
+	event?.stopPropagation();
+	
+	const filterButton = document.querySelector('.leaflet-control-filters');
+	if (filterButton) {
+		filterButton.focus();
 	}
+	emit('closeFilters');
 };
 
+watch(() => props.open, async (newValue) => {
+	if (newValue) {
+		previousActiveElement = document.activeElement;
+		await nextTick();
+		closeButton.value?.focus();
+	}
+});
+
 onMounted(() => {
+	document.addEventListener('keydown', handleTab);
 	document.addEventListener('keyup', handleKeyup);
+	document.addEventListener('mousedown', handleClickOutside);
+});
+
+onUnmounted(() => {
+	document.removeEventListener('keydown', handleTab);
+	document.removeEventListener('keyup', handleKeyup);
+	document.removeEventListener('mousedown', handleClickOutside);
 });
 </script>
 
 <template>
 	<div
+		ref="filterContainer"
 		class="owc-openkaarten-streetmap__filters"
 		:style="{ '--owc-filters-primary': primaryColor }"
+		role="dialog"
+		aria-modal="true"
+		aria-labelledby="filters-title"
+		aria-describedby="filters-description"
 	>
 		<div class="owc-openkaarten-streetmap__filters__header">
-			<h5>{{ title }}</h5>
+			<h5 id="filters-title">{{ title }}</h5>
 			<BaseTooltipCardClose
+				ref="closeButton"
 				:primaryColor="primaryColor"
-				@closeCard="$emit('closeFilters')"
+				@closeCard="closeFiltersWithX"
 			/>
 		</div>
-		<div class="owc-openkaarten-streetmap__filters__body">
+		<div id="filters-description" class="owc-openkaarten-streetmap__filters__body">
 			<ul class="owc-openkaarten-streetmap__filters__body__list">
 				<li
 					v-for="layer in datasets"
@@ -84,7 +165,8 @@ onMounted(() => {
 		<div class="owc-openkaarten-streetmap__filters__footer">
 			<button
 				class="owc-openkaarten-streetmap__filters__footer__btn"
-				@click="$emit('closeFilters')"
+				@click.stop.prevent="closeFiltersWithConfirm"
+				@keydown.enter.stop.prevent="closeFiltersWithConfirm"
 			>
 				{{ confirm }}
 			</button>
@@ -105,7 +187,6 @@ onMounted(() => {
 		--owc-filters-card-margin: 0;
 	}
 
-
 	display: flex;
 	flex-direction: column;
 	justify-content: space-between;
@@ -119,6 +200,9 @@ onMounted(() => {
 	bottom: var(--owc-filters-card-margin);
 	right: var(--owc-filters-card-margin);
 	z-index: 9999;
+	border: none;
+	padding: 0;
+	margin: 0;
 
 	&__header {
 		display: flex;
@@ -183,9 +267,19 @@ onMounted(() => {
 			font-style: normal;
 			font-weight: 400;
 			line-height: 150%; /* 27px */
+
 			&:hover {
 				cursor: pointer;
 			}
+
+			&:focus-visible {
+				outline: 2px solid var(--owc-openkaarten-streetmap--primary-color);
+				outline-offset: 2px;
+			}
+
+			&:where(:hover, :focus-visible) {
+				opacity: 0.8;
+			}
 		}
 	}
 }