diff --git a/src/components/EmojiPicker/EmojiPicker.vue b/src/components/EmojiPicker/EmojiPicker.vue
index 4fd7322c01..9145f565fc 100644
--- a/src/components/EmojiPicker/EmojiPicker.vue
+++ b/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">
-
@@ -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%;
}
}
}