make selectable by tab

Signed-off-by: Vanessa Pertsch <vanessa.pertsch@nextcloud.com>

src/components/EmojiPicker/EmojiPicker.vue

@@ -91,11 +91,13 @@
 		:open.sync="open"
 		:container="container"
 		popover-class="emoji-popover"
-		popover-inner-class="popover-emoji-picker-inner">
+		popover-inner-class="popover-emoji-picker-inner"
+		@after-show="afterShow">
 		<template #trigger>
 			<slot />
 		</template>
 		<Picker
+			ref="picker"
 			:auto-focus="true"
 			color="var(--color-primary)"
 			:data="emojiIndex"
@@ -214,6 +216,15 @@ export default {
 				this.open = false
 			}
 		},
+		afterShow() {
+			const picker = this.$refs.picker
+			const input = picker.$refs.search.$el.querySelector('input')
+
+			if (input) {
+				input.focus()
+			}
+
+		},
 	},
 }
 </script>
@@ -251,9 +262,14 @@ export default {
 		font-size: inherit;
 		height: 36px;
 		width: auto;
+
 		* {
 			cursor: pointer !important;
 		}
+
+		&:focus {
+			outline: 1px solid var(--color-primary) !important;
+		}
 	}
 
 	.emoji-mart-bar,
@@ -307,8 +323,9 @@ export default {
 			flex-basis: calc(100% / 8);
 			text-align: center;
 
-			&:hover::before {
-				background-color: var(--color-background-hover);
+			&:hover,
+			&.emoji-mart-emoji-selected{
+				border: 1px solid var(--color-primary);
 			}
 		}
 	}