From 30832eeabb3d46a1865f16729380c7cc6200b2bb Mon Sep 17 00:00:00 2001
From: absidue <48293849+absidue@users.noreply.github.com>
Date: Tue, 20 Jun 2023 18:25:32 +0200
Subject: [PATCH] Fix channel tabs accessibility

---
 src/renderer/views/Channel/Channel.js  |  8 --------
 src/renderer/views/Channel/Channel.vue | 24 ++++++++++++------------
 2 files changed, 12 insertions(+), 20 deletions(-)

diff --git a/src/renderer/views/Channel/Channel.js b/src/renderer/views/Channel/Channel.js
index 27e2d97200880..8f48854eab3b7 100644
--- a/src/renderer/views/Channel/Channel.js
+++ b/src/renderer/views/Channel/Channel.js
@@ -1399,21 +1399,13 @@ export default defineComponent({
             : 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
         }
       }
 
-      // `currentTabNode` can be `null` on 2nd+ search
-      const currentTabNode = document.querySelector('.tabs > .tab[aria-selected="true"]')
       // `newTabNode` can be `null` when `tab` === "search"
       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 })
     },
diff --git a/src/renderer/views/Channel/Channel.vue b/src/renderer/views/Channel/Channel.vue
index 23b8b3a81d8f8..3d284d902f6c3 100644
--- a/src/renderer/views/Channel/Channel.vue
+++ b/src/renderer/views/Channel/Channel.vue
@@ -90,9 +90,9 @@
               class="tab"
               :class="(currentTab==='videos')?'selectedTab':''"
               role="tab"
-              aria-selected="true"
+              :aria-selected="String(currentTab === 'videos')"
               aria-controls="videoPanel"
-              tabindex="0"
+              :tabindex="(currentTab === 'videos' || currentTab === 'search') ? 0 : -1"
               @click="changeTab('videos')"
               @keydown.left.right.enter.space="changeTab('videos', $event)"
             >
@@ -104,9 +104,9 @@
               class="tab"
               :class="(currentTab==='shorts')?'selectedTab':''"
               role="tab"
-              aria-selected="true"
+              :aria-selected="String(currentTab === 'shorts')"
               aria-controls="shortPanel"
-              tabindex="0"
+              :tabindex="currentTab === 'shorts' ? 0 : -1"
               @click="changeTab('shorts')"
               @keydown.left.right.enter.space="changeTab('shorts', $event)"
             >
@@ -118,9 +118,9 @@
               class="tab"
               :class="(currentTab==='live')?'selectedTab':''"
               role="tab"
-              aria-selected="true"
+              :aria-selected="String(currentTab === 'live')"
               aria-controls="livePanel"
-              tabindex="0"
+              :tabindex="currentTab === 'live' ? 0 : -1"
               @click="changeTab('live')"
               @keydown.left.right.enter.space="changeTab('live', $event)"
             >
@@ -131,9 +131,9 @@
               id="playlistsTab"
               class="tab"
               role="tab"
-              aria-selected="false"
+              :aria-selected="String(currentTab === 'playlists')"
               aria-controls="playlistPanel"
-              tabindex="-1"
+              :tabindex="currentTab === 'playlists' ? 0 : -1"
               :class="(currentTab==='playlists')?'selectedTab':''"
               @click="changeTab('playlists')"
               @keydown.left.right.enter.space="changeTab('playlists', $event)"
@@ -145,9 +145,9 @@
               id="communityTab"
               class="tab"
               role="tab"
-              aria-selected="false"
+              :aria-selected="String(currentTab === 'community')"
               aria-controls="communityPanel"
-              tabindex="-1"
+              :tabindex="currentTab === 'community' ? 0 : -1"
               :class="(currentTab==='community')?'selectedTab':''"
               @click="changeTab('community')"
               @keydown.left.right.enter.space="changeTab('community', $event)"
@@ -158,9 +158,9 @@
               id="aboutTab"
               class="tab"
               role="tab"
-              aria-selected="false"
+              :aria-selected="String(currentTab === 'about')"
               aria-controls="aboutPanel"
-              tabindex="-1"
+              :tabindex="currentTab === 'about' ? 0 : -1"
               :class="(currentTab==='about')?'selectedTab':''"
               @click="changeTab('about')"
               @keydown.left.right.enter.space="changeTab('about', $event)"