Add aria-controls to extra-buttons trigger

6 files changed, 23 insertions, 5 deletions

diff --git a/src/components/emoji_input/emoji_input.js b/src/components/emoji_input/emoji_input.js
index 68654f69..9baf63f2 100644
--- a/src/components/emoji_input/emoji_input.js
+++ b/src/components/emoji_input/emoji_input.js
@@ -1,4 +1,5 @@
 import Completion from '../../services/completion/completion.js'
+import genRandomSeed from '../../services/random_seed/random_seed.service.js'
 import EmojiPicker from '../emoji_picker/emoji_picker.vue'
 import Popover from 'src/components/popover/popover.vue'
 import ScreenReaderNotice from 'src/components/screen_reader_notice/screen_reader_notice.vue'
@@ -110,7 +111,7 @@ const EmojiInput = {
   },
   data () {
     return {
-      randomSeed: `${Math.random()}`.replace('.', '-'),
+      randomSeed: genRandomSeed(),
       input: undefined,
       caretEl: undefined,
       highlighted: -1,
diff --git a/src/components/extra_buttons/extra_buttons.js b/src/components/extra_buttons/extra_buttons.js
index 48b960b2..e2c88ceb 100644
--- a/src/components/extra_buttons/extra_buttons.js
+++ b/src/components/extra_buttons/extra_buttons.js
@@ -1,4 +1,5 @@
 import Popover from '../popover/popover.vue'
+import genRandomSeed from '../../services/random_seed/random_seed.service.js'
 import ConfirmModal from '../confirm_modal/confirm_modal.vue'
 import { library } from '@fortawesome/fontawesome-svg-core'
 import {
@@ -40,7 +41,8 @@ const ExtraButtons = {
   data () {
     return {
       expanded: false,
-      showingDeleteDialog: false
+      showingDeleteDialog: false,
+      randomSeed: genRandomSeed()
     }
   },
   methods: {
@@ -152,6 +154,15 @@ const ExtraButtons = {
     editingAvailable () { return this.$store.state.instance.editingAvailable },
     shouldConfirmDelete () {
       return this.$store.getters.mergedConfig.modalOnDelete
+    },
+    triggerAttrs () {
+      return {
+        title: this.$t('status.more_actions'),
+        id: `popup-trigger-${this.randomSeed}`,
+        'aria-controls': `popup-menu-${this.randomSeed}`,
+        'aria-expanded': this.expanded,
+        'aria-haspopup': 'menu'
+      }
     }
   }
 }
diff --git a/src/components/extra_buttons/extra_buttons.vue b/src/components/extra_buttons/extra_buttons.vue
index c6a19685..b7d3b1d3 100644
--- a/src/components/extra_buttons/extra_buttons.vue
+++ b/src/components/extra_buttons/extra_buttons.vue
@@ -2,7 +2,7 @@
   <Popover
     class="ExtraButtons"
     trigger="click"
-    :triggerAttrs="{ title: $t('status.more_actions') }"
+    :trigger-attrs="triggerAttrs"
     placement="top"
     :offset="{ y: 5 }"
     :bound-to="{ x: 'container' }"
@@ -14,6 +14,7 @@
       <div
         class="dropdown-menu"
         role="menu"
+        :id="`popup-menu-${randomSeed}`"
       >
         <button
           v-if="canMute && !status.thread_muted"
diff --git a/src/components/poll/poll.js b/src/components/poll/poll.js
index e4d6869a..f6001f56 100644
--- a/src/components/poll/poll.js
+++ b/src/components/poll/poll.js
@@ -1,4 +1,5 @@
 import Timeago from 'components/timeago/timeago.vue'
+import genRandomSeed from '../../services/random_seed/random_seed.service.js'
 import RichContent from 'components/rich_content/rich_content.jsx'
 import { forEach, map } from 'lodash'
 
@@ -13,7 +14,7 @@ export default {
     return {
       loading: false,
       choices: [],
-      randomSeed: `${Math.random()}`.replace('.', '-')
+      randomSeed: genRandomSeed()
     }
   },
   created () {
diff --git a/src/components/post_status_form/post_status_form.js b/src/components/post_status_form/post_status_form.js
index ba49961d..5564b118 100644
--- a/src/components/post_status_form/post_status_form.js
+++ b/src/components/post_status_form/post_status_form.js
@@ -1,4 +1,5 @@
 import statusPoster from '../../services/status_poster/status_poster.service.js'
+import genRandomSeed from '../../services/random_seed/random_seed.service.js'
 import MediaUpload from '../media_upload/media_upload.vue'
 import ScopeSelector from '../scope_selector/scope_selector.vue'
 import EmojiInput from '../emoji_input/emoji_input.vue'
@@ -162,7 +163,7 @@ const PostStatusForm = {
     }
 
     return {
-      randomSeed: `${Math.random()}`.replace('.', '-'),
+      randomSeed: genRandomSeed(),
       dropFiles: [],
       uploadingFiles: false,
       error: null,
diff --git a/src/services/random_seed/random_seed.service.js b/src/services/random_seed/random_seed.service.js
new file mode 100644
index 00000000..33f92e81
--- /dev/null
+++ b/src/services/random_seed/random_seed.service.js
@@ -0,0 +1,3 @@
+const genRandomSeed = () => `${Math.random()}`.replace('.', '-')
+
+export default genRandomSeed