Screen reader announces control names repeatedly

[taylor-steve]

Description

Our Office of Digital Accessibility has flagged some of our uses of Video.js for an issue in which some of the controls are announced multiple times in a row (e.g., "play play play"). We have an internal issue for that here: https://github.com/sul-dlss/sul-embed/issues/2237. We have constructed a reduced test case, and the issue persists.

Reduced test case

https://codepen.io/Steve-C-Taylor/pen/zYgmgXz

Steps to reproduce

1. Visit the reduced test case codepen in Chrome, Edge, or Firefox
2. Start your screen reader. We have been testing on MacOS, using the built-in VoiceOver tool via Command-F5
3. Click the "Big" play button
4. Click any of the smaller play/pause/mute controls

Errors

No response

What version of Video.js are you using?

8.19.1

Video.js plugins used.

No response

What browser(s) including version(s) does this occur with?

Chrome 130.0.6723.117, Firefox 128.4.0esr, Edge 130.0.2849.56

What OS(es) and version(s) does this occur with?

macOS Sonoma 14.6

[welcome[bot]]

👋 Thanks for opening your first issue here! 👋

If you're reporting a 🐞 bug, please make sure you include steps to reproduce it. We get a lot of issues on this repo, so please be patient and we will get back to you as soon as we can. To help make it easier for us to investigate your issue, please follow the contributing guidelines.

[mister-ben]

It might be because "play" or "pause" is set as both a title attribute and as a text node, although that's only two.

[taylor-steve]

Digging into this more, there's history:

https://github.com/videojs/video.js/issues/5023 https://github.com/videojs/video.js/pull/5158

I think you are on the right track. I did some more local testing. For some reason locally it only repeats twice.

When I disable the title attribute in the controlText, it still repeats. I think it's once for the interaction and once for the aria-live. If I don't interact with the controls directly, by using player.play()/player.pause(), it only reads it once. Presumably from the aria-live.

Removing the aria-live fixes the repeat via direct interaction, but then the screen reader no longer announces the programmatic state change, so I don't think that's a valid solution.