From 82063f34b2346bc0abca68fae04bc9dd9e73d44c Mon Sep 17 00:00:00 2001
From: tusooa <tusooa@kazv.moe>
Date: Sun, 12 Nov 2023 15:13:28 -0500
Subject: [PATCH] Add aria-controls to extra-buttons trigger

---
 src/components/emoji_input/emoji_input.js           |  3 ++-
 src/components/extra_buttons/extra_buttons.js       | 13 ++++++++++++-
 src/components/extra_buttons/extra_buttons.vue      |  3 ++-
 src/components/poll/poll.js                         |  3 ++-
 src/components/post_status_form/post_status_form.js |  3 ++-
 src/services/random_seed/random_seed.service.js     |  3 +++
 6 files changed, 23 insertions(+), 5 deletions(-)
 create mode 100644 src/services/random_seed/random_seed.service.js

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