Fix: permanent player tooltip

[Shadorc]

Pull Request Type

• Bugfix
• Feature Implementation
• Documentation
• Other

Related issue

closes #8046

Description

When hovering over a button displays a tooltip, using the button's keyboard shortcut causes the button to receive focus. According to Shaka Player's CSS rules (https://github.com/shaka-project/shaka-player/blob/main/ui/less/tooltip.less#L48), the :focus-visible pseudo-class keeps the tooltip visible until focus is removed.

Calling blur() after a keyboard shortcut is triggered, removing focus by clearing the :focus-visible state, hiding the tooltip.

There is a good explanation of the issue here twbs/bootstrap#18777 (comment)

Screenshots

No visible change to show

Testing

Scenario 1

1. Click on a player button, eg play/pause
2. Now use the shortcut for it, k
3. Label is now not permanently showing and does not obstruct other player labels

Scenario 2 (thanks aditya0155)

1. Click on a player button, eg play/pause
2. Now use the shortcut for another one, eg m
3. Label is now not permanently showing and does not obstruct other player labels

Desktop

• OS:
• OS Version:
• FreeTube version:

Additional context

[aditya0155]

I found a small edge case:

1. Click the Mute button with mouse
2. Do not click anywhere else and press k or Spacebar

minor_edge_case.mp4

[Shadorc]

Thanks for testing, it is indeed a bug! It comes from the fact that I only clear tooltip for the button corresponding to the shortcut key, but it could be a different tooltip shown.
It could be fixed by either calling blur on all buttons each times, the safest approach but the more maintenance-needed one, or call blur on the whole document.activeElement, but it could prevent specific feature like navigation with keyboards.
I will fix it using the first approach

[aditya0155]

edge_case.mp4

the edge case is fixed from my testing

[PikachuEXE]

Avoid creating a new array on every call

Suggested change

	// Blur player buttons to remove :focus-visible state, preventing tooltips from staying visible
	function blurTooltipButtons() {
	const buttonWithTooltipClasses = [
	'shaka-play-button',
	'shaka-fullscreen-button',
	'shaka-mute-button',
	'shaka-pip-button',
	'full-window-button',
	'theatre-button',
	'screenshot-button'
	]
	for (const buttonClass of buttonWithTooltipClasses) {
	const button = document.querySelector(`.${buttonClass}`)
	if (button) {
	button.blur()
	}
	}
	}
	// Blur player buttons to remove :focus-visible state, preventing tooltips from staying visible
	const buttonWithTooltipClasses = [
	'shaka-play-button',
	'shaka-fullscreen-button',
	'shaka-mute-button',
	'shaka-pip-button',
	'full-window-button',
	'theatre-button',
	'screenshot-button',
	]
	function blurTooltipButtons() {
	for (const buttonClass of buttonWithTooltipClasses) {
	const button = document.querySelector(`.${buttonClass}`)
	if (button) {
	button.blur()
	}
	}
	}