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:
- Tweak PictureInPictureChild so that a click event alone works without other pointer events.
- Add a click event handler to the PiP button in videocontrols.js (keeping the existing capturing listeners in PictureInPicture).
- 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.
- 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.