refac: hardening pass with multiple overhauls

web/src/components/UserMenu.vue

@@ -10,16 +10,18 @@ const props = defineProps<{
 	displayName?: string
 	email?: string
 	collapsed: boolean
+	sheetOpen?: boolean
 }>()
 
 const emit = defineEmits<{
 	logout: []
-	'open-sheet': []
+	'open-sheet': [chip: HTMLElement | undefined]
 }>()
 
 const { colorMode, name, initials, onProfile, goToProfile } = useAccountMenu(() => props)
 const isDesktop = useMediaQuery(DESKTOP_QUERY)
 const open = ref(false)
+const chip = ref<{ $el: HTMLElement } | null>(null)
 
 const chipActive = computed(() => open.value || onProfile.value)
 
@@ -41,10 +43,12 @@ function onUpdateOpen(value: boolean) {
 		return
 	}
 	if (value) {
-		emit('open-sheet')
+		emit('open-sheet', chip.value?.$el)
 	}
 }
 
+const chipExpanded = computed(() => (isDesktop.value ? open.value : props.sheetOpen === true))
+
 const items = computed(() => [
 	[
 		{
@@ -89,10 +93,12 @@ const items = computed(() => [
 		@update:open="onUpdateOpen"
 	>
 		<UButton
+			ref="chip"
 			color="neutral"
 			variant="ghost"
 			block
 			title="Account"
+			:aria-expanded="chipExpanded"
 			:class="chipClass"
 			:trailing-icon="collapsed ? undefined : 'i-lucide-chevrons-up-down'"
 			:ui="{ trailingIcon: 'ms-auto size-3.5 text-current' }"