feat(coral): Add temporary Modal component

[programmiri]

About this change - Why

• We now have multiple user journeys where user can cancel or submit forms and get redirected to a different page without warning / information why this is happening.
• The Modal from Aquarium design system uses react-aria, which currently does not work in React18 StrictMode.
• I added a temporary implementation to create a better usability for our users, especially since we're going to add more forms now. This gives us time to see if the mentioned issue is getting fixed or to decide how we want to continue with this.

About this change - What

• uses dialog and aria-modal to support assistive technology
• setFocus in Modal is removing focus and focusability from #root while setting focus on the h1 element (it's sometimes recommended to set the focus on the first / primary action, but that leads to confusing information for screen reader users as I think, so I oped for this)
  • Firefox is the only browser that does not support the inert attribute, so in case the user agent is FF there's a special handling to trap user in modal
  • setting it on h1 enables screen reader user (tested with VO) to access content in dialog easily
• adds a event listener to enable user to close modal with ESC (when it's closable)

Screen recordings

Chrome (keyboard)

chrome-keyboard.mov

Chrome (voice over)

chrome-vo.mov

Firefox (keyboard)

firefox.mov

Notes about potential optimisation

• the Modal css uses a z-index, since one element (FileInput) uses one already. It would be good to add defined variables and values for z-index, otherwise this could get messy in the future
• the minWidth for the modal dialog element is an arbitrary value to prevent layout breaks. It does not use a valid TW value here, but I could not find a fitting one.
• it would be ideal to test this with different screen reader, since they support the elements / aria attributes differently and it's possible that we could improve this for the other SR more.

[mathieu-anderson]

The only problem I noticed was that position: absolute with 100vh results in the backdrop not extending beyond the initial viewport :o I think it's fixed by position:fixed.

Screen.Recording.2023-02-07.at.09.05.07.mov

However, I would like to examine our use of StrictMode and the fact that we seem to prioritize it, leading to jumping through hoops like this.

What does StrictMode bring us? It's a debugging tool that runs in development. It's very useful. But is it so useful that we want to implement that kind of workaround to keep it? Or may we consider disabling it when working on features that are not possible in a StrictMode context, and then enable it again when merging to master?

I guess this has the side effect of needing a warning in the documentation on with inline comments for people wanting to run coral locally.

I don't know what is the right solution, but I'm pretty wary of the time and effort we devote to working around StrictMode :/

[programmiri]

The only problem I noticed was that position: absolute with 100vh results in the backdrop not extending beyond the initial viewport :o I think it's fixed by position:fixed.

🤦 yes, of course! Will update.

I don't know what is the right solution, but I'm pretty wary of the time and effort we devote to working around StrictMode :/
I mean, we're not working around StrictMode, we're working with it ^^

I don't think having to remove <StrictMode> during development in certain areas and adding it back in again before merging is a sustainable thing to do. That would mean that people checking out main and running coral locally would will have areas that are not working (bc strict mode is there) and would have somehow learn why and how do enabled them.

We can only remove StrictMode completely. Not sure if we want to do it. I think it can be quite useful to warn about potential problems.

And: Even using Modal from DS we have to add workarounds to provide more accessibility. So we're getting 2 things for the price of one 😅 And the same was true for the workaround for tooltips!

[programmiri]

@mathieu-anderson updated the modal and example!
position: fixed is supported in all main browser, only exception is the current Opera mini but I think that's ok for us ^^

[mathieu-anderson]

Thank you!