Fix channel tabs accessibility (#3689)

FreeTubeApp · Jun 26, 2023 · 0a471f8 · 0a471f8
1 parent 23d8af5
commit 0a471f8
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 20 deletions.
diff --git a/src/renderer/views/Channel/Channel.js b/src/renderer/views/Channel/Channel.js
@@ -1395,21 +1395,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
@@ -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)"