From 6069b970520dfcba34bebc61966af9274db044bf Mon Sep 17 00:00:00 2001
From: Vanessa Pertsch <vanessa.pertsch@nextcloud.com>
Date: Thu, 24 Mar 2022 16:29:58 +0100
Subject: [PATCH] add focus trapp

Signed-off-by: Vanessa Pertsch <vanessa.pertsch@posteo.de>
---
 src/components/EmojiPicker/EmojiPicker.vue | 61 +++++++++++++++++-----
 1 file changed, 49 insertions(+), 12 deletions(-)

diff --git a/src/components/EmojiPicker/EmojiPicker.vue b/src/components/EmojiPicker/EmojiPicker.vue
index 52c9c7889e..1339bd76ea 100644
--- a/src/components/EmojiPicker/EmojiPicker.vue
+++ b/src/components/EmojiPicker/EmojiPicker.vue
@@ -97,13 +97,8 @@
 		<template #trigger>
 			<slot />
 		</template>
-<<<<<<< HEAD
-		<Picker :auto-focus="true"
-=======
-		<Picker
-			ref="picker"
+		<Picker ref="picker"
 			:auto-focus="true"
->>>>>>> 4da67de7... make selectable by tab
 			color="var(--color-primary)"
 			:data="emojiIndex"
 			:emoji="previewFallbackEmoji"
@@ -228,11 +223,42 @@ export default {
 			const picker = this.$refs.picker
 			const input = picker.$refs.search.$el.querySelector('input')
 
+			// add focus trap in modal
+			picker.$el.addEventListener('keydown', this.checkKeyEvent)
+
 			if (input) {
 				input.focus()
 			}
 
 		},
+		checkKeyEvent(event) {
+			const picker = this.$refs.picker
+
+			const focusableList = picker.$el.querySelectorAll(
+				'button, input'
+			)
+			// escape early if only 1 or no elements to focus
+			if (focusableList.length < 2 && event.key === 'Tab') {
+				event.preventDefault()
+				return
+			}
+			const last = focusableList.length - 1
+			if (
+				event.key === 'Tab'
+				&& event.shiftKey === false
+				&& event.target === focusableList[last]
+			) {
+				event.preventDefault()
+				focusableList[0].focus()
+			} else if (
+				event.key === 'Tab'
+				&& event.shiftKey === true
+				&& event.target === focusableList[0]
+			) {
+				event.preventDefault()
+				focusableList[last].focus()
+			}
+		},
 	},
 }
 </script>
@@ -274,12 +300,6 @@ export default {
 		* {
 			cursor: pointer !important;
 		}
-
-		&:focus-visible {
-			background-color: var(--color-background-hover);
-			border: 2px solid var(--color-primary-element) !important;
-			border-radius: 50%;
-		}
 	}
 
 	.emoji-mart-bar,
@@ -295,6 +315,11 @@ export default {
 		color: inherit !important;
 	}
 
+	.emoji-mart-search input:focus-visible {
+		box-shadow: inset 0 0 0 2px var(--color-primary);
+		outline: none;
+	}
+
 	.emoji-mart-bar {
 		&:first-child {
 			border-top-left-radius: var(--border-radius) !important;
@@ -307,6 +332,10 @@ export default {
 			border-radius: 0;
 			padding: 12px 4px;
 			height: auto;
+			&:focus-visible {
+				/* box-shadow: inset 0 0 0 2px var(--color-primary); */
+				outline: 2px solid var(--color-primary-element);
+			}
 		}
 	}
 
@@ -339,6 +368,14 @@ export default {
 				outline: 2px solid var(--color-primary-element);
 			}
 		}
+		button {
+
+			&:focus-visible {
+				background-color: var(--color-background-hover);
+				border: 2px solid var(--color-primary-element) !important;
+				border-radius: 50%;
+			}
+		}
 	}
 
 }