Fix: permanent player tooltip

[Shadorc]

Pull Request Type

• Bugfix
• Feature Implementation
• Documentation
• Other

Related issue

closes #8046

Description

When a button is clicked, it gains :focus, and then, when a shortcut is used (it can be any button in the player and the button clicked does not need to be hovered anymore), the :focus-visible state becomes true and stay like this until the focus is lost by clicking elsewhere.
According to Shaka Player's CSS rules), the :focus-visible pseudo-class keeps the tooltip visible until focus is removed.

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

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

[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