From a6708f1201b639e07ae3be5d8fe7efecc84547c3 Mon Sep 17 00:00:00 2001
From: vallode <18506096+vallode@users.noreply.github.com>
Date: Sun, 5 Jun 2022 12:03:18 +0200
Subject: [PATCH 1/6] Improve channel info bar

---
 src/renderer/views/Channel/Channel.css | 47 ++++++++++-----
 src/renderer/views/Channel/Channel.vue | 79 +++++++++++++-------------
 2 files changed, 74 insertions(+), 52 deletions(-)

diff --git a/src/renderer/views/Channel/Channel.css b/src/renderer/views/Channel/Channel.css
index 1c7109bcfe925..957b563434c1f 100644
--- a/src/renderer/views/Channel/Channel.css
+++ b/src/renderer/views/Channel/Channel.css
@@ -6,7 +6,7 @@
 }
 
 .channelDetails {
-  padding: 0 0 16px;
+  padding: 0;
 }
 
 .channelBannerContainer {
@@ -65,38 +65,50 @@
 
 .channelSearch {
   width: 200px;
+  margin-left: auto;
   align-self: flex-end;
+  flex: 1 1 0%;
 }
 
 .sortSelect {
-  align-self: flex-end;
+  margin-left: auto;
 }
 
 .channelInfoTabs {
   position: relative;
   width: 100%;
-  margin-top: -16px;
-  margin-bottom: -13px;
+  height: 85px;
+  justify-content: unset;
+  gap: 32px;
+}
+
+.tabs {
+  display: flex;
+  flex: 0 1 33%;
 }
 
 .tab {
   padding: 15px;
   font-size: 15px;
   cursor: pointer;
+  flex: 1 1 0%;
   align-self: flex-end;
+  text-align: center;
   color: var(--tertiary-text-color);
+  border-bottom: 3px solid transparent;
 }
 
-.selectedTab {
-  color: var(--primary-text-color);
-  border-bottom: 3px solid var(--primary-color);
-  margin-bottom: -3px;
+.tab:hover {
   font-weight: bold;
-  box-sizing: border-box;
+  border-bottom: 3px solid var(--tertiary-text-color);
 }
 
-.tab:hover {
+.selectedTab,
+.selectedTab:hover {
+  color: var(--primary-text-color);
+  border-bottom: 3px solid var(--primary-color);
   font-weight: bold;
+  box-sizing: border-box;
 }
 
 .aboutTab {
@@ -117,10 +129,6 @@
   margin-top: 10px;
 }
 
-.elementList {
-  margin-top: 15px;
-}
-
 .elementListLoading {
   margin-top: 200px;
 }
@@ -154,3 +162,14 @@
 .channelLineContainer p {
   margin: 0;
 }
+
+@media only screen and (max-width: 800px) {
+  .channelInfoTabs {
+    height: auto;
+    flex-flow: column-reverse;
+  }
+
+  .channelSearch {
+    width: 100%;
+  }
+}
diff --git a/src/renderer/views/Channel/Channel.vue b/src/renderer/views/Channel/Channel.vue
index 1d6c3195898b3..f02d549031aee 100644
--- a/src/renderer/views/Channel/Channel.vue
+++ b/src/renderer/views/Channel/Channel.vue
@@ -64,51 +64,36 @@
           v-if="!errorMessage"
           class="channelInfoTabs"
         >
-          <div
-            class="tab"
-            :class="(currentTab==='videos')?'selectedTab':''"
-            @click="changeTab('videos')"
-          >
-            {{ $t("Channel.Videos.Videos").toUpperCase() }}
-          </div>
-          <div
-            class="tab"
-            :class="(currentTab==='playlists')?'selectedTab':''"
-            @click="changeTab('playlists')"
-          >
-            {{ $t("Channel.Playlists.Playlists").toUpperCase() }}
-          </div>
-          <div
-            class="tab"
-            :class="(currentTab==='about')?'selectedTab':''"
-            @click="changeTab('about')"
-          >
-            {{ $t("Channel.About.About").toUpperCase() }}
+          <div class="tabs">
+            <div
+              class="tab"
+              :class="(currentTab==='videos')?'selectedTab':''"
+              @click="changeTab('videos')"
+            >
+              {{ $t("Channel.Videos.Videos").toUpperCase() }}
+            </div>
+            <div
+              class="tab"
+              :class="(currentTab==='playlists')?'selectedTab':''"
+              @click="changeTab('playlists')"
+            >
+              {{ $t("Channel.Playlists.Playlists").toUpperCase() }}
+            </div>
+            <div
+              class="tab"
+              :class="(currentTab==='about')?'selectedTab':''"
+              @click="changeTab('about')"
+            >
+              {{ $t("Channel.About.About").toUpperCase() }}
+            </div>
           </div>
+
           <ft-input
             :placeholder="$t('Channel.Search Channel')"
             :select-on-focus="true"
             class="channelSearch"
             @click="newSearch"
           />
-          <ft-select
-            v-show="currentTab === 'videos'"
-            class="sortSelect"
-            :value="videoSelectValues[0]"
-            :select-names="videoSelectNames"
-            :select-values="videoSelectValues"
-            :placeholder="$t('Search Filters.Sort By.Sort By')"
-            @change="videoSortBy = $event"
-          />
-          <ft-select
-            v-show="currentTab === 'playlists'"
-            class="sortSelect"
-            :value="playlistSelectValues[0]"
-            :select-names="playlistSelectNames"
-            :select-values="playlistSelectValues"
-            :placeholder="$t('Search Filters.Sort By.Sort By')"
-            @change="playlistSortBy = $event"
-          />
         </ft-flex-box>
       </div>
     </ft-card>
@@ -146,6 +131,24 @@
           />
         </ft-flex-box>
       </div>
+      <ft-select
+        v-show="currentTab === 'videos'"
+        class="sortSelect"
+        :value="videoSelectValues[0]"
+        :select-names="videoSelectNames"
+        :select-values="videoSelectValues"
+        :placeholder="$t('Search Filters.Sort By.Sort By')"
+        @change="videoSortBy = $event"
+      />
+      <ft-select
+        v-show="currentTab === 'playlists'"
+        class="sortSelect"
+        :value="playlistSelectValues[0]"
+        :select-names="playlistSelectNames"
+        :select-values="playlistSelectValues"
+        :placeholder="$t('Search Filters.Sort By.Sort By')"
+        @change="playlistSortBy = $event"
+      />
       <ft-loader
         v-if="isElementListLoading"
       />

From 7bc6d35661acd04de1aed049a4e556d331bf3b8c Mon Sep 17 00:00:00 2001
From: vallode <18506096+vallode@users.noreply.github.com>
Date: Wed, 8 Jun 2022 13:39:23 +0200
Subject: [PATCH 2/6] Reduce width of channel search bar

---
 src/renderer/views/Channel/Channel.css | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/renderer/views/Channel/Channel.css b/src/renderer/views/Channel/Channel.css
index 957b563434c1f..f48f49db5aa85 100644
--- a/src/renderer/views/Channel/Channel.css
+++ b/src/renderer/views/Channel/Channel.css
@@ -127,6 +127,7 @@
 
 .channelSearch {
   margin-top: 10px;
+  max-width: 320px;
 }
 
 .elementListLoading {
@@ -171,5 +172,6 @@
 
   .channelSearch {
     width: 100%;
+    max-width: none;
   }
 }

From 0fc552194886d682ff369863e7a95b5bb8cb6eeb Mon Sep 17 00:00:00 2001
From: ChunkyPtogrammer <78101139+ChunkyProgrammer@users.noreply.github.com>
Date: Tue, 20 Dec 2022 09:00:06 -0500
Subject: [PATCH 3/6] fix sizing

---
 src/renderer/views/Channel/Channel.css | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/renderer/views/Channel/Channel.css b/src/renderer/views/Channel/Channel.css
index 8b10f5ff81b88..e0f1ca39294d0 100644
--- a/src/renderer/views/Channel/Channel.css
+++ b/src/renderer/views/Channel/Channel.css
@@ -87,9 +87,10 @@
 .channelInfoTabs {
   position: relative;
   width: 100%;
-  height: 85px;
+  height: auto;
   justify-content: unset;
   gap: 32px;
+  padding: .3em 0;
 }
 
 .tabs {
@@ -137,7 +138,7 @@
 
 .channelSearch {
   margin-top: 10px;
-  max-width: 320px;
+  max-width: 250px;
 }
 
 .elementListLoading {

From 4e7977159421704e5fb1b59b47c5830711a4e6e6 Mon Sep 17 00:00:00 2001
From: ChunkyPtogrammer <78101139+ChunkyProgrammer@users.noreply.github.com>
Date: Tue, 20 Dec 2022 10:30:10 -0500
Subject: [PATCH 4/6] improve channel view accessibility

Co-Authored-By: Jason <84899178+jasonhenriquez@users.noreply.github.com>
---
 .../ft-channel-bubble/ft-channel-bubble.js    | 16 +++++++-
 .../ft-channel-bubble/ft-channel-bubble.vue   |  8 +++-
 src/renderer/views/Channel/Channel.js         | 33 ++++++++++++++++-
 src/renderer/views/Channel/Channel.vue        | 37 ++++++++++++++++++-
 4 files changed, 89 insertions(+), 5 deletions(-)

diff --git a/src/renderer/components/ft-channel-bubble/ft-channel-bubble.js b/src/renderer/components/ft-channel-bubble/ft-channel-bubble.js
index d9752676b97ed..6f9babd20b826 100644
--- a/src/renderer/components/ft-channel-bubble/ft-channel-bubble.js
+++ b/src/renderer/components/ft-channel-bubble/ft-channel-bubble.js
@@ -1,5 +1,5 @@
 import Vue from 'vue'
-
+import { sanitizeForHtmlId } from '../../helpers/accessibility'
 export default Vue.extend({
   name: 'FtChannelBubble',
   props: {
@@ -21,8 +21,20 @@ export default Vue.extend({
       selected: false
     }
   },
+  computed: {
+    sanitizedId: function() {
+      return 'channelBubble' + sanitizeForHtmlId(this.channelName)
+    }
+  },
   methods: {
-    handleClick: function () {
+    handleClick: function (event) {
+      if (event instanceof KeyboardEvent) {
+        if (event.target.getAttribute('role') === 'link' && event.key !== 'Enter') {
+          return
+        }
+        event.preventDefault()
+      }
+
       if (this.showSelected) {
         this.selected = !this.selected
       }
diff --git a/src/renderer/components/ft-channel-bubble/ft-channel-bubble.vue b/src/renderer/components/ft-channel-bubble/ft-channel-bubble.vue
index 7e9cd68d8bc09..eb761583d40bb 100644
--- a/src/renderer/components/ft-channel-bubble/ft-channel-bubble.vue
+++ b/src/renderer/components/ft-channel-bubble/ft-channel-bubble.vue
@@ -1,7 +1,10 @@
 <template>
   <div
     class="bubblePadding"
+    tabindex="0"
+    :aria-labelledby="sanitizedId"
     @click="handleClick"
+    @keydown.space.enter.prevent="handleClick(event)"
   >
     <img
       class="bubble"
@@ -16,7 +19,10 @@
         class="icon"
       />
     </div>
-    <div class="channelName">
+    <div
+      :id="sanitizedId"
+      class="channelName"
+    >
       {{ channelName }}
     </div>
   </div>
diff --git a/src/renderer/views/Channel/Channel.js b/src/renderer/views/Channel/Channel.js
index ec66b5b37caf0..f97b4d738f219 100644
--- a/src/renderer/views/Channel/Channel.js
+++ b/src/renderer/views/Channel/Channel.js
@@ -67,6 +67,11 @@ export default Vue.extend({
       playlistSelectValues: [
         'last',
         'newest'
+      ],
+      tabInfoValues: [
+        'videos',
+        'playlists',
+        'about'
       ]
     }
   },
@@ -651,8 +656,34 @@ export default Vue.extend({
       }
     },
 
-    changeTab: function (tab) {
+    changeTab: function (tab, event) {
+      if (event instanceof KeyboardEvent) {
+        // use arrowkeys to navigate
+        event.preventDefault()
+        if (event.key === 'ArrowLeft' || event.key === 'ArrowRight') {
+          const index = this.tabInfoValues.indexOf(tab)
+
+          // focus left or right tab with wrap around
+          tab = (event.key === 'ArrowLeft')
+            ? this.tabInfoValues[(index > 0 ? index : this.tabInfoValues.length) - 1]
+            : this.tabInfoValues[(index + 1) % this.tabInfoValues.length]
+
+          const tabNode = document.getElementById(`${tab}Tab`)
+          event.target.setAttribute('tabindex', '-1')
+          tabNode.setAttribute('tabindex', 0)
+          tabNode.focus({ focusVisible: true })
+          return
+        }
+      }
+
+      const currentTabNode = document.querySelector('.tabs > .tab[aria-selected="true"]')
+      const newTabNode = document.getElementById(`${tab}Tab`)
+      document.querySelector('.tabs > .tab[tabindex="0"]').setAttribute('tabindex', '-1')
+      newTabNode.setAttribute('tabindex', '0')
+      currentTabNode.setAttribute('aria-selected', 'false')
+      newTabNode.setAttribute('aria-selected', 'true')
       this.currentTab = tab
+      newTabNode.focus({ focusVisible: true })
     },
 
     newSearch: function (query) {
diff --git a/src/renderer/views/Channel/Channel.vue b/src/renderer/views/Channel/Channel.vue
index d194d4b789663..3d25f9a7ff9f9 100644
--- a/src/renderer/views/Channel/Channel.vue
+++ b/src/renderer/views/Channel/Channel.vue
@@ -30,6 +30,7 @@
             <img
               class="channelThumbnail"
               :src="thumbnailUrl"
+              alt=""
             >
             <div
               class="channelLineContainer"
@@ -73,25 +74,47 @@
           v-if="!errorMessage"
           class="channelInfoTabs"
         >
-          <div class="tabs">
+          <div
+            class="tabs"
+            role="tablist"
+            :aria-label="$t('Channel.Channel Tabs')"
+          >
             <div
+              id="videosTab"
               class="tab"
               :class="(currentTab==='videos')?'selectedTab':''"
+              role="tab"
+              aria-selected="true"
+              aria-controls="videoPanel"
+              tabindex="0"
               @click="changeTab('videos')"
+              @keydown.left.right.enter.space="changeTab('videos', $event)"
             >
               {{ $t("Channel.Videos.Videos").toUpperCase() }}
             </div>
             <div
+              id="playlistsTab"
               class="tab"
+              role="tab"
+              aria-selected="false"
+              aria-controls="playlistPanel"
+              tabindex="-1"
               :class="(currentTab==='playlists')?'selectedTab':''"
               @click="changeTab('playlists')"
+              @keydown.left.right.enter.space="changeTab('playlists', $event)"
             >
               {{ $t("Channel.Playlists.Playlists").toUpperCase() }}
             </div>
             <div
+              id="aboutTab"
               class="tab"
+              role="tab"
+              aria-selected="false"
+              aria-controls="aboutPanel"
+              tabindex="-1"
               :class="(currentTab==='about')?'selectedTab':''"
               @click="changeTab('about')"
+              @keydown.left.right.enter.space="changeTab('about', $event)"
             >
               {{ $t("Channel.About.About").toUpperCase() }}
             </div>
@@ -112,6 +135,7 @@
     >
       <div
         v-if="currentTab === 'about'"
+        id="aboutPanel"
         class="aboutTab"
       >
         <h2>
@@ -136,6 +160,7 @@
             :channel-name="channel.author || channel.channelName"
             :channel-id="channel.channelId"
             :channel-thumbnail="channel.authorThumbnails[channel.authorThumbnails.length - 1].url"
+            role="link"
             @click="goToChannel(channel.channelId)"
           />
         </ft-flex-box>
@@ -167,7 +192,10 @@
       >
         <ft-element-list
           v-show="currentTab === 'videos'"
+          id="videoPanel"
           :data="latestVideos"
+          role="tabpanel"
+          aria-labelledby="videosTab"
         />
         <ft-flex-box
           v-if="currentTab === 'videos' && latestVideos.length === 0"
@@ -178,7 +206,10 @@
         </ft-flex-box>
         <ft-element-list
           v-show="currentTab === 'playlists'"
+          id="playlistPanel"
           :data="latestPlaylists"
+          role="tabpanel"
+          aria-labelledby="playlistsTab"
         />
         <ft-flex-box
           v-if="currentTab === 'playlists' && latestPlaylists.length === 0"
@@ -201,7 +232,11 @@
         <div
           v-if="showFetchMoreButton"
           class="getNextPage"
+          role="button"
+          tabindex="0"
           @click="handleFetchMore"
+          @keydown.space.prevent="handleFetchMore"
+          @keydown.enter.prevent="handleFetchMore"
         >
           <font-awesome-icon :icon="['fas', 'search']" /> {{ $t("Search Filters.Fetch more results") }}
         </div>

From 29d473c4cb22b1db7a70e60190cc6e954a38d013 Mon Sep 17 00:00:00 2001
From: ChunkyProgrammer <78101139+ChunkyProgrammer@users.noreply.github.com>
Date: Tue, 20 Dec 2022 21:21:33 -0500
Subject: [PATCH 5/6] Update
 src/renderer/components/ft-channel-bubble/ft-channel-bubble.js

Co-authored-by: PikachuEXE <pikachuexe@gmail.com>
---
 src/renderer/components/ft-channel-bubble/ft-channel-bubble.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/renderer/components/ft-channel-bubble/ft-channel-bubble.js b/src/renderer/components/ft-channel-bubble/ft-channel-bubble.js
index 6f9babd20b826..ca2a775cbadc2 100644
--- a/src/renderer/components/ft-channel-bubble/ft-channel-bubble.js
+++ b/src/renderer/components/ft-channel-bubble/ft-channel-bubble.js
@@ -1,5 +1,6 @@
 import Vue from 'vue'
 import { sanitizeForHtmlId } from '../../helpers/accessibility'
+
 export default Vue.extend({
   name: 'FtChannelBubble',
   props: {

From a8b7c4f1c3f08a1c0299f479cbd826f715d4759b Mon Sep 17 00:00:00 2001
From: ChunkyPtogrammer <78101139+ChunkyProgrammer@users.noreply.github.com>
Date: Tue, 20 Dec 2022 21:52:17 -0500
Subject: [PATCH 6/6] Stop space from clicking channel-bubble (links)

---
 src/renderer/components/ft-channel-bubble/ft-channel-bubble.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/renderer/components/ft-channel-bubble/ft-channel-bubble.vue b/src/renderer/components/ft-channel-bubble/ft-channel-bubble.vue
index eb761583d40bb..0f6563d4accd0 100644
--- a/src/renderer/components/ft-channel-bubble/ft-channel-bubble.vue
+++ b/src/renderer/components/ft-channel-bubble/ft-channel-bubble.vue
@@ -4,7 +4,7 @@
     tabindex="0"
     :aria-labelledby="sanitizedId"
     @click="handleClick"
-    @keydown.space.enter.prevent="handleClick(event)"
+    @keydown.space.enter.prevent="handleClick($event)"
   >
     <img
       class="bubble"