Upgraded dependencies, bumped to Node 24.

components/actors/tile.vue

@@ -1,3 +1,29 @@
+<script setup>
+import { inject, ref, useId } from 'vue';
+
+import Heart from '#/components/stashes/heart.vue';
+import getPath from '#/src/get-path.js';
+
+import { formatDate } from '#/utils/format.js';
+import Gender from './gender.vue';
+
+const props = defineProps({
+	actor: {
+		type: Object,
+		default: null,
+	},
+});
+
+const pageContext = inject('pageContext');
+const { user, restriction } = pageContext;
+const pageStash = pageContext.pageProps.stash;
+const currentStash = pageStash || pageContext.assets?.primaryStash;
+
+const favorited = ref(props.actor.stashes.some((actorStash) => actorStash.id === currentStash?.id));
+const entityTooltipId = useId();
+const aliasTooltipId = useId();
+</script>
+
 <template>
 	<div
 		class="tile"
@@ -81,14 +107,14 @@
 
 			<img
 				v-if="actor.entity"
-				v-tooltip="actor.entity.name"
+				v-tooltip="{ content: actor.entity.name, ariaId: entityTooltipId }"
 				:src="`/logos/${actor.entity.slug}/favicon_dark.png`"
 				class="favicon"
 			>
 
 			<Icon
 				v-if="actor.alias && actor.alias.name !== actor.name"
-				v-tooltip="`Credited as '${actor.alias.name}'`"
+				v-tooltip="{ content: `Credited as '${actor.alias.name}'`, ariaId: aliasTooltipId }"
 				icon="at-sign"
 				class="alias"
 			/>
@@ -96,30 +122,6 @@
 	</div>
 </template>
 
-<script setup>
-import { ref, inject } from 'vue';
-
-import getPath from '#/src/get-path.js';
-import { formatDate } from '#/utils/format.js';
-
-import Heart from '#/components/stashes/heart.vue';
-import Gender from './gender.vue';
-
-const props = defineProps({
-	actor: {
-		type: Object,
-		default: null,
-	},
-});
-
-const pageContext = inject('pageContext');
-const { user, restriction } = pageContext;
-const pageStash = pageContext.pageProps.stash;
-const currentStash = pageStash || pageContext.assets?.primaryStash;
-
-const favorited = ref(props.actor.stashes.some((actorStash) => actorStash.id === currentStash?.id));
-</script>
-
 <style scoped>
 .tile {
 	display: flex;