From 31b7b4bf6a3904e009b431713dca47f2d87a212e Mon Sep 17 00:00:00 2001
From: Frank Elsinga <frank@elsinga.de>
Date: Thu, 7 Mar 2024 03:30:43 +0100
Subject: [PATCH] misc fixes

---
 webclient/src/components/AppFooter.vue                | 10 +++++-----
 webclient/src/components/BreadcrumbList.vue           |  2 +-
 webclient/src/components/DetailsInfoSection.vue       |  7 ++++++-
 webclient/src/components/DetailsInteractiveMap.vue    |  6 ++----
 .../src/components/DetailsRoomOverviewSection.vue     | 11 +++++++----
 webclient/src/pages/view/[id].vue                     |  2 +-
 6 files changed, 22 insertions(+), 16 deletions(-)

diff --git a/webclient/src/components/AppFooter.vue b/webclient/src/components/AppFooter.vue
index c13755caa..b6f4b31e1 100644
--- a/webclient/src/components/AppFooter.vue
+++ b/webclient/src/components/AppFooter.vue
@@ -46,12 +46,12 @@ const navigation = computed(() => [
         </div>
       </nav>
       <div class="mt-10 flex justify-center space-x-10 text-center">
-        <p class="text-zinc-500 text-center text-xs">
-          {{ t("official_roomfinder") }}<br />
-          <Btn to="https://tum.de" variant="rounded-xl focusable" size="sm">
+        <Btn to="https://tum.de" variant="rounded-xl px-3 py-2 focusable" size="sm">
+          <p class="text-zinc-600 text-center text-xs">
+            {{ t("official_roomfinder") }}<br />
             <img :alt="t('tum_logo_alt')" :src="brandLogo.href" width="200" class="h-20" aria-hidden="true" />
-          </Btn>
-        </p>
+          </p>
+        </Btn>
       </div>
     </div>
   </footer>
diff --git a/webclient/src/components/BreadcrumbList.vue b/webclient/src/components/BreadcrumbList.vue
index 6e2a5937e..c2f43ac94 100644
--- a/webclient/src/components/BreadcrumbList.vue
+++ b/webclient/src/components/BreadcrumbList.vue
@@ -11,7 +11,7 @@ const props = withDefaults(defineProps<{ items: Item[]; class?: string }>(), { c
     :class="props.class"
   >
     <template v-for="(item, i) in props.items" :key="item.to">
-      <span v-if="i > 0" class="text-zinc-500">/</span>
+      <span v-if="i > 0" aria-hidden="true" class="text-zinc-500">/</span>
       <li property="itemListElement" typeof="ListItem">
         <RouterLink
           :to="item.to"
diff --git a/webclient/src/components/DetailsInfoSection.vue b/webclient/src/components/DetailsInfoSection.vue
index c199048d8..04e049187 100644
--- a/webclient/src/components/DetailsInfoSection.vue
+++ b/webclient/src/components/DetailsInfoSection.vue
@@ -22,7 +22,12 @@ const appURL = import.meta.env.VITE_APP_URL;
        as long as only little information is there -->
   <div class="hidden lg:block">
     <div class="bg-white border-zinc-200 max-w-sm rounded-lg border shadow-md shadow-zinc-500/5 dark:bg-zinc-100">
-      <button v-if="state.image.shown_image" type="button" @click="state.showImageSlideshow(true)">
+      <button
+        v-if="state.image.shown_image"
+        type="button"
+        @click="state.showImageSlideshow(true)"
+        class="focusable rounded-t-lg"
+      >
         <img
           :alt="t('image_alt')"
           :src="`${appURL}/cdn/header/${state.image.shown_image.name}`"
diff --git a/webclient/src/components/DetailsInteractiveMap.vue b/webclient/src/components/DetailsInteractiveMap.vue
index 1ca1d4d2b..8670ecda4 100644
--- a/webclient/src/components/DetailsInteractiveMap.vue
+++ b/webclient/src/components/DetailsInteractiveMap.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import type { BackgroundLayerSpecification, Coordinates, ImageSource } from "maplibre-gl";
-import { Map, Marker } from "maplibre-gl";
-import { AttributionControl, FullscreenControl, GeolocateControl, NavigationControl } from "maplibre-gl";
+import { AttributionControl, FullscreenControl, GeolocateControl, Map, Marker, NavigationControl } from "maplibre-gl";
 import { MapSelections, useDetailsStore } from "@/stores/details";
 import { nextTick, ref } from "vue";
 import { FloorControl } from "@/modules/FloorControl";
@@ -112,8 +111,7 @@ function initMap(containerId: string) {
     attributionControl: false,
   });
 
-  const nav = new NavigationControl({});
-  map.addControl(nav, "top-left");
+  map.addControl(new NavigationControl({}), "top-left");
 
   // (Browser) Fullscreen is enabled only on mobile, on desktop the map
   // is maximized instead. This is determined once to select the correct
diff --git a/webclient/src/components/DetailsRoomOverviewSection.vue b/webclient/src/components/DetailsRoomOverviewSection.vue
index 8a0a19e39..29942e7be 100644
--- a/webclient/src/components/DetailsRoomOverviewSection.vue
+++ b/webclient/src/components/DetailsRoomOverviewSection.vue
@@ -150,14 +150,17 @@ const { list, containerProps, wrapperProps } = useVirtualList<ChildEntry>(filter
         class="bg-zinc-100 border-zinc-400 max-h-96 overflow-y-scroll border p-2 dark:bg-zinc-200"
       >
         <ul v-bind="wrapperProps">
-          <a v-for="(room, index) in list" :key="index" :href="`/view/${room.data.id}`" class="!no-underline">
-            <li
+          <li>
+            <a
+              v-for="(room, index) in list"
+              :key="index"
+              :href="`/view/${room.data.id}`"
               class="flex h-[36px] max-h-[36px] min-h-[36px] flex-row gap-2 p-1.5 px-3 hover:text-white hover:bg-tumBlue-500"
             >
               <MapPinIcon class="my-auto h-4 w-4" aria-hidden="true" />
               {{ room.data.name }}
-            </li>
-          </a>
+            </a>
+          </li>
         </ul>
       </div>
       <div v-else class="flex flex-row items-baseline">
diff --git a/webclient/src/pages/view/[id].vue b/webclient/src/pages/view/[id].vue
index 1360c2a3f..dc2b31812 100644
--- a/webclient/src/pages/view/[id].vue
+++ b/webclient/src/pages/view/[id].vue
@@ -116,7 +116,7 @@ onMounted(() => {
     <button
       v-if="state.image.shown_image"
       type="button"
-      class="!-mx-5 block lg:hidden"
+      class="focusable !-mx-5 block lg:hidden"
       @click="state.showImageSlideshow(true)"
     >
       <img :alt="t('image_alt')" :src="`${appURL}/cdn/header/${state.image.shown_image.name}`" class="block w-full" />