Open Bug 1665251 Opened 2 months ago Updated 1 month ago

Picture-in-picture (PiP) button can be tabbed to but not activated when focused for HTML5 videos


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




Tracking Status
firefox82 --- wontfix


(Reporter: asa, Unassigned, NeedInfo)


(Blocks 1 open bug)


(Keywords: access, Whiteboard: [access-s2])

If you open an HTML5 video and tab around, the first tab lands on the video frame. The second tab lands on the closed captions button. The third tab lands on the full-screen button. The next tab moves out of the video frame to what ever's next in the page. None of those tabs land you on the PiP button.

Steps to reproduce:

  1. Load the video at
  2. Tab to focus the video.
  3. Space to play the video.
  4. Tab again to focus the cc button.
  5. Tab again to focus the full-screen button.
  6. Tab again and focus leaves the video.

Results: none of the tabbing landed on the PiP button.

Expected results: After focusing the video, the next tab should focus (and make visible) the PiP button. Then pressing space or enter should activate PiP.

Tested with today's Nightly on Windows 10.

I'm wrong. The pip button does show up in the tab order but I can't seem to activate it.

Blocks: 492516
Severity: -- → S3
Priority: -- → P3
Summary: Picture-in-picture (PiP) button does not show up in the tab order for HTML5 videos → Picture-in-picture (PiP) button can be tabbed to but not activated when focused for HTML5 videos
Whiteboard: [access-s2]

Mike, I looked into this a bit (including your excellent in-tree documentation) and realised this is going to be a bit tricky to fix. So, I thought it might be useful to discuss the implementation before diving in.

First, I realise there's a keyboard shortcut for PIP and this is great. However, this is less discoverable than having the button in the tab order, so we also want this to work.

Because the PiP button doesn't have a simple click listener, the default keyboard handling for the button doesn't work. A few solutions come to mind:

  1. Tweak PictureInPictureChild so that a click event alone works without other pointer events.
  2. Add a click event handler to the PiP button in videocontrols.js (keeping the existing capturing listeners in PictureInPicture).
  3. Add a keypress/keydown listener to the PiP button in videocontrols.js. While we have to use a capturing listener on the root window for pointer events to prevent pages from doing things like skipping ads, pages bothering to do things like this for keyboard events is probably less likely.
  4. Add a capturing keypress/keydown listener in PictureInPictureChild.

Beyond keyboard activation, we also need to handle activation via a11y APIs. The a11y engine handles activation by simulating touchStart, mouseDown, touchEnd and mouseUp events:
Just to make things more complicated, the controls can be visually hidden (but still semantically present) as per bug 1622995. This means a11y activation needs to work even while the PiP button is visually hidden. That's probably going to cause problems for the PictureInPictureChild code which checks for occlusion. A11y does target the event directly at the button, so that might help us deal with this. Adding a click event listener directly to the PiP button (option 2 above) would fix this, but I guess pages could still capture the event and cause problems.

I'd be grateful for any guidance you can offer.

Flags: needinfo?(mconley)
You need to log in before you can comment on or make changes to this bug.