Make reaction counter accessible

src/components/emoji_reactions/emoji_reactions.js

@@ -77,6 +77,17 @@ const EmojiReactions = {
       } else {
         this.reactWith(emoji)
       }
+    },
+    counterTriggerAttrs (reaction) {
+      return {
+        class: [
+          'btn',
+          'button-default',
+          'emoji-reaction-count-button',
+          { '-picked-reaction': this.reactedWith(reaction.name) }
+        ],
+        'aria-label': this.$tc('status.reaction_count_label', reaction.count, { num: reaction.count })
+      }
     }
   }
 }

src/components/emoji_reactions/emoji_reactions.vue

@@ -53,7 +53,7 @@
       <UserListPopover
         :users="accountsForEmoji[reaction.name]"
         class="emoji-reaction-popover"
-        :trigger-attrs="{ class: ['btn', 'button-default', 'emoji-reaction-count-button', { '-picked-reaction': reactedWith(reaction.name) }] }"
+        :trigger-attrs="counterTriggerAttrs(reaction)"
         @show="fetchEmojiReactionsByIfMissing()"
       >
         <span class="emoji-reaction-counts">{{ reaction.count }}</span>

src/i18n/en.json

@@ -933,7 +933,8 @@
     "show_all_conversation_with_icon": "{icon} {text}",
     "show_all_conversation": "Show full conversation ({numStatus} other status) | Show full conversation ({numStatus} other statuses)",
     "show_only_conversation_under_this": "Only show replies to this status",
-    "status_history": "Status history"
+    "status_history": "Status history",
+    "reaction_count_label": "{num} person reacted | {num} people reacted"
   },
   "user_card": {
     "approve": "Approve",