fix(NcAppSidebar): focus on open and return focus on close

Signed-off-by: Grigorii K. Shartsev <me@shgk.me>

src/components/NcAppSidebar/NcAppSidebar.vue

@@ -405,11 +405,12 @@ export default {
 								<!-- main name -->
 								<h2 v-show="!nameEditable"
 									:id="`app-sidebar-vue-${uid}__header`"
+									ref="header"
 									v-linkify="{text: name, linkify: linkifyName}"
 									:aria-label="title"
 									:title="title"
 									class="app-sidebar-header__mainname"
-									:tabindex="nameEditable ? 0 : undefined"
+									:tabindex="nameEditable ? 0 : -1"
 									@click.self="editName">
 									{{ name }}
 								</h2>
@@ -665,6 +666,7 @@ export default {
 			favoriteTranslated: t('Favorite'),
 			isStarred: this.starred,
 			focusTrap: null,
+			elementToReturnFocus: null,
 		}
 	},
 
@@ -690,7 +692,16 @@ export default {
 		},
 	},
 
+	created() {
+		this.preserveElementToReturnFocus()
+	},
+
 	mounted() {
+		// Focus sidebar on open only if it was opened by a user interaction
+		if (this.elementToReturnFocus) {
+			this.focus()
+		}
+
 		this.toggleFocusTrap()
 	},
 
@@ -701,6 +712,23 @@ export default {
 	},
 
 	methods: {
+		preserveElementToReturnFocus() {
+			// Save the element that had focus before the sidebar was opened to return back on close
+			if (document.activeElement && document.activeElement !== document.body) {
+				this.elementToReturnFocus = document.activeElement
+
+				// Special case for menus (NcActions)
+				// If a sidebar was opened from a menu item, we want to return focus to the menu trigger instead of the item
+				if (this.elementToReturnFocus.getAttribute('role') === 'menuitem') {
+					const menu = this.elementToReturnFocus.closest('[role="menu"]')
+					if (menu) {
+						const menuTrigger = document.querySelector(`[aria-controls="${menu.id}"]`)
+						this.elementToReturnFocus = menuTrigger
+					}
+				}
+			}
+		},
+
 		initFocusTrap() {
 			if (this.focusTrap) {
 				return
@@ -725,7 +753,7 @@ export default {
 		/**
 		 * Activate focus trap if it is currently needed, otherwise deactivate
 		 */
-		 toggleFocusTrap() {
+		toggleFocusTrap() {
 			if (this.isMobile) {
 				this.initFocusTrap()
 				this.focusTrap.activate()
@@ -765,6 +793,10 @@ export default {
 			 * @type {HTMLElement}
 			 */
 			this.$emit('closed', element)
+
+			// Return focus to the element that had focus before the sidebar was opened
+			this.elementToReturnFocus?.focus({ focusVisible: true })
+			this.elementToReturnFocus = null
 		},
 
 		/**
@@ -824,6 +856,14 @@ export default {
 			}
 		},
 
+		/**
+		 * Focus the sidebar
+		 * @public
+		 */
+		focus() {
+			this.$refs.header.focus()
+		},
+
 		/**
 		 * Emit name change event to parent component
 		 *