tweak popover css

[keithamus]

Authors: Please fill out this form carefully and completely.

Reviewers: By approving this Pull Request you are approving the code change, as well as its deployment and mitigation plans.
Please read this description carefully. If you feel there is anything unclear or missing, please ask for updates.

What are you trying to accomplish?

Screenshots

N/A

Integration

List the issues that this change affects.

Fixes issues reported in https://github.com/orgs/community/discussions/52083#discussioncomment-5983786

Risk Assessment

• Low risk the change is small, highly observable, and easily rolled back.
• Medium risk changes that are isolated, reduced in scope or could impact few users. The change will not impact library availability.
• High risk changes are those that could impact customers and SLOs, low or no test coverage, low observability, or slow to rollback.

What approach did you choose and why?

I've tweaked the CSS to account for cases where the browser supports :open, :popover-open, both, or neither.

The trade-off is slightly more CSS. The risk is that future iterations on the CSS may cause regressions (but that was true anyway).

Anything you want to highlight for special attention from reviewers?

I've tested this in some specific browser combinations, and what used to be buggy behaviour is now consistent:

• Safari Technical Preview 166
• Chrome 113 (with Experimental Web Platform Features enabled)
• Seamonkey 2.53.16 (Firefox 91)
• Waterfox Classic 2022.11
• Qutebrowser 2.5.4 (Chromium 87)

I've also tested this with and without the upstream patches in oddbird/popover-polyfill#103 and it works identically in both, which is a very good sign.

Accessibility

• No new axe scan violation - This change does not introduce any new axe scan violations.

Merge checklist

• Added/updated tests
• Added/updated documentation
• Added/updated previews (Lookbook)
• Tested in Chrome
• Tested in Firefox
• Tested in Safari
• Tested in Edge

Take a look at the What we look for in reviews section of the contributing guidelines for more information on how we review PRs.

[changeset-bot]

🦋 Changeset detected

Latest commit: 8def7ce

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@primer/view-components	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[camertron]

Hey @keithamus, I looked into the build failure just now and discovered it's happening because we're using an older version of autoprefixer in docs/. We can't upgrade because our old version of Gatsby restricts which version of autoprefixer we can install. I think the solution here is to disable autoprefixer for primer_view_components.css, since it's already been run through autoprefixer by the build script. I went ahead and made that change to this PR. Looks like the build is passing now.

[keithamus]

Thanks for tackling that @camertron!