<div class="messages " role="alert" aria-live="polite" data-aos="fade-down" data-aos-anchor=".header" data-aos-anchor-placement="bottom-top">
<div class="message ">
This is simple info message. Have a nice day! If you believe it is the right one you can ignore this notice.
</div>
<div class="message message--success">
You have added this fantastic product to the shopping cart.
</div>
<div class="message message--error">
Please specify product's required options(s).
</div>
</div>
<div
class="messages {{ class }}"
role="alert"
aria-live="polite"
data-aos="fade-down"
data-aos-anchor=".header"
data-aos-anchor-placement="bottom-top"
>
{{ render '@message' }}
{{ render '@message--success' }}
{{ render '@message--error' }}
</div>
/* No context defined for this component. */
$messages__z-index : $z-index-high + 1 !default;
$messages__background-color: $white !default;
$messages__width : 100% !default;
.messages {
&--hidden-icons {
.message {
&:after {
display: none;
}
}
}
&__wrap {
display: block;
position: relative;
width: $messages__width;
top: 0;
background-color: $messages__background-color;
html:not(.no-js) &[data-aos^='fade'][data-aos^='fade'] {
pointer-events: all;
opacity: 1;
transform: none;
z-index: 0;
}
&.aos-animate {
position: fixed;
left: 0;
z-index: $messages__z-index;
}
}
}
It’s composed of message components. It’s a container for messages loaded dynamically (Magento default feature). It has by default HTML attributes:
role="alert" aria-live="polite" to be read properly by assistive technologies (#a11y);