Fix channel tabs accessibility

[absidue]

Fix channel tabs accessibility

Pull Request Type

• Bugfix

Related issue

closes #3643

Description

This pull request fixes the channel tabs not behaving as expected when navigating them with the keyboard. This should bring it inline with https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/tab_role#keyboard_interaction.

Issues that are fixed:

1. Some unselected tabs were navigatable with the TAB key
2. Opening a channel link with a tab in it, wouldn't set the aria-selected and tabindex properties

Screenshots

see video in #3643 for a before view

Testing

tip: click on the share button twice (open and close) to set the focus on it, so that you don't have to TAB through the whole window to get to the channel tabs.

First test case

Check that only the currently selected tab can be visited by pressing the TAB key (you can select different tabs by using the arrow keys to change the focus and SPACE or ENTER to select a tab)

Second test case

1. Open https://www.youtube.com/@LinusTechTips/about
2. Check that the about tab is selected by default and that only it can be navigated to with the TAB key

Third test case

1. Focus the the channel search bar (e.g. by clicking on it)
2. Check that SHIFT+TAB sets the focus to the videos tab

Desktop

• OS: Windows
• OS Version: 10
• FreeTube version: 3c6e1d1

[PikachuEXE]

tip: click on the share button twice (open and close) to set the focus on it, so that you don't have to TAB through the whole window to get to the channel tabs.

I normally just use mouse to click near it and then tab

[PikachuEXE]

All tested

[efb4f5ff-1298-471a-8973-3d47447115dc]

Focus the the channel search bar (e.g. by clicking on it)
Check that SHIFT+TAB sets the focus to the videos tab

This goes in reverse direction for me, am i doing something wrong?

VirtualBoxVM_lsAjMNc04k.mp4

[ChunkyProgrammer]

This goes in reverse direction for me, am i doing something wrong?

Shift + Tab is supposed to go in reverse. Tab is supposed to go forward. Once you get to the Videos tab, the arrow keys should allow you to switch to shorts/live/community/ etc.

[efb4f5ff-1298-471a-8973-3d47447115dc]

Ah it says Video tab somehow i read Video page