3 files changed, 35 insertions, 3 deletions
diff --git a/src/components/emoji_picker/emoji_picker.js b/src/components/emoji_picker/emoji_picker.js
index 349b043d..eb665c40 100644
--- a/src/components/emoji_picker/emoji_picker.js
+++ b/src/components/emoji_picker/emoji_picker.js
@@ -105,6 +105,7 @@ const EmojiPicker = {
       default: false
     }
   },
+  inject: ['popoversZLayer'],
   data () {
     return {
       keyword: '',
@@ -113,6 +114,7 @@ const EmojiPicker = {
       groupsScrolledClass: 'scrolled-top',
       keepOpen: false,
       customEmojiTimeout: null,
+      hideCustomEmojiInPicker: false,
       // Lazy-load only after the first time `showing` becomes true.
       contentLoaded: false,
       groupRefs: {},
@@ -285,7 +287,7 @@ const EmojiPicker = {
       return 0
     },
     allCustomGroups () {
-      if (this.hideCustomEmoji) {
+      if (this.hideCustomEmoji || this.hideCustomEmojiInPicker) {
         return {}
       }
       const emojis = this.$store.getters.groupedCustomEmojis
@@ -350,6 +352,9 @@ const EmojiPicker = {
 
         return emoji.displayText
       }
+    },
+    isInModal () {
+      return this.popoversZLayer === 'modals'
     }
   }
 }
diff --git a/src/components/emoji_picker/emoji_picker.scss b/src/components/emoji_picker/emoji_picker.scss
index 5bcff33b..aab9251d 100644
--- a/src/components/emoji_picker/emoji_picker.scss
+++ b/src/components/emoji_picker/emoji_picker.scss
@@ -39,11 +39,16 @@ $emoji-picker-emoji-size: 32px;
   }
 
   .keep-open,
-  .too-many-emoji {
+  .too-many-emoji,
+  .hide-custom-emoji {
     padding: 7px;
     line-height: normal;
   }
 
+  .hide-custom-emoji {
+    padding-top: 0;
+  }
+
   .too-many-emoji {
     display: flex;
     flex-direction: column;
diff --git a/src/components/emoji_picker/emoji_picker.vue b/src/components/emoji_picker/emoji_picker.vue
index 6972164b..1231ce2b 100644
--- a/src/components/emoji_picker/emoji_picker.vue
+++ b/src/components/emoji_picker/emoji_picker.vue
@@ -3,14 +3,20 @@
     ref="popover"
     trigger="click"
     popover-class="emoji-picker popover-default"
-    :trigger-attrs="{ 'aria-hidden': true }"
+    :trigger-attrs="{ 'aria-hidden': true, tabindex: -1 }"
     @show="onPopoverShown"
     @close="onPopoverClosed"
   >
     <template #content>
       <div class="heading">
+        <!--
+          Body scroll lock needs to be on every scrollable element on safari iOS.
+          Here we tell it to enable scrolling for this element.
+          See https://github.com/willmcpo/body-scroll-lock#vanilla-js
+        -->
         <span
           ref="header"
+          v-body-scroll-lock="isInModal"
           class="emoji-tabs"
         >
           <span
@@ -22,6 +28,7 @@
               active: activeGroupView === group.id
             }"
             :title="group.text"
+            role="button"
             @click.prevent="highlight(group.id)"
           >
             <span
@@ -75,8 +82,10 @@
               @input="$event.target.composing = false"
             >
           </div>
+          <!-- Enables scrolling for this element on safari iOS. See comments for header. -->
           <DynamicScroller
             ref="emoji-groups"
+            v-body-scroll-lock="isInModal"
             class="emoji-groups"
             :class="groupsScrolledClass"
             :min-item-size="minItemSize"
@@ -108,6 +117,7 @@
                     :key="group.id + emoji.displayText"
                     :title="maybeLocalizedEmojiName(emoji)"
                     class="emoji-item"
+                    role="button"
                     @click.stop.prevent="onEmoji(emoji)"
                   >
                     <span
@@ -118,6 +128,7 @@
                       v-else
                       class="emoji-picker-emoji -custom"
                       loading="lazy"
+                      :alt="maybeLocalizedEmojiName(emoji)"
                       :src="emoji.imageUrl"
                       :data-emoji-name="group.id + emoji.displayText"
                     />
@@ -131,6 +142,17 @@
               {{ $t('emoji.keep_open') }}
             </Checkbox>
           </div>
+          <div
+            v-if="!hideCustomEmoji"
+            class="hide-custom-emoji"
+          >
+            <Checkbox
+              v-model="hideCustomEmojiInPicker"
+              @change="onShowing"
+            >
+              {{ $t('emoji.hide_custom_emoji') }}
+            </Checkbox>
+          </div>
         </div>
         <div
           v-if="showingStickers"