Merge pull request #5110 from nextcloud-libraries/fix/nc-popover-a11y…

…-check

fix(NcPopover): check trigger a11y compatible with Vue 3

src/components/NcPopover/NcPopover.vue

@@ -179,6 +179,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'
@@ -269,12 +270,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}
 		 */

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?.({