<AnchoredOverlay> needs to be upgraded to popover

[keithamus]

Description

<AnchoredOverlay> needs to be upgraded to popover

Steps to reproduce

.

Version

v36

Browser

No response

[joshblack]

Moved this back into the inbox to consider for prioritization since this is currently blocking an a11y audit issue 👀

[dipree]

Can we please add a problem statement here so it's easier to understand what upgrading to popover would be solving? Given the linked audit issue, I assume it has to do with the z-index?

[sampart]

For context, here's the problem we have: https://github.com/github/accessibility-audits/issues/7736#issuecomment-2192607566

And from Slack:

sampart at 2024-07-03 11:30 BST

:wave-darkgreen: We have a couple of z-index-related issues with our use of AnchoredOverlay (see screenshots). The containing div already has z-index: 1 (we didn’t explicitly set this, so I guess the component does it by default), and setting a z-index on the contained div.Overlay__StyledOverlay-* class doesn’t help. I’ve also tried setting a z-index: -1 on the TimelineBreak element, but that causes other visual issues. Any suggestions for how we can avoid this problem? :thank-you2:

keithamus at 2024-07-03 12:02 BST

Setting a very high z-index would be better but really we should make anchoredoverlay a popover

Here's why we couldn't change the z-index: https://github.com/github/accessibility-audits/issues/7736#issuecomment-2275237726

I'll leave @keithamus to create a problem statement in the issue description, since he understands this domain way better than me.