Update frontend components for accessibility and functionality improvements

- Modified docker-compose.dev.yml to conditionally run npm install based on the presence of package-lock.json.
- Upgraded Nuxt version in package-lock.json from 3.21.1 to 4.3.1 for enhanced features.
- Enhanced ConfirmModal component with aria-modal attribute for better accessibility.
- Updated MapErrorBoundary component's error message for clarity.
- Added role and aria-label attributes to MapView and MapSearch components for improved screen reader support.
- Refactored various components to manage focus behavior on modal close, enhancing user experience.
- Improved ToastContainer styling for better responsiveness and visibility.
- Updated layout components to include skip navigation links for improved accessibility.

frontend-nuxt/components/map/MapSearch.vue

@@ -12,6 +12,10 @@
         class="input input-sm w-full pr-8 focus:ring-2 focus:ring-primary"
         :class="touchFriendly ? 'min-h-11 text-base' : ''"
         placeholder="Coords (x, y) or marker name"
+        aria-label="Search by coordinates or marker name"
+        aria-expanded="showDropdown && (suggestions.length > 0 || recent.recent.length > 0)"
+        aria-haspopup="listbox"
+        aria-controls="map-search-listbox"
         autocomplete="off"
         @focus="showDropdown = true"
         @blur="scheduleCloseDropdown"
@@ -30,15 +34,21 @@
       </button>
       <div
         v-if="showDropdown && (suggestions.length > 0 || recent.recent.length > 0)"
+        id="map-search-listbox"
+        role="listbox"
         class="absolute left-0 right-0 top-full z-[600] mt-1 max-h-56 overflow-y-auto rounded-lg border border-base-300 bg-base-100 shadow-xl py-1"
+        :aria-activedescendant="suggestions.length > 0 ? `map-search-opt-${highlightIndex}` : recent.recent.length > 0 ? `map-search-recent-${highlightIndex}` : undefined"
       >
         <template v-if="suggestions.length > 0">
           <button
             v-for="(s, i) in suggestions"
+            :id="`map-search-opt-${i}`"
             :key="s.key"
             type="button"
+            role="option"
             class="w-full text-left px-3 py-2 text-sm hover:bg-base-200 flex items-center gap-2"
             :class="{ 'bg-primary/10': i === highlightIndex }"
+            :aria-selected="i === highlightIndex"
             @mousedown.prevent="goToSuggestion(s)"
           >
             <icons-icon-map-pin class="size-4 shrink-0 opacity-70" />
@@ -49,10 +59,13 @@
           <p class="px-3 py-1 text-xs text-base-content/60 uppercase tracking-wider">Recent</p>
           <button
             v-for="(r, i) in recent.recent"
+            :id="`map-search-recent-${i}`"
             :key="r.at"
             type="button"
+            role="option"
             class="w-full text-left px-3 py-2 text-sm hover:bg-base-200 flex items-center gap-2"
             :class="{ 'bg-primary/10': i === highlightIndex }"
+            :aria-selected="i === highlightIndex"
             @mousedown.prevent="goToRecent(r)"
           >
             <icons-icon-map-pin class="size-4 shrink-0 opacity-70" />