Use css to animate popups and the dialog element for accessibility

[oliverfoster]

Subject of the issue

Using velocity to animate the drawer and notify is not great.
Using tabindex + aria-hidden to manage popup layers is not great.

We can now use css to animate and the dialog element to control popup layers.

[kirsty-hames]

Using velocity to animate the drawer and notify is not great.

Agreed. This makes it difficult to override or customise the animation per project. Currently we have to edit core js or use !important styles in the theme.

Using tabindex + aria-hidden to manage popup layers is not great.

Agreed. The less behaviour to manually set the better. <dialog> boxes interrupt interaction with the rest of the page being inert (hidden and inactive). Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog

We can now use css to animate and the dialog element to control popup layers.

This offers greater flexibility for differing animation styles. From pre-defined CSS transitions to creating custom keyframe animations. Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog#animating_dialogs

[oliverfoster]

I've not used the @starting-style or anything from animating dialogs as we don't yet have support in firefox for @starting-style or overlay.

I've instead used a pattern similar to our onscreen behaviour (as you'd previously suggested) by using before and after classes on named animations. Here we have show and hide animations with a before and after state each.