fix(NcAvatar): Fix invalid interactive content in avatar

Signed-off-by: Christopher Ng <chrng8@gmail.com>
nextcloud-libraries · Jan 25, 2024 · 1ee2040 · 1ee2040
1 parent cfbb197
commit 1ee2040
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 4 deletions.
diff --git a/src/components/NcActions/NcActions.vue b/src/components/NcActions/NcActions.vue
@@ -976,6 +976,14 @@ export default {
 			type: Number,
 			default: 0,
 		},
+
+		/**
+		 * The `inert` attribute for the menu toggle button
+		 */
+		inert: {
+			type: Boolean,
+			default: false,
+		},
 	},
 
 	emits: [
@@ -1416,6 +1424,7 @@ export default {
 						attrs: {
 							'aria-label': this.menuName ? null : this.ariaLabel,
 							'aria-controls': this.opened ? this.randomId : null,
+							inert: this.inert,
 						},
 						on: {
 							focus: this.onFocus,

diff --git a/src/components/NcAvatar/NcAvatar.vue b/src/components/NcAvatar/NcAvatar.vue
@@ -137,10 +137,10 @@ 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"
+			inert>
 			<template #icon>
 				<NcLoadingIcon v-if="contactsMenuLoading" />
 				<DotsHorizontal v-else :size="20" />
@@ -151,7 +151,8 @@ export default {
 			manual-open
 			type="tertiary-no-background"
 			:container="menuContainer"
-			:open="contactsMenuOpenState">
+			:open="contactsMenuOpenState"
+			inert>
 			<NcActionLink v-for="(item, key) in menu"
 				:key="key"
 				:href="item.href"
@@ -738,6 +739,9 @@ export default {
 
 	&--with-menu {
 		cursor: pointer;
+		&:deep * {
+			cursor: inherit;
+		}
 		.action-item {
 			position: absolute;
 			top: 0;