videojs
[Mobile] Disable focus on click of Big Play Button
Description
As default Video.js displays Big Play Button (vjs-big-play-button CSS class).
When vjs-big-play-button is clicked, the vjs-play-control is focused:
https://github.com/user-attachments/assets/5a8cd8b2-e0bd-4150-8763-8dbac4bd093e
Related:
- related code: /src/js/big-play-button.js
- https://github.com/videojs/video.js/discussions/8954
- https://github.com/mister-ben/videojs-mobile-ui/issues/185
Reproduction
https://stackblitz.com/edit/vercel-next-js-dykavrxx
Errors
No response
What version of Video.js are you using?
8.22.0
Video.js plugins used.
No response
What browser(s) including version(s) does this occur with?
Firefox 135
What OS(es) and version(s) does this occur with?
Windows 11
Solution (Draft)
On /src/js/big-play-button.js, use focus only when 'ontouchstart' in globalThis is false.
Looks like the last relevant change (https://github.com/videojs/video.js/pull/4497) was specifically to skip changing focus for mouse events. Maybe, it should be updated to instead only change focus on keyboard events instead of skipping mouse events.
Doing a stricter check for keyboard events is probably fine, but we'd need to confirm that it continues to function for Screen Readers. So, potentially, the easiest is to exclude touch events, unless VoiceOver on iOS, for example, uses touch events. In which case, it gets a bit trickier.
May be easier to have stricter focus styles.
After a quick peek I thought this might suffice, but it turns out the eventual event that reaches handleClick doesn't have clientX and clientY.
diff --git a/src/js/big-play-button.js b/src/js/big-play-button.js
index 2bc7b4a1..4cd0d799 100644
--- a/src/js/big-play-button.js
+++ b/src/js/big-play-button.js
@@ -20,6 +20,7 @@ class BigPlayButton extends Button {
this.setIcon('play');
this.on('mousedown', (e) => this.handleMouseDown(e));
+ this.on('touchstart', (e) => this.handleMouseDown(e));
}
/**
https://github.com/videojs/video.js/blob/c7298d40a4632a6e9dfcd5a2f5cc3bbe92a78744/src/js/big-play-button.js#L49-L58
There's some documentation about how to work that out here: https://developer.mozilla.org/en-US/docs/Web/API/Touch/clientX
Checking for the "tap" event should suffice.
if (event.type === 'tap' || this.mouseused_ && 'clientX' in event && 'clientY' in event)
