diff --git a/src/renderer/views/Channel/Channel.js b/src/renderer/views/Channel/Channel.js index 1f7462f8812bd..4804dd9a45881 100644 --- 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 index 395dbba1c4550..306bb6c78766d 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)"