SelectPanel2: Use html dialog

[siddharthkp]

• Drop AnchoredOverlay in favor of html dialog
• using useAnchoredPosition for positioning now
• Implemented click outside behavior suggested by @maximedegreve, see code comment for full context

selectpanel-dialog.mov

Alt text: When a SelectPanel is opened, it renders a dialog with a focus trap, you see that the accessibility panel only shows a dialog. Pressing the Esc key closes the panel. Looking at the elements panel, you can see that the dialog is rendered in a top layer

---

Question for @maximedegreve related to html dialog:

[Answered] We decided clicking outside the panel should not close the panel, we still hold the same opinion? Is there something we can do to make this not feel like a bug? See demo in storybook.

Update: If the user clicks outside, we nudge the user to use the actions in the footer. See demo

[changeset-bot]

🦋 Changeset detected

Latest commit: a8430d4

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

This PR includes changesets to release 1 package

Name	Type
@primer/react	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

[github-actions]

size-limit report 📦

Path	Size
dist/browser.esm.js	104.75 KB (0%)
dist/browser.umd.js	105.3 KB (0%)

[maximedegreve]

Hey @siddharthkp

I've previously raised this concern within Slack as well.

The cancel and save buttons are visually clear to indicate confirming is required in the dialog. However, this pattern isn't obvious to everyone, which can be frustrating. This is particularly true for long-time users, who have been on our platform for over 10 years and may find these changes annoying. Additionally, clicking on the background without any response can make it seem as though we've deliberately worsened the user experience, especially for those who are not familiar with those accessible patterns.

The best thing I think we can do now is introducing a gelatine or bounce effect on the buttons when this annoyance occurs? This could be an interesting and engaging way to guide users towards understanding and adopting the new behavior, without giving the impression that we've overlooked something that is an accessibility requirement.

Jellatine.mov

[mperrotti]

I think this feels a little nicer when we speed it up to 350ms

[siddharthkp]

Done!

Here's a video to compare durations:

animation-duration.mov

[maximedegreve]

Love that you actually did this in the end! ❤️

[maximedegreve]

I couldn't see it in the code but is it disabled when reduced motion is on?

[mperrotti]

I really like @maximedegreve's suggestion to "highlight" the buttons when somebody tries to close by clicking the background scrim.

I think we should also add this functionality to Dialog. @maximedegreve and other reviewers - how do you feel about this? This doesn't have to be part of this PR - we could create a follow-up issue or PR to do this.

[broccolinisoup]

Looks great ✨ - just left a few notes