From ed23f51838477dc04fb5daedb6bf1bdf96f2ca65 Mon Sep 17 00:00:00 2001
From: tusooa <tusooa@kazv.moe>
Date: Mon, 22 May 2023 22:02:22 -0400
Subject: Make reaction button accessible

---
 src/components/emoji_reactions/emoji_reactions.js | 12 ++++++++++++
 1 file changed, 12 insertions(+)

(limited to 'src/components/emoji_reactions/emoji_reactions.js')

diff --git a/src/components/emoji_reactions/emoji_reactions.js b/src/components/emoji_reactions/emoji_reactions.js
index bb11b840..b3520a55 100644
--- a/src/components/emoji_reactions/emoji_reactions.js
+++ b/src/components/emoji_reactions/emoji_reactions.js
@@ -1,5 +1,17 @@
 import UserAvatar from '../user_avatar/user_avatar.vue'
 import UserListPopover from '../user_list_popover/user_list_popover.vue'
+import { library } from '@fortawesome/fontawesome-svg-core'
+import {
+  faPlus,
+  faMinus,
+  faCheck
+} from '@fortawesome/free-solid-svg-icons'
+
+library.add(
+  faPlus,
+  faMinus,
+  faCheck
+)
 
 const EMOJI_REACTION_COUNT_CUTOFF = 12
 
-- 
cgit v1.2.3-70-g09d2


From 8a1074336c3cce8111a23281bbe71301b93c3420 Mon Sep 17 00:00:00 2001
From: tusooa <tusooa@kazv.moe>
Date: Mon, 22 May 2023 22:09:04 -0400
Subject: Make emoji reactions clickable when not logged in

---
 src/components/emoji_reactions/emoji_reactions.js  |  3 +++
 src/components/emoji_reactions/emoji_reactions.vue | 20 ++++++++------------
 2 files changed, 11 insertions(+), 12 deletions(-)

(limited to 'src/components/emoji_reactions/emoji_reactions.js')

diff --git a/src/components/emoji_reactions/emoji_reactions.js b/src/components/emoji_reactions/emoji_reactions.js
index b3520a55..74cb844c 100644
--- a/src/components/emoji_reactions/emoji_reactions.js
+++ b/src/components/emoji_reactions/emoji_reactions.js
@@ -45,6 +45,9 @@ const EmojiReactions = {
     },
     loggedIn () {
       return !!this.$store.state.users.currentUser
+    },
+    remoteInteractionLink () {
+      return this.$store.getters.remoteInteractionLink({ statusId: this.status.id })
     }
   },
   methods: {
diff --git a/src/components/emoji_reactions/emoji_reactions.vue b/src/components/emoji_reactions/emoji_reactions.vue
index 3171785b..f30afcb2 100644
--- a/src/components/emoji_reactions/emoji_reactions.vue
+++ b/src/components/emoji_reactions/emoji_reactions.vue
@@ -5,9 +5,12 @@
       :key="reaction.url || reaction.name"
       class="emoji-reaction-container btn-group"
     >
-      <button
+      <component
+        :is="loggedIn ? 'button' : 'a'"
+        v-bind="!loggedIn ? { href: remoteInteractionLink } : {}"
+        role="button"
         class="emoji-reaction btn button-default"
-        :class="{ '-picked-reaction': reactedWith(reaction.name), 'not-clickable': !loggedIn }"
+        :class="{ '-picked-reaction': reactedWith(reaction.name) }"
         @click="emojiOnClick(reaction.name, $event)"
       >
         <span
@@ -45,7 +48,7 @@
           icon="minus"
         />
         </FALayers>
-      </button>
+      </component>
     <UserListPopover
       :users="accountsForEmoji[reaction.name]"
       class="emoji-reaction-popover"
@@ -112,6 +115,8 @@
     align-items: center;
     justify-content: center;
     box-sizing: border-box;
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
 
     .reaction-emoji {
       width: var(--emoji-size);
@@ -138,15 +143,6 @@
       outline: none;
     }
 
-    &.not-clickable {
-      cursor: default;
-
-      &:hover {
-        box-shadow: $fallback--buttonShadow;
-        box-shadow: var(--buttonShadow);
-      }
-    }
-
     &.-picked-reaction {
       border: 1px solid var(--accent, $fallback--link);
       margin-left: -1px; // offset the border, can't use inset shadows either
-- 
cgit v1.2.3-70-g09d2


From c67513002460f56901246c81a9e7b6dbad89be27 Mon Sep 17 00:00:00 2001
From: tusooa <tusooa@kazv.moe>
Date: Mon, 22 May 2023 22:30:54 -0400
Subject: Make reaction counter accessible

---
 src/components/emoji_reactions/emoji_reactions.js  | 11 +++++++++++
 src/components/emoji_reactions/emoji_reactions.vue |  2 +-
 src/i18n/en.json                                   |  3 ++-
 3 files changed, 14 insertions(+), 2 deletions(-)

(limited to 'src/components/emoji_reactions/emoji_reactions.js')

diff --git a/src/components/emoji_reactions/emoji_reactions.js b/src/components/emoji_reactions/emoji_reactions.js
index 74cb844c..b4936424 100644
--- a/src/components/emoji_reactions/emoji_reactions.js
+++ b/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 })
+      }
     }
   }
 }
diff --git a/src/components/emoji_reactions/emoji_reactions.vue b/src/components/emoji_reactions/emoji_reactions.vue
index d475d5dc..20a1f4a1 100644
--- a/src/components/emoji_reactions/emoji_reactions.vue
+++ b/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>
diff --git a/src/i18n/en.json b/src/i18n/en.json
index b051f088..01309d0e 100644
--- a/src/i18n/en.json
+++ b/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",
-- 
cgit v1.2.3-70-g09d2