[Toast] Manually reverse tab order

[andy-hook]

fixes #1322
builds on #1468

Most recent should be tabbed to first and unfortunately, most recent will be at the bottom of the viewport DOM.

As described in #1322 – We use portals to move Toasts into the Viewport, out of the box this causes issues with keyboard accessibility as the append only nature of portals means our source order places most recent toasts last. We were previously using mutation observer to re-order the DOM and solve for it, unfortunately this causes issues with animation libraries which depend on a stable DOM order.

After much investigation there appears to be no fool proof way to re-order DOM without causing issues downstream. Instead this change manages focus programatically so that the tab order reflects newest -> oldest toast without touching the DOM structure.

[benoitgrelard]

Looks like there's a regression in the toast order between foreground/background caught by Chromatic.

[andy-hook]

Looks like there's a regression in the toast order between foreground/background caught by Chromatic.

That’s expected right? we are choosing not to reorder which is why this is a breaking change.

[benoitgrelard]

haha of course! 🤦‍♂️ I thought somehow foreground/background had a particular ordering thing, but they don't really right? It's more about how they get announced/prioritised?

[andy-hook]

I thought somehow foreground/background had a particular ordering thing, but they don't really right

Not in the DOM sense no, they dictate the nature of the announcement. I assume that chromatic story is intended to validate DOM order though so perhaps it could be updated to make that clearer.

[benoitgrelard]

Yeah I think that's what confused me.