Prevent buttons from being focused on mouse click

Description

Every time I clicked on the control bar buttons. I saw that the clicked button was focused.
However, this behavior is fine but sometimes I want to have a possibility to disable this.
The outline should be visible when the user uses the keyboard keys to navigate through control bar buttons.
Can we add the new videojs option to enable/disable the control buttons from being focused on mouse click?
I want to have similar behavior like youtube player has now.
videojs-play-outline

Steps to reproduce

  1. Use mouse device to click on the control bar button for example: play or fullscreen.
  2. The clicked button will be focused and you will see the outline around it.

Results

Expected

The button is focused after mouse click but I don’t see the visual outline on it (which is good). The button outline should be shown when the user used the keyboard ‘tab’ key to navigate through control bar controls.

Actual

The button is focused and the outline is shown after the mouse click.

Additional Information

Please include any additional information necessary here. Including the following:

versions

videojs

lates

browsers

any

OSes

any

1 possible answer(s) on “Prevent buttons from being focused on mouse click

  1. Yeah, this is something we’ve been thinking about a lot. Specifically, there hasn’t been a good way to hide it for mouse users but keep it for keyboard users. Starting with v6, we opted that it’s better to have the outlines for mouse users to make keyboard and screen reader user’s experience better.

    It’s possible that we should just add something like the following, then when browsers implement it it’ll go away or we can direct users to the focus-visible polyfill.

    :focus:not(:focus-visible) { outline: none; }