Merge pull request #36232 from nextcloud/enh/a11y-user-menu

Port user menu to Vue

apps/user_status/appinfo/info.xml

@@ -13,7 +13,7 @@
 	<bugs>https://github.com/nextcloud/server</bugs>
 	<navigations>
 		<navigation>
-			<id>user_status-menuitem</id>
+			<id>user_status-menu-entry</id>
 			<name>User status</name>
 			<order>1</order>
 			<type>settings</type>

apps/user_status/src/UserStatus.vue

@@ -26,7 +26,7 @@
 			<a v-if="!inline"
 				class="user-status-menu-item__header"
 				:href="profilePageLink"
-				@click="loadProfilePage">
+				@click.exact="loadProfilePage">
 				<div class="user-status-menu-item__header-content">
 					<div class="user-status-menu-item__header-content-displayname">{{ displayName }}</div>
 					<div v-if="!loadingProfilePage" class="user-status-menu-item__header-content-placeholder" />
@@ -234,11 +234,6 @@ export default {
 		align-items: flex-start !important;
 		color: var(--color-main-text) !important;
 
-		&:focus-visible {
-			padding: 6px 8px 1px 8px !important;
-			margin: 2px !important;
-		}
-
 		&:not([href]) {
 			height: var(--header-menu-item-height) !important;
 			color: var(--color-text-maxcontrast) !important;

apps/user_status/src/menu.js

@@ -24,42 +24,35 @@
 
 import Vue from 'vue'
 import { getRequestToken } from '@nextcloud/auth'
-import UserStatus from './UserStatus'
-import store from './store'
-import NcAvatar from '@nextcloud/vue/dist/Components/NcAvatar'
-import { loadState } from '@nextcloud/initial-state'
+import { subscribe } from '@nextcloud/event-bus'
+
+import UserStatus from './UserStatus.vue'
+
+import store from './store/index.js'
 
 // eslint-disable-next-line camelcase
 __webpack_nonce__ = btoa(getRequestToken())
 
 Vue.prototype.t = t
 Vue.prototype.$t = t
 
-const avatarDiv = document.getElementById('avatardiv-menu')
-const userStatusData = loadState('user_status', 'status')
-const propsData = {
-	preloadedUserStatus: {
-		message: userStatusData.message,
-		icon: userStatusData.icon,
-		status: userStatusData.status,
-	},
-	user: avatarDiv.dataset.user,
-	displayName: avatarDiv.dataset.displayname,
-	disableMenu: true,
-	disableTooltip: true,
-}
+const mountPoint = document.getElementById('user_status-menu-entry')
 
-const NcAvatarInMenu = Vue.extend(NcAvatar)
-new NcAvatarInMenu({ propsData }).$mount('#avatardiv-menu')
+const mountMenuEntry = () => {
+	const mountPoint = document.getElementById('user_status-menu-entry')
+	// eslint-disable-next-line no-new
+	new Vue({
+		el: mountPoint,
+		render: h => h(UserStatus),
+		store,
+	})
+}
 
-// Register settings menu entry
-export default new Vue({
-	el: 'li[data-id="user_status-menuitem"]',
-	// eslint-disable-next-line vue/match-component-file-name
-	name: 'UserStatusRoot',
-	render: h => h(UserStatus),
-	store,
-})
+if (mountPoint) {
+	mountMenuEntry()
+} else {
+	subscribe('core:user-menu:mounted', mountMenuEntry)
+}
 
 // Register dashboard status
 document.addEventListener('DOMContentLoaded', function() {