commit: b6cef856f917baca5114b76f6854f00f957b0eec
parent 1e597d8b1aea91ae5c299fa6d5f32fac48b60e88
Author: HJ <30-hj@users.noreply.git.pleroma.social>
Date: Tue, 23 May 2023 08:24:56 +0000
Merge branch 'tusooa/reaction-accessibility' into 'develop'
Reaction accessibility
See merge request pleroma/pleroma-fe!1827
Diffstat:
4 files changed, 137 insertions(+), 22 deletions(-)
diff --git 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
@@ -33,6 +45,9 @@ const EmojiReactions = {
},
loggedIn () {
return !!this.$store.state.users.currentUser
+ },
+ remoteInteractionLink () {
+ return this.$store.getters.remoteInteractionLink({ statusId: this.status.id })
}
},
methods: {
@@ -62,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
@@ -1,15 +1,19 @@
<template>
<div class="EmojiReactions">
- <UserListPopover
+ <span
v-for="(reaction) in emojiReactions"
:key="reaction.url || reaction.name"
- :users="accountsForEmoji[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) }"
+ :title="reaction.url ? reaction.name : undefined"
+ :aria-pressed="reactedWith(reaction.name)"
@click="emojiOnClick(reaction.name, $event)"
- @mouseenter="fetchEmojiReactionsByIfMissing()"
>
<span
class="reaction-emoji"
@@ -17,7 +21,6 @@
<img
v-if="reaction.url"
:src="reaction.url"
- :title="reaction.name"
class="reaction-emoji-content"
width="1em"
>
@@ -26,9 +29,36 @@
class="reaction-emoji reaction-emoji-content"
>{{ reaction.name }}</span>
</span>
- <span>{{ reaction.count }}</span>
- </button>
- </UserListPopover>
+ <FALayers>
+ <FAIcon
+ v-if="reactedWith(reaction.name)"
+ class="active-marker"
+ transform="shrink-6 up-9"
+ icon="check"
+ />
+ <FAIcon
+ v-if="!reactedWith(reaction.name)"
+ class="focus-marker"
+ transform="shrink-6 up-9"
+ icon="plus"
+ />
+ <FAIcon
+ v-else
+ class="focus-marker"
+ transform="shrink-6 up-9"
+ icon="minus"
+ />
+ </FALayers>
+ </component>
+ <UserListPopover
+ :users="accountsForEmoji[reaction.name]"
+ class="emoji-reaction-popover"
+ :trigger-attrs="counterTriggerAttrs(reaction)"
+ @show="fetchEmojiReactionsByIfMissing()"
+ >
+ <span class="emoji-reaction-counts">{{ reaction.count }}</span>
+ </UserListPopover>
+ </span>
<a
v-if="tooManyReactions"
class="emoji-reaction-expand faint"
@@ -43,6 +73,7 @@
<script src="./emoji_reactions.js"></script>
<style lang="scss">
@import "../../variables";
+@import "../../mixins";
.EmojiReactions {
display: flex;
@@ -51,14 +82,44 @@
--emoji-size: calc(1.25em * var(--emojiReactionsScale, 1));
- .emoji-reaction {
- padding: 0 0.5em;
- margin-right: 0.5em;
+ .emoji-reaction-container {
+ display: flex;
+ align-items: stretch;
margin-top: 0.5em;
+ margin-right: 0.5em;
+
+ .emoji-reaction-popover {
+ padding: 0;
+
+ .emoji-reaction-count-button {
+ background-color: var(--btn);
+ height: 100%;
+ border-top-left-radius: 0;
+ border-bottom-left-radius: 0;
+ box-sizing: border-box;
+ min-width: 2em;
+ display: inline-flex;
+ justify-content: center;
+ align-items: center;
+ color: $fallback--text;
+ color: var(--btnText, $fallback--text);
+
+ &.-picked-reaction {
+ border: 1px solid var(--accent, $fallback--link);
+ margin-right: -1px;
+ }
+ }
+ }
+ }
+
+ .emoji-reaction {
+ padding-left: 0.5em;
display: flex;
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);
@@ -85,19 +146,45 @@
outline: none;
}
- &.not-clickable {
- cursor: default;
-
- &:hover {
- box-shadow: $fallback--buttonShadow;
- box-shadow: var(--buttonShadow);
- }
+ .svg-inline--fa {
+ color: $fallback--text;
+ color: var(--btnText, $fallback--text);
}
&.-picked-reaction {
border: 1px solid var(--accent, $fallback--link);
margin-left: -1px; // offset the border, can't use inset shadows either
- margin-right: calc(0.5em - 1px);
+ margin-right: -1px;
+
+ .svg-inline--fa {
+ color: $fallback--link;
+ color: var(--accent, $fallback--link);
+ }
+ }
+
+ @include unfocused-style {
+ .focus-marker {
+ visibility: hidden;
+ }
+
+ .active-marker {
+ visibility: visible;
+ }
+ }
+
+ @include focused-style {
+ .svg-inline--fa {
+ color: $fallback--link;
+ color: var(--accent, $fallback--link);
+ }
+
+ .focus-marker {
+ visibility: visible;
+ }
+
+ .active-marker {
+ visibility: hidden;
+ }
}
}
diff --git a/src/components/notification/notification.vue b/src/components/notification/notification.vue
@@ -125,7 +125,8 @@
v-if="notification.emoji_url"
class="emoji-reaction-emoji emoji-reaction-emoji-image"
:src="notification.emoji_url"
- :name="notification.emoji"
+ :alt="notification.emoji"
+ :title="notification.emoji"
>
<span
v-else
diff --git 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",
