Passing example of WCAG 2.4.11 Focus Not Obscured
The controls below are a working example of passing the "User-opened content" portion of this criterion by ensuring overlaying elements can be dismissed without requiring a user to advance focus from the obscured element. This particular example uses the popover attribute where the escape key can be used to dismiss the popover at any time. Alternatively, you can add the focusout listener to auto-dismiss the popover as soon as the focus moves outside of it. Please note that different popovers may be expected to auto-dismiss on focus out, while others may remain visible.
Working Example
A 'toggle tip' (a.k.a., 'more info balloon') made with the popover attribute.
This is just a long block of text that is designed to create a popover that obscures the edit control. When you press Tab once, the focus will shift to this link. When you press Tab a second time, focus will shift to the edit control. You can dismiss this popover at any time by pressing the Escape key. If you have enabled the focusout listener, the popover will auto-hide when the focus shifts outside the popover.
Alternate dismissal method
Enable the focusout listener to cause the popover to auto-dismiss when the focus shifts outside the popover. If the popover automatically closes when focus has left it, then the popover will not be able to obscure an element receiving the focus "beneath" the popover.