Merge pull request #2552 from nextcloud/a11y-emoji-picker

Make emojis selectable by tab

src/components/EmojiPicker/EmojiPicker.vue

@@ -92,11 +92,14 @@
 		popover-class="emoji-popover"
 		popover-inner-class="popover-emoji-picker-inner"
 		v-bind="$attrs"
-		v-on="$listeners">
+		v-on="$listeners"
+		@after-show="afterShow"
+		@after-hide="afterHide">
 		<template #trigger>
 			<slot />
 		</template>
-		<Picker :auto-focus="true"
+		<Picker ref="picker"
+			:auto-focus="true"
 			color="var(--color-primary)"
 			:data="emojiIndex"
 			:emoji="previewFallbackEmoji"
@@ -217,6 +220,45 @@ export default {
 				this.open = false
 			}
 		},
+		afterShow() {
+			// add focus trap in modal
+			const picker = this.$refs.picker
+			picker.$el.addEventListener('keydown', this.checkKeyEvent)
+			// set focus on input search field
+			const input = picker.$refs.search.$el.querySelector('input')
+			if (input) {
+				input.focus()
+			}
+		},
+		afterHide() {
+			// remove keydown listner if popover is hidden
+			const picker = this.$refs.picker
+			picker.$el.removeEventListener('keydown', this.checkKeyEvent)
+		},
+		checkKeyEvent(event) {
+			if (event.key !== 'Tab') {
+				return
+			}
+			const picker = this.$refs.picker
+			const focusableList = picker.$el.querySelectorAll(
+				'button, input'
+			)
+			const last = focusableList.length - 1
+			// escape early if only 1 or no elements to focus
+			if (focusableList.length <= 1) {
+				event.preventDefault()
+				return
+			}
+			if (event.shiftKey === false && event.target === focusableList[last]) {
+				// Jump to first item when pressing tab on the latest item
+				event.preventDefault()
+				focusableList[0].focus()
+			} else if (event.shiftKey === true && event.target === focusableList[0]) {
+				// Jump to the last item if pressing shift+tab on the first item
+				event.preventDefault()
+				focusableList[last].focus()
+			}
+		},
 	},
 }
 </script>
@@ -254,6 +296,7 @@ export default {
 		font-size: inherit;
 		height: 36px;
 		width: auto;
+
 		* {
 			cursor: pointer !important;
 		}
@@ -272,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;
@@ -284,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);
+			}
 		}
 	}
 
@@ -310,8 +362,18 @@ export default {
 			flex-basis: calc(100% / 8);
 			text-align: center;
 
-			&:hover::before {
+			&:hover::before,
+			&.emoji-mart-emoji-selected::before{
+				background-color: var(--color-background-hover) !important;
+				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%;
 			}
 		}
 	}