Merge branch 'tusooa/subject-hidden-popover-trigger' into 'develop'

Remove focusability on hidden popover in subject input

See merge request pleroma/pleroma-fe!2100

changelog.d/subject-hidden-popover-trigger.fix

@@ -0,0 +1 @@
+Remove focusability on hidden popover in subject input

src/components/emoji_input/emoji_input.vue

@@ -55,7 +55,7 @@
       ref="suggestorPopover"
       class="autocomplete-panel"
       placement="bottom"
-      :trigger-attrs="{ 'aria-hidden': true }"
+      :hide-trigger="true"
     >
       <template #content>
         <div

src/components/emoji_picker/emoji_picker.vue

@@ -3,7 +3,7 @@
     ref="popover"
     trigger="click"
     popover-class="emoji-picker popover-default"
-    :trigger-attrs="{ 'aria-hidden': true, tabindex: -1 }"
+    :hide-trigger="true"
     @show="onPopoverShown"
     @close="onPopoverClosed"
   >

src/components/popover/popover.js

@@ -1,3 +1,4 @@
+/* global process */
 const Popover = {
   name: 'Popover',
   props: {
@@ -48,6 +49,12 @@ const Popover = {
     // Use styled button (to avoid nested buttons)
     normalButton: Boolean,
 
+    // Whether to hide the trigger totally
+    hideTrigger: {
+      type: Boolean,
+      default: false,
+    },
+
     triggerAttrs: {
       type: Object,
       default: {}
@@ -79,6 +86,26 @@ const Popover = {
       childrenShown: new Set()
     }
   },
+  computed: {
+    allTriggerAttrs () {
+      if (process.env.NODE_ENV === 'development') {
+        if ('aria-hidden' in this.triggerAttrs) {
+          throw new Error('Do not use aria-hidden in triggerAttrs. Instead set hideTrigger to true')
+        }
+      }
+
+      const attrs = {
+        ...this.triggerAttrs,
+      }
+
+      if (this.hideTrigger) {
+        attrs['aria-hidden'] = true
+        attrs.tabindex = 1
+      }
+
+      return attrs
+    }
+  },
   methods: {
     setAnchorEl (el) {
       this.anchorEl = el

src/components/popover/popover.vue

@@ -9,7 +9,7 @@
       class="popover-trigger-button"
       :class="normalButton ? 'button-default btn' : 'button-unstyled'"
       type="button"
-      v-bind="triggerAttrs"
+      v-bind="allTriggerAttrs"
       @click="onClick"
     >
       <slot name="trigger" />