Upgraded dependencies, bumped to Node 24.

components/actors/merge.vue

@@ -1,3 +1,81 @@
+<script setup>
+import { computed, onMounted, ref, useId } from 'vue';
+
+import Dialog from '#/components/dialog/dialog.vue';
+import Ellipsis from '#/components/loading/ellipsis.vue';
+
+import { get, post } from '#/src/api.js';
+
+const props = defineProps({
+	actors: {
+		type: Array,
+		default: () => [],
+	},
+});
+
+const emit = defineEmits(['close', 'merged']);
+
+const targetActor = ref(null);
+const actorInput = ref(null);
+const actorQuery = ref('');
+const actorResults = ref([]);
+const submitted = ref(false);
+const merged = ref(false);
+const searchDropdownId = useId();
+const conflictTooltipId = useId();
+
+const sourceTargetConflict = computed(() => props.actors.some((actor) => actor.id === targetActor.value?.id));
+
+async function searchActors() {
+	const res = await get('/actors', {
+		q: actorQuery.value, // return partial matches
+		limit: 10,
+		global: true,
+	});
+
+	actorResults.value = res.actors;
+}
+
+function getActorNames() {
+	if (props.actors.length > 1) {
+		return `${props.actors.length} actors`;
+	}
+
+	if (props.actors[0].entity) {
+		return `${props.actors[0].name} (${props.actors[0].entity.name})`;
+	}
+
+	return props.actors[0].name;
+}
+
+async function merge() {
+	submitted.value = true;
+
+	await post(`/actors/${targetActor.value.id}/merge/${props.actors.map((actor) => actor.id).join(',')}`, null, {
+		successFeedback: `Merged ${getActorNames()} into ${targetActor.value.name}`,
+		errorFeedback: `Failed to merge ${getActorNames()} into ${targetActor.value.name}`,
+		appendErrorMessage: true,
+	});
+
+	submitted.value = false;
+	merged.value = true;
+
+	emit('merged');
+
+	// emit('close');
+}
+
+function selectActor(actor) {
+	targetActor.value = actor;
+	actorQuery.value = '';
+	actorResults.value = [];
+}
+
+onMounted(() => {
+	actorInput.value.focus();
+});
+</script>
+
 <template>
 	<Dialog
 		:title="`Merge ${actors.length === 1 ? `'${actors[0].name}'` : `${actors.length} actors`}`"
@@ -62,6 +140,7 @@
 
 			<template v-else>
 				<VDropdown
+					:aria-id="searchDropdownId"
 					:triggers="[]"
 					:shown="actorResults.length > 0"
 					:auto-hide="false"
@@ -99,7 +178,7 @@
 
 				<button
 					v-else
-					v-tooltip="sourceTargetConflict && 'Cannot merge actor profile into itself'"
+					v-tooltip="sourceTargetConflict && { content: 'Cannot merge actor profile into itself', ariaId: conflictTooltipId }"
 					type="submit"
 					class="button button-primary"
 					:disabled="!targetActor || sourceTargetConflict"
@@ -110,82 +189,6 @@
 	</Dialog>
 </template>
 
-<script setup>
-import { ref, computed, onMounted } from 'vue';
-
-import Dialog from '#/components/dialog/dialog.vue';
-import Ellipsis from '#/components/loading/ellipsis.vue';
-
-import { get, post } from '#/src/api.js';
-
-const props = defineProps({
-	actors: {
-		type: Array,
-		default: () => [],
-	},
-});
-
-const emit = defineEmits(['close', 'merged']);
-
-const targetActor = ref(null);
-const actorInput = ref(null);
-const actorQuery = ref('');
-const actorResults = ref([]);
-const submitted = ref(false);
-const merged = ref(false);
-
-const sourceTargetConflict = computed(() => props.actors.some((actor) => actor.id === targetActor.value?.id));
-
-async function searchActors() {
-	const res = await get('/actors', {
-		q: actorQuery.value, // return partial matches
-		limit: 10,
-		global: true,
-	});
-
-	actorResults.value = res.actors;
-}
-
-function getActorNames() {
-	if (props.actors.length > 1) {
-		return `${props.actors.length} actors`;
-	}
-
-	if (props.actors[0].entity) {
-		return `${props.actors[0].name} (${props.actors[0].entity.name})`;
-	}
-
-	return props.actors[0].name;
-}
-
-async function merge() {
-	submitted.value = true;
-
-	await post(`/actors/${targetActor.value.id}/merge/${props.actors.map((actor) => actor.id).join(',')}`, null, {
-		successFeedback: `Merged ${getActorNames()} into ${targetActor.value.name}`,
-		errorFeedback: `Failed to merge ${getActorNames()} into ${targetActor.value.name}`,
-		appendErrorMessage: true,
-	});
-
-	submitted.value = false;
-	merged.value = true;
-
-	emit('merged');
-
-	// emit('close');
-}
-
-function selectActor(actor) {
-	targetActor.value = actor;
-	actorQuery.value = '';
-	actorResults.value = [];
-}
-
-onMounted(() => {
-	actorInput.value.focus();
-});
-</script>
-
 <style scoped>
 .dialog-body {
 	width: 20rem;