Close menu when focus leaves

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

Author: Pytal

js/notifications-main.js

@@ -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>

js/notifications-main.js.map

@@ -248,8 +248,16 @@ export default {
 
 	methods: {
 		onOpen() {
+			this.focusFirstFocusable()
 			this.requestWebNotificationPermissions()
 		},
+
+		focusFirstFocusable() {
+			this.$nextTick(() => {
+				this.$el.querySelector('.button-vue').focus()
+			})
+		},
+
 		handleNetworkOffline() {
 			console.debug('Network is offline, slowing down pollingInterval to ' + this.pollIntervalBase * 10)
 			this._setPollingInterval(this.pollIntervalBase * 10)
@@ -481,6 +489,12 @@ export default {
 </script>
 
 <style scoped lang="scss">
+:deep(.button-vue) {
+	&:focus {
+		outline: 2px solid var(--color-main-text) !important;
+	}
+}
+
 .notifications-button__icon {
 	filter: var(--background-image-invert-if-bright);
 }