Improve accessibility of Watch View

src/renderer/components/playlist-info/playlist-info.js

@@ -122,19 +122,6 @@ export default Vue.extend({
           openExternalLink(invidiousUrl)
           break
       }
-    },
-
-    playFirstVideo() {
-      const playlistInfo = {
-        playlistId: this.id
-      }
-
-      this.$router.push(
-        {
-          path: `/watch/${this.firstVideoId}`,
-          query: playlistInfo
-        }
-      )
     }
   }
 })

src/renderer/components/playlist-info/playlist-info.vue

@@ -3,10 +3,18 @@
     <div
       class="playlistThumbnail"
     >
-      <img
-        :src="thumbnail"
-        @click="playFirstVideo"
+      <router-link
+        :to="{
+          path: `/watch/${firstVideoId}`,
+          query: { playlistId: id }
+        }"
+        tabindex="-1"
       >
+        <img
+          :src="thumbnail"
+          alt=""
+        >
+      </router-link>
     </div>
 
     <div class="playlistStats">
@@ -36,6 +44,7 @@
       <img
         class="channelThumbnail"
         :src="channelThumbnail"
+        alt=""
       >
       <h3
         class="channelName"

src/renderer/components/watch-video-comments/watch-video-comments.js

@@ -334,10 +334,6 @@ export default Vue.extend({
       })
     },
 
-    goToChannel: function (channelId) {
-      this.$router.push({ path: `/channel/${channelId}` })
-    },
-
     ...mapActions([
       'invidiousAPICall'
     ])

src/renderer/components/watch-video-comments/watch-video-comments.vue

@@ -3,14 +3,22 @@
     <h4
       v-if="commentData.length === 0 && !isLoading"
       class="getCommentsTitle"
+      role="button"
+      tabindex="0"
       @click="getCommentData"
+      @keydown.space.prevent="getCommentData"
+      @keydown.enter.prevent="getCommentData"
     >
       {{ $t("Comments.Click to View Comments") }}
     </h4>
     <h4
       v-if="commentData.length > 0 && !isLoading && !showComments"
       class="getCommentsTitle"
+      role="button"
+      tabindex="0"
       @click="showComments = true"
+      @keydown.space.prevent="showComments = true"
+      @keydown.enter.prevent="showComments = true"
     >
       {{ $t("Comments.Click to View Comments") }}
     </h4>
@@ -29,7 +37,11 @@
       {{ $t("Comments.Comments") }}
       <span
         class="hideComments"
+        role="button"
+        tabindex="0"
         @click="showComments = false"
+        @keydown.space.prevent="showComments = false"
+        @keydown.enter.prevent="showComments = false"
       >
         {{ $t("Comments.Hide Comments") }}
       </span>
@@ -39,14 +51,20 @@
     >
       <div
         v-for="(comment, index) in commentData"
+        :id="'comment' + index"
         :key="index"
         class="comment"
       >
-        <img
-          :src="comment.authorThumb"
-          class="commentThumbnail"
-          @click="goToChannel(comment.authorLink)"
+        <router-link
+          :to="`/channel/${comment.authorLink}`"
+          tabindex="-1"
         >
+          <img
+            :src="comment.authorThumb"
+            alt=""
+            class="commentThumbnail"
+          >
+        </router-link>
         <p
           v-if="comment.isPinned"
           class="commentPinned"
@@ -64,9 +82,12 @@
             :class="{
               commentOwner: comment.isOwner
             }"
-            @click="goToChannel(comment.authorLink)"
           >
-            {{ comment.author }}
+            <router-link
+              :to="`/channel/${comment.authorLink}`"
+            >
+              {{ comment.author }}
+            </router-link>
           </span>
           <img
             v-if="comment.isMember"
@@ -97,7 +118,10 @@
           >
             <img
               :src="channelThumbnail"
+              :title="$t('Comments.Hearted')"
+              :aria-label="$t('Comments.Hearted')"
               class="commentHeartBadgeImg"
+              alt=""
             >
             <font-awesome-icon
               :icon="['fas', 'heart']"
@@ -111,7 +135,11 @@
           <span
             v-if="comment.numReplies > 0"
             class="commentMoreReplies"
+            role="button"
+            tabindex="0"
             @click="toggleCommentReplies(index)"
+            @keydown.space.prevent="toggleCommentReplies(index)"
+            @keydown.enter.prevent="toggleCommentReplies(index)"
           >
             <span v-if="!comment.showReplies">{{ $t("Comments.View") }}</span>
             <span v-else>{{ $t("Comments.Hide") }}</span>
@@ -128,22 +156,32 @@
         >
           <div
             v-for="(reply, replyIndex) in comment.replies"
+            :id="'comment' + index + '-' + replyIndex"
             :key="replyIndex"
             class="comment"
           >
-            <img
-              :src="reply.authorThumb"
-              class="commentThumbnail"
+            <router-link
+              :to="`/channel/${reply.authorLink}`"
+              tabindex="-1"
             >
+              <img
+                :src="reply.authorThumb"
+                class="commentThumbnail"
+                alt=""
+              >
+            </router-link>
             <p class="commentAuthorWrapper">
               <span
                 class="commentAuthor"
                 :class="{
                   commentOwner: reply.isOwner
                 }"
-                @click="goToChannel(reply.authorLink)"
               >
-                {{ reply.author }}
+                <router-link
+                  :to="`/channel/${reply.authorLink}`"
+                >
+                  {{ reply.author }}
+                </router-link>
               </span>
               <img
                 v-if="reply.isMember"
@@ -171,13 +209,17 @@
               v-if="reply.numReplies > 0"
               class="commentMoreReplies"
             >
-              View {{ reply.numReplies }} replies
+              {{ $t('Comments.View {replyCount} replies', { replyCount: reply.numReplies }) }}
             </p>
           </div>
           <div
             v-if="comment.replyToken !== null"
             class="showMoreReplies"
-            @click="getCommentReplies(index)"
+            role="button"
+            tabindex="0"
+            @click="getCommentReplies(index, comment.replies.length)"
+            @keydown.space.prevent="getCommentReplies(index, comment.replies.length)"
+            @keydown.enter.prevent="getCommentReplies(index, comment.replies.length)"
           >
             <span>{{ $t("Comments.Show More Replies") }}</span>
           </div>
@@ -194,7 +236,11 @@
     <h4
       v-if="commentData.length > 0 && !isLoading && showComments && nextPageToken"
       class="getMoreComments"
+      role="button"
+      tabindex="0"
       @click="getMoreComments"
+      @keydown.space.prevent="getMoreComments"
+      @keydown.enter.prevent="getMoreComments"
     >
       {{ $t("Comments.Load More Comments") }}
     </h4>

src/renderer/components/watch-video-info/watch-video-info.sass

@@ -11,6 +11,11 @@
   font-size: 22px
   margin: 0 0 24px
   word-break: break-word
+  display: block
+  margin-block-end: 1em
+  margin-inline-start: 0px
+  margin-inline-end: 0px
+  font-weight: normal
 
 .channelInformation
   .profileRow

src/renderer/components/watch-video-info/watch-video-info.vue

@@ -1,11 +1,11 @@
 <template>
   <ft-card class="watchVideoInfo">
     <div>
-      <p
+      <h1
         class="videoTitle"
       >
         {{ title }}
-      </p>
+      </h1>
       <div
         class="channelInformation"
       >

src/renderer/components/watch-video-live-chat/watch-video-live-chat.js

@@ -250,11 +250,6 @@ export default Vue.extend({
       })
       this.stayAtBottom = true
       this.showScrollToBottom = false
-    },
-
-    preventDefault: function (event) {
-      event.stopPropagation()
-      event.preventDefault()
     }
   }
 })

src/renderer/components/watch-video-live-chat/watch-video-live-chat.vue

@@ -49,13 +49,20 @@
         <div
           v-for="(comment, index) in superChatComments"
           :key="index"
+          :aria-label="$t('Video.Show Super Chat Comment')"
+          :style="{ backgroundColor: 'var(--primary-color)' }"
           class="superChat"
           :class="comment.superchat.colorClass"
+          role="button"
+          tabindex="0"
           @click="showSuperChatComment(comment)"
+          @keydown.space.prevent="showSuperChatComment(comment)"
+          @keydown.enter.prevent="showSuperChatComment(comment)"
         >
           <img
             :src="comment.author.thumbnail.url"
             class="channelThumbnail"
+            alt=""
           >
           <p
             class="superChatContent"
@@ -72,18 +79,23 @@
         v-if="showSuperChat"
         class="openedSuperChat"
         :class="superChat.superchat.colorClass"
+        role="button"
+        tabindex="0"
         @click="showSuperChat = false"
+        @keydown.space.prevent="showSuperChat = false"
+        @keydown.enter.prevent="showSuperChat = false"
       >
         <div
           class="superChatMessage"
-          @click="e => preventDefault(e)"
+          @click.stop.prevent
         >
           <div
             class="upperSuperChatMessage"
           >
             <img
               :src="superChat.author.thumbnail.url"
               class="channelThumbnail"
+              alt=""
             >
             <p
               class="channelName"
@@ -125,6 +137,7 @@
               <img
                 :src="comment.author.thumbnail.url"
                 class="channelThumbnail"
+                alt=""
               >
               <p
                 class="channelName"
@@ -149,6 +162,7 @@
             <img
               :src="comment.author.thumbnail.url"
               class="channelThumbnail"
+              alt=""
             >
             <p
               class="chatContent"
@@ -169,7 +183,7 @@
               >
                 <img
                   :src="comment.author.badge.thumbnail.url"
-                  :alt="comment.author.badge.thumbnail.alt"
+                  alt=""
                   :title="comment.author.badge.thumbnail.alt"
                   class="badgeImage"
                 >
@@ -186,7 +200,12 @@
       <div
         v-if="showScrollToBottom"
         class="scrollToBottom"
+        :aria-label="$t('Video.Scroll to Bottom')"
+        role="button"
+        tabindex="0"
         @click="scrollToBottom"
+        @keydown.space.prevent="scrollToBottom"
+        @keydown.enter.prevent="scrollToBottom"
       >
         <font-awesome-icon
           class="icon"