1610334 - PIP feature in Firefox: The PIP close and un-PiP video buttons don't announce to NVDA/screen reader

Status: VERIFIED FIXED

(Toolkit :: Video/Audio Controls, defect, P1)

Description

[:Gijs (he/him)]

+++ This bug was initially created as a clone of Bug #1608923 +++

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/79.0.3945.88 Safari/537.36

Steps to reproduce:

I have a custom html5 video player that has audio, therefore, the new PIP button appears on hover.

In Firefox + Windows 10, turn on NVDA screen reader. I also use highlighter plugin on NVDA to see where focus moves, but you do you.

Hover the video and invoke the PIP.
PIP launches the video in focusTrap popup.
Tab onto this video.
Notice that NVDA focuses each video player button, but only announces "Button". Each time you tab to another button, NVDA says "Button".
The user doesn't know if they are on play, close, etc.

Actual results:

Using NVDA on a PIP video, the video player buttons do not announce. They only say "button"

Expected results:

Each button on the video player should announce its name to the screen reader. For example, if play button has NVDA focus, it should announce "Play"

A screen reader user would not know which button they need to use to control video playback or close the PIP video unless the buttons announce their proper names.

---

In this bug, we should come up with a label for the "close" button and the "un-PiP" button, ie the left-most button in the bottom control bar. Both buttons do the same thing: they close the PiP window and re-select the tab that originally contained (and will now once more contain) the video.

:mheubusch, could you help us come up with a text label for this button to be used in accessibility software? Something like "Close and re-select tab", or "Move video back into webpage" or something along those lines perhaps...

Comment 1

[Meridel [:meridel]]

Per Photon's accessibility guidelines, we should add a text label to all controls (i.e., add text to the icons in the PiP window): "Accessibility: All icons should have a text-based equivalent for screen readers. If your icon allows interactivity, give it a text label." source: https://design.firefox.com/photon/visuals/iconography.html

I believe that if we use a text label, we should not also have alt-text because a screenreader will read both text label and alt-text: "You should always have text labels next to icons. Assuming you do, the icon should not have an alt-text." source: https://axesslab.com/alt-texts/

Please see attached image for recommended text labels. Per the two buttons that close a PiP window:
-The two buttons that close PiP do not have the same functionality. The "X"/"Close" button closes the PiP window. It does NOT send the user back to the original tab and the original video should NOT be playing (the original video should be paused and a bug is being filed by Gijs).
-The "Send back to tab" button closes PiP window AND sends user back to original tab where the video IS playing.

Comment 2

[Meridel [:meridel]]

Attachment: PiP Text Labels 2020.png

Per Photon's accessibility guidelines, we should add a text label to all controls (i.e., add text to the icons in the PiP window): "Accessibility: All icons should have a text-based equivalent for screen readers. If your icon allows interactivity, give it a text label." source: https://design.firefox.com/photon/visuals/iconography.html

I believe that if we use a text label, we should not also have alt-text because a screenreader will read both text label and alt-text: "You should always have text labels next to icons. Assuming you do, the icon should not have an alt-text." source: https://axesslab.com/alt-texts/

Please see attached image for recommended text labels. Per the two buttons that close a PiP window:
-The two buttons that close PiP do not have the same functionality. The "X"/"Close" button closes the PiP window. It does NOT send the user back to the original tab and the original video should NOT be playing (the original video should be paused and a bug is being filed by Gijs).
-The "Send back to tab" button closes PiP window AND sends user back to original tab where the video IS playing.

I am not, however, an accessibility expert and so I would like Asa to comment on my note above about not needing alt-text in addition to text label.

Comment 3

[:Gijs (he/him)]

I filed bug 1611186 for "close should pause".

Comment 4

[:Gijs (he/him)]

(In reply to Meridel from comment #2)

I believe that if we use a text label, we should not also have alt-text because a screenreader will read both text label and alt-text: "You should always have text labels next to icons. Assuming you do, the icon should not have an alt-text." source: https://axesslab.com/alt-texts/

Yep, just a text label for the button is sufficient here. I will add an aria-label (which is not visually accessible to sighted users).

Comment 5

[:Gijs (he/him)]

Attachment: Bug 1610334 - add accessible labels to close/unpip buttons, r?mconley

Comment 6

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/ac2993473b87
add accessible labels to close/unpip buttons, r=mconley,fluent-reviewers,flod

Comment 7

[Cristina Coroiu [:ccoroiu]]

https://hg.mozilla.org/mozilla-central/rev/ac2993473b87

Comment 8

[Julien Cristau [:jcristau]]

I assume this will ride to 75 given the new strings.

Comment 9

[Alexandru Trif, Desktop QA [:atrif]]

Reproduced the issue using Firefox 74.0a1 (20200120154412) on Windows 10x64.
The issue is verified fixed with Firefox 75.0b7 on Windows 10x64.

Comment 10

[BugBot [:suhaib / :marco/ :calixte]]

Bugbug thinks this bug is a regression, but please revert this change in case of error.