Affected versions

• Fx101.0b2
• Fx102.a1

Affected platforms

• Windows 10
• macOS
• Ubuntu 20.04

Steps to reproduce

1. Launch Firefox.
2. Navigate to youtube and start playing a video.
3. Open PiP through any method (keyboard or pressing the PiP button).
4. With the PiP window in focus press tab multiple times.

Expected result

• The focus of the buttons is done a specific order (left to right is most commonly used).
  Close (X) -> Revert (to main window) -> Play -> Mute -> Close (X)

Actual result

• The circle/cycle is not done in a cohesive way. Eg:
  Close (X) -> Play -> Mute -> Revert (to main window) -> Close (X)

Regression range

• This is not a regression as the new mute button was added in Fx101 (maybe part of the enhancement work).

Additional notes

• The circle/cycle through buttons was done in an odd way, even before the implementation of the mute button (from right to left): Close (X) -> Play -> Revert (to main window) -> Close (X).

We set tabindex to determine which elements get focus first in keyboard navigation. The first element to get tabindex=1 (meaning the first to get focus) is the play/pause button. The mute/unmute audio and and most recently added closed-captions button are then focused in sequential order due to having the same tabindex values, whereas the unpip button then close button are called afterwards due to having tabindex=2 and tabindex=3 respectively.

Changing the focus order would simply require changing these values, but it seems that the order was intentional since we immediately focus on the play/pause button upon opening the PiP window.

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

I've reproduced the issue on Nightly 102.0a1 on Windows 10 using the STR from Comment 0.
Verified as fixed on Firefox 109.0b2 on Windows 10, macOS 13 and Ubuntu 22.04. When using Tab key, the buttons are focused in this order: Play/Pause -> Mute/Unmute -> Subtitles -> Close (X) -> Revert (to main window) -> Play/Pause