diff --git a/src/components/EmojiPicker/EmojiPicker.vue b/src/components/EmojiPicker/EmojiPicker.vue
index 55a0ecf97a..506211cccb 100644
--- a/src/components/EmojiPicker/EmojiPicker.vue
+++ b/src/components/EmojiPicker/EmojiPicker.vue
@@ -97,13 +97,8 @@
-<<<<<<< HEAD
- >>>>>> 4da67de7... make selectable by tab
color="var(--color-primary)"
:data="emojiIndex"
:emoji="previewFallbackEmoji"
@@ -227,11 +222,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()
+ }
+ },
},
}
@@ -273,12 +299,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,
@@ -294,6 +314,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;
@@ -306,6 +331,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);
+ }
}
}
@@ -338,6 +367,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%;
+ }
+ }
}
}