Add missing dialog features

[viniciusmuller]

Closes #2

[viniciusmuller]

Based on Radix's Dialog, it uses the referenced ARIA guide to implement accessibility.

I think we need to take a better look at this part:

Because marking a dialog modal by setting aria-modal to true can prevent users of some assistive technologies from perceiving content outside the dialog, users of those technologies will experience severe negative ramifications if a dialog is marked modal but does not behave as a modal for other users. So, mark a dialog modal only when both:

• Application code prevents all users from interacting in any way with content outside of it.
• Visual styling obscures the content outside of it.

We should find a way to detect if we're inside a backdrop and static dialog, and then set aria-model=true.

[thiagomajesk]

This is the checklist we have so far (with respective references):

• Content focus trap
• Add tabindex -1 to dialog content
• Add dialog role
• Set aria-modal true when the the dialog behaves like a modal
• Add aria-describedby attribute
• Add aria-labelledby attribute
• Add style pointer-events: auto
• Add arial-label "Close" to close button/ element
• Add aria-haspopup="dialog" to dialog trigger
• Add aria-expanded true | false to dialog trigger
• Add aria-hidden true to backdrop
• Add style pointer-events auto to backdrop

Update: Added some commits for you to test, specially this little refactor in the portal logic: b1815eb.

BTW, choose to left aria-modal="true" by default, as I think dialogs are mostly gonna be used for this purpose. I don't think we should think about this that much, since most implementations I've seen (like Headless UI for instance) does this. Also, after looking at Reakit docs, it became clear to me that there's no consensus on how non-modal dialogs should behave: https://reakit.io/docs/dialog/#non-modal-dialogs. If users don't want to use dialogs as modals they are free to override the defaults 👍.