accessibility improvements

FreeTubeApp · Aug 29, 2024 · 8597175 · 8597175
1 parent 260bdf5
commit 8597175
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 10 deletions.
diff --git a/src/renderer/components/ft-community-post/ft-community-post.js b/src/renderer/components/ft-community-post/ft-community-post.js
@@ -7,7 +7,7 @@ import autolinker from 'autolinker'
 
 import { A11y, Navigation, Pagination } from 'swiper/modules'
 
-import { createWebURL, deepCopy, toLocalePublicationString } from '../../helpers/utils'
+import { createWebURL, deepCopy, formatNumber, toLocalePublicationString } from '../../helpers/utils'
 import { youtubeImageUrlToInvidious } from '../../helpers/api/invidious'
 
 export default defineComponent({
@@ -41,9 +41,11 @@ export default defineComponent({
       postId: '',
       authorThumbnails: null,
       publishedText: '',
-      voteCount: '',
+      voteCount: 0,
+      formattedVoteCount: '',
       postContent: '',
-      commentCount: '',
+      commentCount: 0,
+      formattedCommentCount: '',
       author: '',
       authorId: '',
     }
@@ -141,7 +143,9 @@ export default defineComponent({
         isRSS: this.data.isRSS
       })
       this.voteCount = this.data.voteCount
+      this.formattedVoteCount = formatNumber(this.voteCount)
       this.commentCount = this.data.commentCount
+      this.formattedCommentCount = formatNumber(this.commentCount)
       this.type = (this.data.postContent !== null && this.data.postContent !== undefined) ? this.data.postContent.type : 'text'
       this.author = this.data.author
       this.authorId = this.data.authorId

diff --git a/src/renderer/components/ft-community-post/ft-community-post.vue b/src/renderer/components/ft-community-post/ft-community-post.vue
@@ -115,24 +115,38 @@
     <div
       class="bottomSection"
     >
-      <span class="likeCount"><font-awesome-icon
-        class="thumbs-up-icon"
-        :icon="['fas', 'thumbs-up']"
-      /> {{ voteCount }}</span>
+      <span
+        class="likeCount"
+        :title="$tc('Global.Counts.Like Count', voteCount, {count: formattedVoteCount})"
+        :aria-label="$tc('Global.Counts.Like Count', voteCount, {count: formattedVoteCount})"
+      >
+        <font-awesome-icon
+          class="thumbs-up-icon"
+          :icon="['fas', 'thumbs-up']"
+          aria-hidden="true"
+        /> {{ formattedVoteCount }}</span>
       <router-link
         v-if="isInvidiousAllowed && !singlePost"
         :to="`/post/${postId}`"
         class="commentsLink"
+        :aria-label="$t('Channel.Community.View Full Post')"
       >
-        <span class="commentCount">
+        <span
+          class="commentCount"
+          :title="$tc('Global.Counts.Comment Count', commentCount, {count: formattedCommentCount})"
+          :aria-label="$tc('Global.Counts.Comment Count', commentCount, {count: formattedCommentCount})"
+        >
           <font-awesome-icon
             class="comment-count-icon"
             :icon="['fas', 'comment']"
-          /> {{ commentCount }}</span>
+            aria-hidden="true"
+          /> {{ formattedCommentCount }}</span>
       </router-link>
       <span
         v-else
         class="commentCount"
+        :title="$tc('Global.Counts.Comment Count', commentCount, {count: formattedCommentCount})"
+        :aria-label="$tc('Global.Counts.Comment Count', commentCount, {count: formattedCommentCount})"
       >
         <font-awesome-icon
           class="comment-count-icon"

diff --git a/src/renderer/helpers/api/local.js b/src/renderer/helpers/api/local.js
@@ -1416,7 +1416,7 @@ function parseLocalCommunityPost(post) {
     postId: post.id,
     authorThumbnails: post.author.thumbnails,
     publishedText: post.published.text,
-    voteCount: post.vote_count,
+    voteCount: parseLocalSubscriberCount(post.vote_count.text),
     postContent: parseLocalAttachment(post.attachment),
     commentCount: replyCount,
     author: post.author.name,

diff --git a/static/locales/en-US.yaml b/static/locales/en-US.yaml
@@ -52,6 +52,8 @@ Global:
     Channel Count: 1 channel | {count} channels
     Subscriber Count: 1 subscriber | {count} subscribers
     View Count: 1 view | {count} views
+    Like Count: 1 like | {count} likes
+    Comment Count: 1 comment | {count} comments
     Watching Count: 1 watching | {count} watching
   Input Tags:
     Length Requirement: Tag must be at least {number} characters long
@@ -763,6 +765,7 @@ Channel:
   Community:
     This channel currently does not have any posts: This channel currently does not have any posts
     votes: '{votes} votes'
+    View Full Post: View Full Post
     Reveal Answers: Reveal Answers
     Hide Answers: Hide Answers
     Video hidden by FreeTube: Video hidden by FreeTube