output used to construct a "toast" component
Published:
Read additional information about output and this demo.
Note this demo makes no accommodations for mouse hover or keyboard focus within the popup message into account for delaying the automatic dismissal. Such functionality should be included in a more robust form of this demo.
Activating the "press me" button will inject content into an output element. CSS and JavaScript are then used to visually reveal and dismiss the message.
The dismiss button of the "toast" is not a child of the output element, but rather a sibling to it. This is so that it is not part of the live announcement of the element. Activating the dismiss button will return focus to the invoking element, so keyboard focus does not become 'lost'.