react-aria-modal demo

demo one

This modal

• has an invisible but still screen-reader-accessible title
• places initial focus on the deactivation button

demo two

This modal

• is vertically centered
• does not close when the underlay is clicked
• has a visible title (which is also used by the screen-reader)
• does not deliberately place focus, so the first element in the tab order receives focus
• has an internally scrolling region

demo three

This modal

• is tall enough that scrolling is required to see all of its content
• adds a tabIndex to the dialog element itself, without outline, so the focus trap still works but no focus outline is initially visible

demo four

This modal's active/inactive state is controlled with the active prop instead of mounting and unmounting.