From 5391d2078df33979d38e4826e7160110c7f48a1f Mon Sep 17 00:00:00 2001
From: "Grigorii K. Shartsev" <me@shgk.me>
Date: Mon, 22 Jan 2024 12:15:56 +0100
Subject: [PATCH] fix(NcPopover): check trigger a11y compatible with Vue 3

Signed-off-by: Grigorii K. Shartsev <me@shgk.me>
---
 src/components/NcPopover/NcPopover.vue        | 21 +++++++++++++++++++
 .../NcPopover/NcPopoverTriggerProvider.vue    | 12 +----------
 2 files changed, 22 insertions(+), 11 deletions(-)

diff --git a/src/components/NcPopover/NcPopover.vue b/src/components/NcPopover/NcPopover.vue
index 5ca988ed75..0ffca23cde 100644
--- a/src/components/NcPopover/NcPopover.vue
+++ b/src/components/NcPopover/NcPopover.vue
@@ -178,6 +178,7 @@ See: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/
 </template>
 
 <script>
+import Vue from 'vue'
 import { Dropdown } from 'floating-vue'
 import { createFocusTrap } from 'focus-trap'
 import { getTrapStack } from '../../utils/focusTrap.js'
@@ -268,12 +269,32 @@ export default {
 		},
 	},
 
+	mounted() {
+		this.checkTriggerA11y()
+	},
+
 	beforeDestroy() {
 		this.clearFocusTrap()
 		this.clearEscapeStopPropagation()
 	},
 
 	methods: {
+		/**
+		 * Check if the trigger has all required a11y attributes.
+		 * Important to check custom trigger button.
+		 */
+		checkTriggerA11y() {
+			if (window.OC?.debug) {
+				// TODO: Vue 3: should be
+				// this.$refs.popover.$refs.popper.$refs.reference
+				const triggerContainer = this.$refs.popover.$refs.reference
+				const requiredTriggerButton = triggerContainer.querySelector('[aria-expanded][aria-haspopup]')
+				if (!requiredTriggerButton) {
+					Vue.util.warn('It looks like you are using a custom button as a <NcPopover> or other popover #trigger. If you are not using <NcButton> as a trigger, you need to bind attrs from the #trigger slot props to your custom button. See <NcPopover> docs for an example.')
+				}
+			}
+		},
+
 		/**
 		 * @return {HTMLElement|undefined}
 		 */
diff --git a/src/components/NcPopover/NcPopoverTriggerProvider.vue b/src/components/NcPopover/NcPopoverTriggerProvider.vue
index cec05ab322..fa2682ddcf 100644
--- a/src/components/NcPopover/NcPopoverTriggerProvider.vue
+++ b/src/components/NcPopover/NcPopoverTriggerProvider.vue
@@ -1,5 +1,5 @@
 <script>
-import Vue, { computed, defineComponent } from 'vue'
+import { computed, defineComponent } from 'vue'
 
 export default defineComponent({
 	name: 'NcPopoverTriggerProvider',
@@ -31,16 +31,6 @@ export default defineComponent({
 		},
 	},
 
-	mounted() {
-		if (window.OC?.debug) {
-			const rootElement = this.$el
-			const innerElement = this.$el.querySelector('[aria-expanded][aria-haspopup]')
-			if (!rootElement.getAttribute('aria-expanded') && !innerElement) {
-				Vue.util.warn('It looks like you are using a custom button as a <NcPopover> or other popover #trigger. If you are not using <NcButton> as a trigger, you need to bind attrs from the #trigger slot props to your custom button. See <NcPopover> docs for an example.')
-			}
-		}
-	},
-
 	render() {
 		// TODO: Vue 3 - replace with $slots
 		return this.$scopedSlots.default?.({