Accessible notifications with fixed tab order and floating on scroll

[jhung]

Is your feature request related to a problem?

Notifications need to be implemented in a way that is accessible and useful. If notifications appear at the top of the page, then it may not be visible if the view port is scrolled. Another implementation is to use a floating or fixed position notification so it's always visible on screen, but this may cause confusion with the tab order.

Describe the solution you'd like

A possible solution is to use a hybrid approach where a notification appears in a pre-determined area in the page (i.e. at the top of the document) and therefore appear in the standard document tab order and accessible in a predictable way.

If the user's viewport has the notification off-screen, then the notification will "float" visually (using CSS) so it isn't missed, but the notification remains in the original location in the DOM.

The tab order for the notification (close button) focusing the notification will bring focus back to the top of the page where the notification resides (even though it may have been floating because the viewport scrolled).

The actual implementation can vary as long as an accessible notification resides in a predictable location in the document.