Saying right now that toast messages will need to have an aria-live attribute to ensure that they're announced to assistive technologies when they're shown / updated https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions

Toast, Spinner... You're on fire @mdo 👍
I totally like it !

Yes why not add some JS for example, to set Toast placement or to allow folks to set when the toast should be dismissed

Yes why not add some JS for example, to set Toast placement or to allow folks to set when the toast should be dismissed

If you have some vanilla JS to include in the docs, I'll be happy to see it added! :D

Guys, I have something here: https://codepen.io/odahcam/pen/oeoYxm
Also: https://github.com/odahcam/bootoast

It was designed for v3, but it's v4 compatibl. I'm working on a new version for 100% supoort BS4. 😀

v4 demonstration:

this is so cool ..

@patrickhlauke I've resolved conflicts and added a quick section to stub something out about accessibility for live regions. I'm not 100% on how they work or what's required though—can you take a pass at it before we merge this?

Do you have any thoughts about z-index of this toast component?

@ysds Without looking at whatever code I've written thus far, my guy says it should match or perhaps overlap navbars and modals. Perhaps somewhere between those and popovers/tooltips?

If you don't mind, I would like to share some ideas:

I think toasts should have higher index than popovers or tooltips, because the element where the tooltip or popover came from will not be visible when a toast appears over it and the tooltip or popover would still appear if the user don't move the cursor or if in a touch device. So toasts should overplace any visible content behind it.

Also, I think toasts should have a index smaller or the same as dialogs and dropdowns do, because users are focused in the content they're seeing in the dropdown and some dialogs should appear over any already placed toast, also a toast should not necessarily be placed over a dialog because they should force the user focus in the dialog itself, but the dialog could generate new toasts to show some updates.

Also, some kind of persistent dialog, with a higher index could be created and, for example, used to show some upload/download status, where sometimes you need to keep showing the progress.

@mdo Thanks for your response. Are you planning on adding z-index? If not, I think it should be documented.

I'll jump on it after we confirm a11y todos.

@odahcam See the variables file for our current z-index stack:

Tooltips/popovers are currently the highest priority, above modals and navbars, because any element within a modal or navbar can tigger a tooltip/popover. Toast could arguably have tooltips/popovers within them, but that doesn't seem as likely. I'm thinking they might go above? Will need to experiment a bit more, but they cannot go below modals and dropdowns.

sorry @mdo, I did not had time to take a deep look at the way this kinda things work.

So if everything is fixed, when I have an open popover and I open some modal, wont the popover persists over the modal? If it doesn't and the same logic works for the toasts, I think toasts could go between the modal and the popover, so users would be free to use tooltips and popovers as they want from the toast.

I just think that in no way the toast can have a higher z-index than the tooltip, because as long as toasts usually shows some short timing information, toasts could be well used to show extra timing info. Also, popovers could be used to confirm some toast's action.

would be nice to see this in action with a super-basic dynamic example. looking at this "cold", the live region advice seems appropriate (noted a few tweaks). sadly, live regions are quite fickle when it comes to the precise timing...generally, you'll want to keep a container with aria-live="..." "primed" in the document at first, and then inject things (like toasts) into it...generating both at the same time generally confuses browsers/assistive tech, as they don't have enough time to work out/watch the new live region for changes.

I made some changes with a fork of this to add theme color, JS example and z-index. Should I do a new PR ?
bastienmoulia@a94aeac

Hi @mdo, I updated your branch because I work on a small plugins for the Toastr

• Create Toast plugin
• Unit test
• Documentation

@patrickhlauke: I added your suggested text changes. If you could add the remaining aria-related suggestions we could merge this soon after a cleanup.

Some some docs changes, but I went and updated the aria roles. May have done too many of those? @patrickhlauke's comments mentioned polite, but the rest were assertive—which is it?