From f4f3f2a4d926fc795e172b7282e0ab46e99d0788 Mon Sep 17 00:00:00 2001 From: Vanessa Pertsch Date: Mon, 14 Mar 2022 17:07:23 +0100 Subject: [PATCH 1/2] make selectable by tab Signed-off-by: Vanessa Pertsch Signed-off-by: Vanessa Pertsch --- src/components/EmojiPicker/EmojiPicker.vue | 31 +++++++++++++++++++--- 1 file changed, 28 insertions(+), 3 deletions(-) diff --git a/src/components/EmojiPicker/EmojiPicker.vue b/src/components/EmojiPicker/EmojiPicker.vue index 4fd7322c01..52c9c7889e 100644 --- a/src/components/EmojiPicker/EmojiPicker.vue +++ b/src/components/EmojiPicker/EmojiPicker.vue @@ -92,11 +92,18 @@ popover-class="emoji-popover" popover-inner-class="popover-emoji-picker-inner" v-bind="$attrs" - v-on="$listeners"> + v-on="$listeners" + @after-show="afterShow"> +<<<<<<< HEAD >>>>>> 4da67de7... make selectable by tab color="var(--color-primary)" :data="emojiIndex" :emoji="previewFallbackEmoji" @@ -217,6 +224,15 @@ export default { this.open = false } }, + afterShow() { + const picker = this.$refs.picker + const input = picker.$refs.search.$el.querySelector('input') + + if (input) { + input.focus() + } + + }, }, } @@ -254,9 +270,16 @@ export default { font-size: inherit; height: 36px; width: auto; + * { 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, @@ -310,8 +333,10 @@ export default { flex-basis: calc(100% / 8); text-align: center; - &:hover::before { - background-color: var(--color-background-hover); + &:hover::before, + &.emoji-mart-emoji-selected::before{ + background-color: var(--color-background-hover) !important; + outline: 2px solid var(--color-primary-element); } } } From 7e949a02d7e826f2dfe0dad7e8f322afc3ea788a Mon Sep 17 00:00:00 2001 From: Vanessa Pertsch Date: Thu, 24 Mar 2022 16:29:58 +0100 Subject: [PATCH 2/2] add focus trapp Signed-off-by: Vanessa Pertsch --- src/components/EmojiPicker/EmojiPicker.vue | 67 +++++++++++++++++----- 1 file changed, 52 insertions(+), 15 deletions(-) diff --git a/src/components/EmojiPicker/EmojiPicker.vue b/src/components/EmojiPicker/EmojiPicker.vue index 52c9c7889e..9145f565fc 100644 --- a/src/components/EmojiPicker/EmojiPicker.vue +++ b/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"> -<<<<<<< HEAD - >>>>>> 4da67de7... make selectable by tab color="var(--color-primary)" :data="emojiIndex" :emoji="previewFallbackEmoji" @@ -225,13 +221,43 @@ 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) { + 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 +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%; + } + } } }