From 0026b35f661c83516ef9e7edc0d6e826f29a86a5 Mon Sep 17 00:00:00 2001
From: tusooa <tusooa@kazv.moe>
Date: Sun, 12 Nov 2023 14:51:39 -0500
Subject: [PATCH 1/3] Add alt text for react and extra-buttons popup

---
 src/components/emoji_picker/emoji_picker.vue   |  2 +-
 src/components/extra_buttons/extra_buttons.vue | 18 +++++++++++++++++-
 src/components/react_button/react_button.vue   |  2 ++
 src/i18n/en.json                               |  3 ++-
 4 files changed, 22 insertions(+), 3 deletions(-)

diff --git a/src/components/emoji_picker/emoji_picker.vue b/src/components/emoji_picker/emoji_picker.vue
index b8d3330977..0788f34ca8 100644
--- a/src/components/emoji_picker/emoji_picker.vue
+++ b/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 }"
+    :trigger-attrs="{ 'aria-hidden': true, tabindex: -1 }"
     @show="onPopoverShown"
     @close="onPopoverClosed"
   >
diff --git a/src/components/extra_buttons/extra_buttons.vue b/src/components/extra_buttons/extra_buttons.vue
index c1c15c0fb5..c6a196859d 100644
--- a/src/components/extra_buttons/extra_buttons.vue
+++ b/src/components/extra_buttons/extra_buttons.vue
@@ -2,6 +2,7 @@
   <Popover
     class="ExtraButtons"
     trigger="click"
+    :triggerAttrs="{ title: $t('status.more_actions') }"
     placement="top"
     :offset="{ y: 5 }"
     :bound-to="{ x: 'container' }"
@@ -10,10 +11,14 @@
     @close="onClose"
   >
     <template #content="{close}">
-      <div class="dropdown-menu">
+      <div
+        class="dropdown-menu"
+        role="menu"
+      >
         <button
           v-if="canMute && !status.thread_muted"
           class="button-default dropdown-item dropdown-item-icon"
+          role="menuitem"
           @click.prevent="muteConversation"
         >
           <FAIcon
@@ -24,6 +29,7 @@
         <button
           v-if="canMute && status.thread_muted"
           class="button-default dropdown-item dropdown-item-icon"
+          role="menuitem"
           @click.prevent="unmuteConversation"
         >
           <FAIcon
@@ -34,6 +40,7 @@
         <button
           v-if="!status.pinned && canPin"
           class="button-default dropdown-item dropdown-item-icon"
+          role="menuitem"
           @click.prevent="pinStatus"
           @click="close"
         >
@@ -45,6 +52,7 @@
         <button
           v-if="status.pinned && canPin"
           class="button-default dropdown-item dropdown-item-icon"
+          role="menuitem"
           @click.prevent="unpinStatus"
           @click="close"
         >
@@ -57,6 +65,7 @@
           <button
             v-if="!status.bookmarked"
             class="button-default dropdown-item dropdown-item-icon"
+            role="menuitem"
             @click.prevent="bookmarkStatus"
             @click="close"
           >
@@ -68,6 +77,7 @@
           <button
             v-if="status.bookmarked"
             class="button-default dropdown-item dropdown-item-icon"
+            role="menuitem"
             @click.prevent="unbookmarkStatus"
             @click="close"
           >
@@ -80,6 +90,7 @@
         <button
           v-if="ownStatus && editingAvailable"
           class="button-default dropdown-item dropdown-item-icon"
+          role="menuitem"
           @click.prevent="editStatus"
           @click="close"
         >
@@ -91,6 +102,7 @@
         <button
           v-if="isEdited && editingAvailable"
           class="button-default dropdown-item dropdown-item-icon"
+          role="menuitem"
           @click.prevent="showStatusHistory"
           @click="close"
         >
@@ -102,6 +114,7 @@
         <button
           v-if="canDelete"
           class="button-default dropdown-item dropdown-item-icon"
+          role="menuitem"
           @click.prevent="deleteStatus"
           @click="close"
         >
@@ -112,6 +125,7 @@
         </button>
         <button
           class="button-default dropdown-item dropdown-item-icon"
+          role="menuitem"
           @click.prevent="copyLink"
           @click="close"
         >
@@ -123,6 +137,7 @@
         <a
           v-if="!status.is_local"
           class="button-default dropdown-item dropdown-item-icon"
+          role="menuitem"
           title="Source"
           :href="status.external_url"
           target="_blank"
@@ -134,6 +149,7 @@
         </a>
         <button
           class="button-default dropdown-item dropdown-item-icon"
+          role="menuitem"
           @click.prevent="reportStatus"
           @click="close"
         >
diff --git a/src/components/react_button/react_button.vue b/src/components/react_button/react_button.vue
index 947536a1f3..1b0674e6d0 100644
--- a/src/components/react_button/react_button.vue
+++ b/src/components/react_button/react_button.vue
@@ -11,6 +11,8 @@
     />
     <span
       class="button-unstyled popover-trigger"
+      role="button"
+      :tabindex="0"
       :title="$t('tool_tip.add_reaction')"
       @click.stop.prevent="show"
     >
diff --git a/src/i18n/en.json b/src/i18n/en.json
index 031771ddf4..034022cb69 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -1045,7 +1045,8 @@
     "reaction_count_label": "{num} person reacted | {num} people reacted",
     "hide_quote": "Hide the quoted status",
     "display_quote": "Display the quoted status",
-    "invisible_quote": "Quoted status unavailable: {link}"
+    "invisible_quote": "Quoted status unavailable: {link}",
+    "more_actions": "More actions on this status"
   },
   "user_card": {
     "approve": "Approve",

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 2/3] 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 68654f6932..9baf63f226 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 48b960b2b7..e2c88cebbe 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 c6a196859d..b7d3b1d3ab 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 e4d6869a41..f6001f56a5 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 ba49961d78..5564b118e4 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 0000000000..33f92e811a
--- /dev/null
+++ b/src/services/random_seed/random_seed.service.js
@@ -0,0 +1,3 @@
+const genRandomSeed = () => `${Math.random()}`.replace('.', '-')
+
+export default genRandomSeed

From 5ff14837a76fb7b7501ca4603937492e18ceadcf Mon Sep 17 00:00:00 2001
From: tusooa <tusooa@kazv.moe>
Date: Sun, 12 Nov 2023 16:47:59 -0500
Subject: [PATCH 3/3] Add changelog

---
 changelog.d/react-more-actions-fix.fix | 1 +
 1 file changed, 1 insertion(+)
 create mode 100644 changelog.d/react-more-actions-fix.fix

diff --git a/changelog.d/react-more-actions-fix.fix b/changelog.d/react-more-actions-fix.fix
new file mode 100644
index 0000000000..9ab41de239
--- /dev/null
+++ b/changelog.d/react-more-actions-fix.fix
@@ -0,0 +1 @@
+Add aria attributes to react and extra buttons