View Page - Watch popup : Keyboard focus does not move inside popup contents.

Issue Summary

Focus doesn’t move inside the popup content when user activates the "Watch" link in the main content.

Steps to Reproduce

1. Navigate to the Confluence homepage.
2. Activate the "Spaces" menu in header section.
3. Activate any team space link from the menu.
4. Activate the "Watch" link in main content.
5. Observe that the focus doesn’t go inside popup contents.

Actual Results

While navigating with Keyboard, when user activates the "Watch" link & press tab to navigate, the focus doesn’t go inside the popup contents. Instead the focus goes to next elements such as "share", "more options", etc. 

The code of the watch popup is placed at the end of the DOM order incorrectly. This makes keyboard as well as screen reader users difficult to access the popup contents effectively.

Expected Results

When user activates the "Watch" link the next focus should be set on the popup contents. As soon as the popup is expanded set the focus on the <h2> element.

Apply following fixes in code.

• Provide tabindex="-1" to <h2> element & use script to set the focus on it.
• Place the code of the popup right after the code of "Watch" link in DOM order.

Screenshot

Screen Recording

Screen Recording 2022-04-16 at 4.58.30 PM.mov

Workaround

Currently there is no known workaround for this behavior. A workaround will be added here when available

Bug Ref: 725276