Close menu when focus leaves

Signed-off-by: Christopher Ng <chrng8@gmail.com>

Author: Pytal

src/Components/HeaderMenu.vue

@@ -37,7 +37,8 @@
 		<div v-show="opened"
 			:id="`header-menu-${id}`"
 			class="header-menu__wrapper"
-			role="menu">
+			role="menu"
+			@focusout="handleFocusOut">
 			<div class="header-menu__content">
 				<slot />
 			</div>
@@ -157,6 +158,12 @@ export default {
 				this.$emit('update:open', false)
 			}
 		},
+
+		handleFocusOut(event) {
+			if (!event.currentTarget.contains(event.relatedTarget)) {
+				this.closeMenu()
+			}
+		},
 	},
 }
 </script>

src/NotificationsApp.vue

@@ -248,8 +248,14 @@ export default {
 
 	methods: {
 		onOpen() {
+			this.focusFirstFocusable()
 			this.requestWebNotificationPermissions()
 		},
+
+		focusFirstFocusable() {
+			this.$el.querySelector('.button-vue').focus()
+		},
+
 		handleNetworkOffline() {
 			console.debug('Network is offline, slowing down pollingInterval to ' + this.pollIntervalBase * 10)
 			this._setPollingInterval(this.pollIntervalBase * 10)