From c94784c66637492965f1a7e2f0199b58778c338e Mon Sep 17 00:00:00 2001
From: Christopher Ng <chrng8@gmail.com>
Date: Wed, 24 Jan 2024 16:08:57 -0800
Subject: [PATCH 1/3] fix(NcAvatar): Remove span wrapper button semantics in
 favour of internal button components

Signed-off-by: Christopher Ng <chrng8@gmail.com>
---
 src/components/NcActions/NcActions.vue | 13 +++++++++++++
 src/components/NcAvatar/NcAvatar.vue   | 25 +++++++++++--------------
 2 files changed, 24 insertions(+), 14 deletions(-)

diff --git a/src/components/NcActions/NcActions.vue b/src/components/NcActions/NcActions.vue
index fe36aa8694..dc5d52cfa2 100644
--- a/src/components/NcActions/NcActions.vue
+++ b/src/components/NcActions/NcActions.vue
@@ -984,6 +984,7 @@ export default {
 		'close',
 		'focus',
 		'blur',
+		'click',
 	],
 
 	data() {
@@ -1222,6 +1223,17 @@ export default {
 		onBlur(event) {
 			this.$emit('blur', event)
 		},
+		onClick(event) {
+			/**
+			 * Event emitted when the menu toggle button is clicked.
+			 *
+			 * This is e.g. necessary for the NcAvatar component
+			 * which needs to fetch the menu items on click.
+			 *
+			 * @type {PointerEvent}
+			 */
+			this.$emit('click', event)
+		},
 	},
 
 	/**
@@ -1420,6 +1432,7 @@ export default {
 						on: {
 							focus: this.onFocus,
 							blur: this.onBlur,
+							click: this.onClick,
 						},
 					}, [
 						h('template', { slot: 'icon' }, [triggerIcon]),
diff --git a/src/components/NcAvatar/NcAvatar.vue b/src/components/NcAvatar/NcAvatar.vue
index f0b76c6a6e..9bdc7e3580 100644
--- a/src/components/NcAvatar/NcAvatar.vue
+++ b/src/components/NcAvatar/NcAvatar.vue
@@ -115,16 +115,8 @@ export default {
 			'avatardiv--with-menu': hasMenu,
 			'avatardiv--with-menu-loading': contactsMenuLoading
 		}"
-		:title="tooltip"
 		:style="avatarStyle"
-		class="avatardiv popovermenu-wrapper"
-		:tabindex="hasMenu ? '0' : undefined"
-		:aria-label="avatarAriaLabel"
-		:role="hasMenu ? 'button' : undefined"
-		v-on="hasMenu ? {
-			click: toggleMenu,
-			keydown: toggleMenu,
-		} : null">
+		class="avatardiv popovermenu-wrapper">
 		<!-- @slot Icon slot -->
 		<slot name="icon">
 			<!-- Avatar icon or image -->
@@ -137,10 +129,12 @@ export default {
 
 		<!-- Contact menu -->
 		<!-- We show a button if the menu is not loaded yet. -->
-		<NcButton v-if="hasMenu && !menu.length"
-			:aria-label="t('Open contact menu')"
+		<NcButton v-if="hasMenu && menu.length === 0"
 			type="tertiary-no-background"
-			class="action-item action-item__menutoggle">
+			class="action-item action-item__menutoggle"
+			:aria-label="avatarAriaLabel"
+			:title="tooltip"
+			@click="toggleMenu">
 			<template #icon>
 				<NcLoadingIcon v-if="contactsMenuLoading" />
 				<DotsHorizontal v-else :size="20" />
@@ -151,7 +145,10 @@ export default {
 			manual-open
 			type="tertiary-no-background"
 			:container="menuContainer"
-			:open="contactsMenuOpenState">
+			:open.sync="contactsMenuOpenState"
+			:aria-label="avatarAriaLabel"
+			:title="tooltip"
+			@click="toggleMenu">
 			<NcActionLink v-for="(item, key) in menu"
 				:key="key"
 				:href="item.href"
@@ -747,7 +744,7 @@ export default {
 			cursor: pointer;
 			opacity: 0;
 		}
-		&:focus,
+		&:focus-within,
 		&:hover,
 		&#{&}-loading {
 			:deep(.action-item__menutoggle) {

From 75ccec9452413b0b10ca77cc282efc30b05cf542 Mon Sep 17 00:00:00 2001
From: Christopher Ng <chrng8@gmail.com>
Date: Fri, 26 Jan 2024 14:09:18 -0800
Subject: [PATCH 2/3] chore(l10n): Update translations

Signed-off-by: Christopher Ng <chrng8@gmail.com>
---
 l10n/messages.pot | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/l10n/messages.pot b/l10n/messages.pot
index 086a595f71..d3aebbde51 100644
--- a/l10n/messages.pot
+++ b/l10n/messages.pot
@@ -226,9 +226,6 @@ msgstr ""
 msgid "online"
 msgstr ""
 
-msgid "Open contact menu"
-msgstr ""
-
 msgid "Open link to \"{resourceName}\""
 msgstr ""
 

From 16bff1103fbfd578440504654484df342a1be447 Mon Sep 17 00:00:00 2001
From: Christopher Ng <chrng8@gmail.com>
Date: Fri, 26 Jan 2024 14:18:27 -0800
Subject: [PATCH 3/3] test(NcAvatar): Test aria-label on menu toggle

Signed-off-by: Christopher Ng <chrng8@gmail.com>
---
 tests/unit/components/NcAvatar/NcAvatar.spec.ts | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/tests/unit/components/NcAvatar/NcAvatar.spec.ts b/tests/unit/components/NcAvatar/NcAvatar.spec.ts
index 08e0767696..d7ee81450a 100644
--- a/tests/unit/components/NcAvatar/NcAvatar.spec.ts
+++ b/tests/unit/components/NcAvatar/NcAvatar.spec.ts
@@ -42,7 +42,7 @@ describe('NcAvatar.vue', () => {
 		await nextTick()
 
 		expect(wrapper.find('.avatardiv__user-status').exists()).toBe(true)
-		expect(wrapper.attributes('aria-label')).toBe('Avatar of J. Doe, online')
+		expect(wrapper.find('.action-item__menutoggle').attributes('aria-label')).toBe('Avatar of J. Doe, online')
 	})
 
 	it('aria label is set to include status even if status is do-not-disturb', async () => {
@@ -63,7 +63,7 @@ describe('NcAvatar.vue', () => {
 		await nextTick()
 
 		expect(wrapper.find('.avatardiv__user-status').exists()).toBe(true)
-		expect(wrapper.attributes('aria-label')).toBe('Avatar of J. Doe, do not disturb')
+		expect(wrapper.find('.action-item__menutoggle').attributes('aria-label')).toBe('Avatar of J. Doe, do not disturb')
 	})
 
 	it('aria label is does not include status if status not shown', async () => {
@@ -85,7 +85,7 @@ describe('NcAvatar.vue', () => {
 		await nextTick()
 
 		expect(wrapper.find('.avatardiv__user-status').exists()).toBe(false)
-		expect(wrapper.attributes('aria-label')).toBe('Avatar of J. Doe')
+		expect(wrapper.find('.action-item__menutoggle').attributes('aria-label')).toBe('Avatar of J. Doe')
 	})
 
 	it('should display initials for user id', async () => {