Custom Dialog component

[emplums]

We're currently using a 3rd party component to handle the interactions for the Dialog component. This was a great way to get the library started, but now that PRC is maturing, we should consider writing this component from scratch for a few reasons:

• More control over behaviors. Ideally this matches the details-dialog custom element behavior exactly
• Reduce bundle size. The current 3rd party component includes several dependencies that are increasing our bundlesize. I believe we'll see a 10-15% decrease in bundlesize by removing these.
• Full control over resolving any bugs that may come up

Feature List

Props

• onDismiss: function to call to close modal
• isOpen: boolean, whether or not the modal is open
• initialFocusRef: ref, ref to focus when modal is open
• returnFocusRef: ref, ref to focus when modal is closed

Behaviors

• handles keyboard navigation, traps focus inside the modal
• returns focus to proper element when Dialog is closed
• when user clicks outside the modal or presses Esc, we call onDismiss
• renders a grey overlay over whole page
• has role=dialog
• proper use of aria-label is documented
• Follows https://www.w3.org/TR/wai-aria-practices-1.2/#dialog_modal for a11y
• uses a Portal to position content on top of page going to leave this up to the consumer
• forwards refs

[emplums]

This has been merged into the 23.0.0 release branch 🎉