Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

NVDA Windows Chrome & Firefox - Play button is repeated multiple times when clicked. #5023

Closed
waughcbw opened this issue Mar 15, 2018 · 7 comments
Labels
a11y This item might affect the accessibility of the player confirmed

Comments

@waughcbw
Copy link

waughcbw commented Mar 15, 2018

Description

Once NVDA focus is on the play button and the button is clicked, NVDA repeats the state of the button multiple times (Chrome 6 times, Firefox 3 times).

Steps to reproduce

With NVDA running, go to videojs.com and click the play button, either through enter key or mouse click.

Results

Expected

The state of the play button is stated only once when clicked.

Actual

The state of the play button is stated 6 times in Windows Chrome and 3 times in Windows Firefox when clicked. e.g. When the play button is clicked in Windows Chrome, NVDA will read "Play, Play, Play, Play, Play, Play".

Error output

N/A

Additional Information

versions

videojs

Latest version on video.js website.

browsers

Chrome, Firefox

OSes

Windows 7 & 10

plugins

@jiangtiandao
Copy link

jiangtiandao commented Apr 10, 2018

This issue still occur when focus is not on play button
Chrome will announce 4 times instead
My Firefox 60 beta even crashed.
Windows 8.1 Chrome 65.0.3325.181

@jiangtiandao
Copy link

jiangtiandao commented Apr 12, 2018

The interesting thing is what is announced is "Play Play lay Play Play Play"
The issue also occur on mute button

@jiangtiandao
Copy link

jiangtiandao commented Apr 12, 2018

http://jsbin.com/piqulisose/2/edit?html,js,console
This is a reduced example
If we use 5.0 Chrome will announce it twice which seems to be a Chrome bug.

@jiangtiandao
Copy link

jiangtiandao commented Apr 12, 2018

I found a workaround by removing title attribute of original play control button .

<button class="vjs-play-control vjs-control vjs-button" type="button" aria-live="polite" title="Play" aria-disabled="false">
<span aria-hidden="true" class="vjs-icon-placeholder">
</span>
<span class="vjs-control-text">Play</span>
</button>

If we remove inner span will reduce 2 times in Chrome.
If we remove the title attribute will reduce 4 times in Chrome.
So remove the title attribute would be a quick fix.

@gkatsev gkatsev added the a11y This item might affect the accessibility of the player label May 1, 2018
@gkatsev
Copy link
Member

gkatsev commented May 1, 2018

Hey, thanks for the issue. We knew this has been happening but haven't had a chance to take a look at it. The title attribute was originally added so that you can visually read what a button that only had an icon but this is clearly causing issues. The plan is to go with removing the title attribute and add our own tooltip.

@alex-barstow
Copy link
Contributor

This is reproducible without Video.js as well: http://solutions.brightcove.com/abarstow/BC-39639/nvda-test.html

OwenEdwards added a commit to OwenEdwards/video.js that referenced this issue May 9, 2018
… a button when its text label changes. Partial fix to videojs#5023
gkatsev pushed a commit that referenced this issue May 11, 2018
…me of a button when its text label changes. (#5158)

Move the aria-live attribute to the control text element within buttons, rather than on the whole button, so it is not affected by the change of the title attribute, only by the change of the control text.

It seems like having aria-live on the button itself means that JAWS and NVDA announce the button both when the button text changes and when the title attribute changes. NVDA speaks the new label more times because it announces the button text as the label and the title as the description, so it says, for example, "pause button pause". JAWS doesn't appear to do this, so it doesn't repeat it as many times.

Partially addresses #5023
gkatsev pushed a commit that referenced this issue May 11, 2018
…me of a button when its text label changes. (#5158)

Move the aria-live attribute to the control text element within buttons, rather than on the whole button, so it is not affected by the change of the title attribute, only by the change of the control text.

It seems like having aria-live on the button itself means that JAWS and NVDA announce the button both when the button text changes and when the title attribute changes. NVDA speaks the new label more times because it announces the button text as the label and the title as the description, so it says, for example, "pause button pause". JAWS doesn't appear to do this, so it doesn't repeat it as many times.

Partially addresses #5023
@gkatsev
Copy link
Member

gkatsev commented Jun 18, 2018

This should be fixed as part of #5158

@gkatsev gkatsev closed this as completed Jun 18, 2018
@github-actions github-actions bot locked as resolved and limited conversation to collaborators May 26, 2022
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
a11y This item might affect the accessibility of the player confirmed
Projects
None yet
Development

No branches or pull requests

4 participants