Merge remote-tracking branch 'origin' into chore/noid/merge-master-next

CHANGELOG.md

@@ -101,6 +101,7 @@ All notable changes to this project will be documented in this file.
 * fix(header): width regression fixed [\#5129](https://github.com/nextcloud-libraries/nextcloud-vue/pull/5129) \([emoral435](https://github.com/emoral435)\)
 * fix(NcCheckboxRadioSwitch): Make sure to include current value in checked array [\#5150](https://github.com/nextcloud-libraries/nextcloud-vue/pull/5150) \([susnux](https://github.com/susnux)\)
 * fix: Ensure no double scrollbars for NcDialog and NcAppNavigationSettings [\#5139](https://github.com/nextcloud-libraries/nextcloud-vue/pull/5139) \([susnux](https://github.com/susnux)\)
+* fix(NcAvatar): Remove span wrapper button semantics in favour of internal button components [\#5131](https://github.com/nextcloud-libraries/nextcloud-vue/pull/5131) \([Pytal](https://github.com/Pytal)\)
 
 ### Other Changes
 * Updated translation

src/components/NcActions/NcActions.vue

@@ -814,6 +814,7 @@ import NcButton from '../NcButton/index.ts'
 import NcPopover from '../NcPopover/index.js'
 import GenRandomId from '../../utils/GenRandomId.js'
 import isSlotPopulated from '../../utils/isSlotPopulated.ts'
+import { getTrapStack } from '../../utils/focusTrap.js'
 import { t } from '../../l10n.js'
 
 import DotsHorizontal from 'vue-material-design-icons/DotsHorizontal.vue'
@@ -1011,6 +1012,7 @@ export default {
 			 * @type {'menu'|'navigation'|'dialog'|'tooltip'|''}
 			 */
 			actionsMenuSemanticType: '',
+			externalFocusTrapStack: [],
 		}
 	},
 
@@ -1037,6 +1039,10 @@ export default {
 
 			this.opened = state
 		},
+
+		opened() {
+			this.intersectIntoCurrentFocusTrapStack()
+		},
 	},
 
 	methods: {
@@ -1050,6 +1056,33 @@ export default {
 			return action?.type?.name
 		},
 
+		/**
+		 * When the component has its own focus trap, then it is managed by global trap stack by focus-trap.
+		 *
+		 * However if the component has no focus trap and is used inside another focus trap - there is an issue.
+		 * By default popover content is rendered in body or other container, which is likely outside the current focus trap containers.
+		 * It results in broken behavior from focus-trap.
+		 *
+		 * We need to pause all the focus traps for opening popover and then unpause them back after closing.
+		 */
+		 intersectIntoCurrentFocusTrapStack() {
+			if (this.withFocusTrap) {
+				return
+			}
+
+			if (this.opened) {
+				this.externalFocusTrapStack = [...getTrapStack()]
+				for (const trap of this.externalFocusTrapStack) {
+					trap.pause()
+				}
+			} else {
+				for (const trap of this.externalFocusTrapStack) {
+					trap.unpause()
+				}
+				this.externalFocusTrapStack = []
+			}
+		},
+
 		/**
 		 * Do we have exactly one Action and
 		 * is it allowed as a standalone element?

src/components/NcAppNavigationToggle/NcAppNavigationToggle.vue

@@ -55,6 +55,11 @@ export default {
 	},
 
 	props: {
+		/**
+		 * Tracks whether the toggle has been clicked or not.
+		 * If it has been clicked, switches between the different MenuIcons
+		 * and emits a boolean indicating its opened status
+		 */
 		open: {
 			type: Boolean,
 			required: true,
@@ -69,6 +74,10 @@ export default {
 		},
 	},
 	methods: {
+		/**
+		 * Once the toggle has been clicked, emits the toggle status
+		 * so parent components can gauge the status of the navigation button
+		 */
 		toggleNavigation() {
 			this.$emit('update:open', !this.open)
 		},

src/components/NcSelect/NcSelect.vue

@@ -971,6 +971,7 @@ export default {
 						Object.assign(dropdownMenu.style, {
 							left: `${x}px`,
 							top: `${y}px`,
+							width: `${component.$refs.toggle.getBoundingClientRect().width}px`,
 						})
 					})
 				}