[Mobile] Disable focus on click of Big Play Button

[rtritto]

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:

2025-01-07.011304.mp4

Related:

• related code: /src/js/big-play-button.js
• Change/disable focus when Big Play Button is clicked #8954
• Play Control Button is focused on click of Big Play Button mister-ben/videojs-mobile-ui#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.

[gkatsev]

Looks like the last relevant change (#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.

[gkatsev]

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.

[Frenzie]

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));
   }
 
   /**

video.js/src/js/big-play-button.js

Lines 49 to 58 in c7298d4

	// exit early if clicked via the mouse
	if (this.mouseused_ && 'clientX' in event && 'clientY' in event) {
	silencePromise(playPromise);
	if (this.player_.tech(true)) {
	this.player_.tech(true).focus();
	}
	return;
	}

There's some documentation about how to work that out here: https://developer.mozilla.org/en-US/docs/Web/API/Touch/clientX

[mister-ben]

Checking for the "tap" event should suffice.

if (event.type === 'tap' || this.mouseused_ && 'clientX' in event && 'clientY' in event)