Merge pull request #2365 from rommapp/vueuse-activeelement

Replace activeElement with type exact useActiveElement

frontend/src/components/common/Navigation/CollectionsDrawer.vue

@@ -5,7 +5,7 @@ import CollectionListItem from "@/components/common/Collection/ListItem.vue";
 import storeCollections from "@/stores/collections";
 import storeNavigation from "@/stores/navigation";
 import type { Events } from "@/types/emitter";
-import { useLocalStorage } from "@vueuse/core";
+import { useActiveElement, useLocalStorage } from "@vueuse/core";
 import type { Emitter } from "mitt";
 import { storeToRefs } from "pinia";
 import { inject, onBeforeUnmount, onMounted, ref, watch, computed } from "vue";
@@ -15,6 +15,7 @@ import { useDisplay } from "vuetify";
 const { t } = useI18n();
 const navigationStore = storeNavigation();
 const { mdAndUp, smAndDown } = useDisplay();
+const activeElement = useActiveElement();
 const collectionsStore = storeCollections();
 const {
   filteredCollections,
@@ -40,16 +41,11 @@ function clear() {
   filterText.value = "";
 }
 
-// Ref to store the element that triggered the drawer
-const triggerElement = ref<HTMLElement | null>(null);
-// Watch for changes in the navigation drawer state
-const textFieldRef = ref();
+const triggerElement = ref<HTMLElement | null | undefined>(undefined);
 watch(activeCollectionsDrawer, (isOpen) => {
   if (isOpen) {
     // Store the currently focused element before opening the drawer
-    triggerElement.value = document.activeElement as HTMLElement;
-    // Focus the text field when the drawer is opened
-    // textFieldRef.value?.focus();
+    triggerElement.value = activeElement.value;
   }
 });
 
@@ -69,6 +65,12 @@ function onScroll() {
   }
 }
 
+function onClose() {
+  activeCollectionsDrawer.value = false;
+  // Refocus the trigger element for keyboard navigation
+  triggerElement.value?.focus();
+}
+
 onMounted(() => {
   const collectionsDrawer = document.querySelector(
     "#collections-drawer .v-navigation-drawer__content",
@@ -82,12 +84,6 @@ onBeforeUnmount(() => {
   );
   collectionsDrawer?.removeEventListener("scroll", onScroll);
 });
-
-function onClose() {
-  activeCollectionsDrawer.value = false;
-  // Focus the element that triggered the drawer
-  triggerElement.value?.focus();
-}
 </script>
 <template>
   <v-navigation-drawer
@@ -110,7 +106,6 @@ function onClose() {
   >
     <template #prepend>
       <v-text-field
-        ref="textFieldRef"
         aria-label="Search collections"
         :tabindex="tabIndex"
         v-model="filterText"

frontend/src/components/common/Navigation/MainAppBar.vue

@@ -126,7 +126,13 @@ function collapse() {
       block
       tabindex="7"
     />
-    <console-mode-btn :withTag="!mainBarCollapsed" rounded class="mt-2" block />
+    <console-mode-btn
+      :withTag="!mainBarCollapsed"
+      rounded
+      class="mt-2"
+      block
+      tabindex="8"
+    />
 
     <template #append>
       <upload-btn
@@ -134,10 +140,10 @@ function collapse() {
         rounded
         class="mt-2 mb-6"
         block
-        tabindex="8"
+        tabindex="9"
       />
       <v-row no-gutters class="my-2 justify-center">
-        <user-btn tabindex="9" aria-label="Settings menu" />
+        <user-btn tabindex="10" aria-label="Settings menu" />
       </v-row>
     </template>
   </v-navigation-drawer>

frontend/src/components/common/Navigation/PlatformsDrawer.vue

@@ -3,7 +3,7 @@ import PlatformListItem from "@/components/common/Platform/ListItem.vue";
 import storeNavigation from "@/stores/navigation";
 import type { Platform } from "@/stores/platforms";
 import storePlatforms from "@/stores/platforms";
-import { useLocalStorage } from "@vueuse/core";
+import { useActiveElement, useLocalStorage } from "@vueuse/core";
 import { storeToRefs } from "pinia";
 import { ref, watch, computed } from "vue";
 import { useI18n } from "vue-i18n";
@@ -13,14 +13,12 @@ type GroupByType = "family_name" | "generation" | "category" | null;
 
 const { t } = useI18n();
 const { mdAndUp, smAndDown } = useDisplay();
+const activeElement = useActiveElement();
 const navigationStore = storeNavigation();
 const platformsStore = storePlatforms();
 const { filteredPlatforms, filterText } = storeToRefs(platformsStore);
 const { activePlatformsDrawer } = storeToRefs(navigationStore);
-const textFieldRef = ref();
-const triggerElement = ref<HTMLElement | null>(null);
 const openPanels = ref<number[]>([]);
-
 const groupBy = useLocalStorage<GroupByType | null>(
   "settings.platformsGroupBy",
   null,
@@ -80,9 +78,11 @@ watch(
   { immediate: true },
 );
 
+const triggerElement = ref<HTMLElement | null | undefined>(undefined);
 watch(activePlatformsDrawer, (isOpen) => {
   if (isOpen) {
-    triggerElement.value = document.activeElement as HTMLElement;
+    // Store the currently focused element before opening the drawer
+    triggerElement.value = activeElement.value;
   }
 });
 
@@ -92,6 +92,7 @@ const clear = () => {
 
 const onClose = () => {
   activePlatformsDrawer.value = false;
+  // Refocus the trigger element for keyboard navigation
   triggerElement.value?.focus();
 };
 </script>
@@ -116,7 +117,6 @@ const onClose = () => {
   >
     <template #prepend>
       <v-text-field
-        ref="textFieldRef"
         v-model="filterText"
         :label="t('platform.search-platform')"
         :tabindex="tabIndex"

frontend/src/components/common/Navigation/SettingsDrawer.vue

@@ -7,9 +7,10 @@ import storeAuth from "@/stores/auth";
 import storeNavigation from "@/stores/navigation";
 import type { Events } from "@/types/emitter";
 import { defaultAvatarPath, getRoleIcon } from "@/utils";
+import { useActiveElement } from "@vueuse/core";
 import type { Emitter } from "mitt";
-import { storeToRefs, getActivePinia, type StateTree } from "pinia";
-import { inject, ref, watch, computed } from "vue";
+import { getActivePinia, storeToRefs, type StateTree } from "pinia";
+import { computed, inject, ref, watch } from "vue";
 import { useI18n } from "vue-i18n";
 import { useRouter } from "vue-router";
 import { useDisplay } from "vuetify";
@@ -23,6 +24,7 @@ const emitter = inject<Emitter<Events>>("emitter");
 const { activeSettingsDrawer } = storeToRefs(navigationStore);
 const { smAndDown, mdAndUp } = useDisplay();
 const tabIndex = computed(() => (activeSettingsDrawer.value ? 0 : -1));
+const activeElement = useActiveElement();
 
 async function logout() {
   identityApi.logout().then(async () => {
@@ -46,19 +48,17 @@ async function logout() {
   });
 }
 
-// Ref to store the element that triggered the drawer
-const triggerElement = ref<HTMLElement | null>(null);
-// Watch for changes in the navigation drawer state
+const triggerElement = ref<HTMLElement | null | undefined>(undefined);
 watch(activeSettingsDrawer, (isOpen) => {
   if (isOpen) {
     // Store the currently focused element before opening the drawer
-    triggerElement.value = document.activeElement as HTMLElement;
+    triggerElement.value = activeElement.value;
   }
 });
 
 function onClose() {
   activeSettingsDrawer.value = false;
-  // Focus the element that triggered the drawer
+  // Refocus the trigger element for keyboard navigation
   triggerElement.value?.focus();
 }
 </script>

frontend/src/console/components/ScreenshotLightbox.vue

@@ -1,10 +1,13 @@
 <script setup lang="ts">
 import NavigationText from "./NavigationText.vue";
+import { useActiveElement } from "@vueuse/core";
 import { computed, onMounted } from "vue";
 
 const props = defineProps<{ urls: string[]; startIndex?: number }>();
 const emit = defineEmits(["update:modelValue", "close"]);
 
+const activeElement = useActiveElement();
+
 const isOpen = computed({
   get: () => true,
   set: () => close(),
@@ -24,7 +27,7 @@ function closeDialog() {
 }
 
 onMounted(() => {
-  (document.activeElement as HTMLElement)?.blur();
+  activeElement.value?.blur();
 });
 </script>