lasers
/
FreeTube
mirror of https://github.com/FreeTubeApp/FreeTube
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Fix channel tabs accessibility (#3689)

This commit is contained in:
absidue 2023-06-26 20:58:31 +02:00 committed by GitHub
parent 23d8af59f6
commit 0a471f8a17
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 12 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/renderer/views/Channel/Channel.js
View File

@ -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 })
},

24
src/renderer/views/Channel/Channel.vue
View File

@ -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)"