add focus trapp

Signed-off-by: Vanessa Pertsch <vanessa.pertsch@posteo.de>

src/components/EmojiPicker/EmojiPicker.vue

@@ -93,17 +93,13 @@
  popover-inner-class="popover-emoji-picker-inner"
  v-bind="$attrs"
  v-on="$listeners"
- @after-show="afterShow">
+ @after-show="afterShow"
+ @after-hide="afterHide">
  <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"
@@ -225,13 +221,44 @@ export default {
  }
  },
  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) {
+ window.console.log(event.key, 'eventkey')
+ 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()
+ }
  },
  },
 }
@@ -274,12 +301,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 +316,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 +333,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 +369,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%;
+ }
+ }
  }
 
 }