From e4a8a6edc870b00ef431b2a228d567e35ccf7b50 Mon Sep 17 00:00:00 2001
From: ChunkyPtogrammer <78101139+ChunkyProgrammer@users.noreply.github.com>
Date: Tue, 20 Dec 2022 20:11:50 -0500
Subject: [PATCH 1/2] Improve Watch page accessibility

Co-Authored-By: Jason <84899178+jasonhenriquez@users.noreply.github.com>
---
 .../components/playlist-info/playlist-info.js | 13 ----
 .../playlist-info/playlist-info.vue           | 15 +++-
 .../watch-video-comments.vue                  | 72 +++++++++++++++----
 .../watch-video-info/watch-video-info.sass    |  6 ++
 .../watch-video-info/watch-video-info.vue     |  4 +-
 .../watch-video-live-chat.js                  |  5 --
 .../watch-video-live-chat.vue                 | 23 +++++-
 .../watch-video-playlist.vue                  | 20 ++++++
 src/renderer/views/Search/Search.css          |  4 ++
 src/renderer/views/Search/Search.vue          |  4 ++
 src/renderer/views/Watch/Watch.vue            |  1 +
 static/locales/en-US.yaml                     |  4 ++
 12 files changed, 133 insertions(+), 38 deletions(-)

diff --git a/src/renderer/components/playlist-info/playlist-info.js b/src/renderer/components/playlist-info/playlist-info.js
index a8b448ac0ec08..a29d96b8ec111 100644
--- a/src/renderer/components/playlist-info/playlist-info.js
+++ b/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
-        }
-      )
     }
   }
 })
diff --git a/src/renderer/components/playlist-info/playlist-info.vue b/src/renderer/components/playlist-info/playlist-info.vue
index fbe4d0fda9b4f..dfb3e98469653 100644
--- a/src/renderer/components/playlist-info/playlist-info.vue
+++ b/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"
diff --git a/src/renderer/components/watch-video-comments/watch-video-comments.vue b/src/renderer/components/watch-video-comments/watch-video-comments.vue
index 060ced466bd46..1878a191fb89b 100644
--- a/src/renderer/components/watch-video-comments/watch-video-comments.vue
+++ b/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>
diff --git a/src/renderer/components/watch-video-info/watch-video-info.sass b/src/renderer/components/watch-video-info/watch-video-info.sass
index 3000104b495b9..2d58f80ee946a 100644
--- a/src/renderer/components/watch-video-info/watch-video-info.sass
+++ b/src/renderer/components/watch-video-info/watch-video-info.sass
@@ -11,6 +11,12 @@
   font-size: 22px
   margin: 0 0 24px
   word-break: break-word
+  display: block
+  margin-block-start: 1em
+  margin-block-end: 1em
+  margin-inline-start: 0px
+  margin-inline-end: 0px
+  font-weight: normal
 
 .channelInformation
   .profileRow
diff --git a/src/renderer/components/watch-video-info/watch-video-info.vue b/src/renderer/components/watch-video-info/watch-video-info.vue
index 9c9337d2d7e68..b0872c6a3cf70 100644
--- a/src/renderer/components/watch-video-info/watch-video-info.vue
+++ b/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"
       >
diff --git a/src/renderer/components/watch-video-live-chat/watch-video-live-chat.js b/src/renderer/components/watch-video-live-chat/watch-video-live-chat.js
index 7172b4508d057..aef8590a68d1f 100644
--- a/src/renderer/components/watch-video-live-chat/watch-video-live-chat.js
+++ b/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()
     }
   }
 })
diff --git a/src/renderer/components/watch-video-live-chat/watch-video-live-chat.vue b/src/renderer/components/watch-video-live-chat/watch-video-live-chat.vue
index 8c97f537caac0..67c915b90f02e 100644
--- a/src/renderer/components/watch-video-live-chat/watch-video-live-chat.vue
+++ b/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,11 +79,15 @@
         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"
@@ -84,6 +95,7 @@
             <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"
diff --git a/src/renderer/components/watch-video-playlist/watch-video-playlist.vue b/src/renderer/components/watch-video-playlist/watch-video-playlist.vue
index 6f8e8113f7234..099501da80153 100644
--- a/src/renderer/components/watch-video-playlist/watch-video-playlist.vue
+++ b/src/renderer/components/watch-video-playlist/watch-video-playlist.vue
@@ -37,33 +37,53 @@
           :class="{ playlistIconActive: loopEnabled }"
           :icon="['fas', 'retweet']"
           :title="$t('Video.Loop Playlist')"
+          role="button"
+          tabindex="0"
           @click="toggleLoop"
+          @keydown.enter.prevent="toggleLoop"
+          @keydown.space.prevent="toggleLoop"
         />
         <font-awesome-icon
           class="playlistIcon"
           :class="{ playlistIconActive: shuffleEnabled }"
           :icon="['fas', 'random']"
           :title="$t('Video.Shuffle Playlist')"
+          role="button"
+          tabindex="0"
           @click="toggleShuffle"
+          @keydown.enter.prevent="toggleShuffle"
+          @keydown.space.prevent="toggleShuffle"
         />
         <font-awesome-icon
           class="playlistIcon"
           :class="{ playlistIconActive: reversePlaylist }"
           :icon="['fas', 'exchange-alt']"
           :title="$t('Video.Reverse Playlist')"
+          role="button"
+          tabindex="0"
           @click="toggleReversePlaylist"
+          @keydown.enter.prevent="toggleReversePlaylist"
+          @keydown.space.prevent="toggleReversePlaylist"
         />
         <font-awesome-icon
           class="playlistIcon"
           :icon="['fas', 'step-backward']"
           :title="$t('Video.Play Previous Video')"
+          role="button"
+          tabindex="0"
           @click="playPreviousVideo"
+          @keydown.enter.prevent="playPreviousVideo"
+          @keydown.space.prevent="playPreviousVideo"
         />
         <font-awesome-icon
           class="playlistIcon"
           :icon="['fas', 'step-forward']"
           :title="$t('Video.Play Next Video')"
+          role="button"
+          tabindex="0"
           @click="playNextVideo"
+          @keydown.enter.prevent="playNextVideo"
+          @keydown.space.prevent="playNextVideo"
         />
       </p>
       <div
diff --git a/src/renderer/views/Search/Search.css b/src/renderer/views/Search/Search.css
index 515423f77c366..bce8f337f6281 100644
--- a/src/renderer/views/Search/Search.css
+++ b/src/renderer/views/Search/Search.css
@@ -8,6 +8,10 @@
   margin-top: 16px;
 }
 
+.getNextPage:hover, .getNextPage:focus {
+  background-color: var(--side-nav-hover-color);
+}
+
 .card {
   width: 85%;
   margin: 0 auto;
diff --git a/src/renderer/views/Search/Search.vue b/src/renderer/views/Search/Search.vue
index b6f7ab3f52aa8..02d3572fc71e8 100644
--- a/src/renderer/views/Search/Search.vue
+++ b/src/renderer/views/Search/Search.vue
@@ -16,7 +16,11 @@
       />
       <div
         class="getNextPage"
+        role="button"
+        tabindex="0"
         @click="nextPage"
+        @keydown.enter.prevent="nextPage"
+        @keydown.space.prevent="nextPage"
       >
         <font-awesome-icon :icon="['fas', 'search']" /> {{ $t("Search Filters.Fetch more results") }}
       </div>
diff --git a/src/renderer/views/Watch/Watch.vue b/src/renderer/views/Watch/Watch.vue
index 3b166caf33249..8b4d5c384aeb4 100644
--- a/src/renderer/views/Watch/Watch.vue
+++ b/src/renderer/views/Watch/Watch.vue
@@ -44,6 +44,7 @@
           <img
             :src="thumbnail"
             class="upcomingThumbnail"
+            alt=""
           >
           <div
             class="premiereDate"
diff --git a/static/locales/en-US.yaml b/static/locales/en-US.yaml
index 23ae156ad5af0..e97dd4b8ae1d9 100644
--- a/static/locales/en-US.yaml
+++ b/static/locales/en-US.yaml
@@ -577,6 +577,8 @@ Video:
   'Live Chat is currently not supported with the Invidious API.  A direct connection to YouTube is required.': Live
     Chat is currently not supported with the Invidious API.  A direct connection to
     YouTube is required.
+  Show Super Chat Comment: Show Super Chat Comment
+  Scroll to Bottom: Scroll to Bottom
   Download Video: Download Video
   video only: video only
   audio only: audio only
@@ -726,6 +728,7 @@ Comments:
   Sort by: Sort by
   Top comments: Top comments
   Newest first: Newest First
+  View {replyCount} replies: View {replyCount} replies
   # Context: View 10 Replies, View 1 Reply, View 1 Reply from Owner, View 2 Replies from Owner and others
   View: View
   Hide: Hide
@@ -740,6 +743,7 @@ Comments:
   No more comments available: No more comments available
   Pinned by: Pinned by
   Member: Member
+  Hearted: Hearted
 Up Next: Up Next
 
 #Tooltips

From 3aaa7da338c26112c9cd6ecfaeb3a4e86319dc92 Mon Sep 17 00:00:00 2001
From: ChunkyPtogrammer <78101139+ChunkyProgrammer@users.noreply.github.com>
Date: Thu, 22 Dec 2022 11:04:34 -0500
Subject: [PATCH 2/2] fix title issue, remove unused gotochannel function

---
 .../components/watch-video-comments/watch-video-comments.js   | 4 ----
 .../components/watch-video-info/watch-video-info.sass         | 1 -
 2 files changed, 5 deletions(-)

diff --git a/src/renderer/components/watch-video-comments/watch-video-comments.js b/src/renderer/components/watch-video-comments/watch-video-comments.js
index da51a0dc8a330..61259d30673fd 100644
--- a/src/renderer/components/watch-video-comments/watch-video-comments.js
+++ b/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'
     ])
diff --git a/src/renderer/components/watch-video-info/watch-video-info.sass b/src/renderer/components/watch-video-info/watch-video-info.sass
index 2d58f80ee946a..9e8c109698a51 100644
--- a/src/renderer/components/watch-video-info/watch-video-info.sass
+++ b/src/renderer/components/watch-video-info/watch-video-info.sass
@@ -12,7 +12,6 @@
   margin: 0 0 24px
   word-break: break-word
   display: block
-  margin-block-start: 1em
   margin-block-end: 1em
   margin-inline-start: 0px
   margin-inline-end: 0px