ENGCOM-8120: Aria-atomic="true" missing on error container #27386

Author: sidolov

app/code/Magento/SalesRule/Test/Mftf/Section/DiscountSection.xml

@@ -14,6 +14,7 @@
         <element name="ApplyCodeBtn" type="button" selector="//span[text()='Apply Discount']"/>
         <element name="CancelCoupon" type="button" selector="//button[@value='Cancel Coupon']"/>
         <element name="DiscountVerificationMsg" type="text" selector=".message-success div"/>
+        <element name="DiscountVerificationMsgWithAriaAtomicProperty" type="text" selector=".message-success[aria-atomic=true] div"/>
         <element name="CancelCouponBtn" type="button" selector="#discount-form .action-cancel"/>
     </section>
 </sections>

app/code/Magento/Theme/Test/Mftf/Test/StoreFrontCheckNotificationMessageContainerTest.xml

@@ -0,0 +1,52 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+ /**
+  * Copyright © Magento, Inc. All rights reserved.
+  * See COPYING.txt for license details.
+  */
+-->
+
+<tests xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
+       xsi:noNamespaceSchemaLocation="urn:magento:mftf:Test/etc/testSchema.xsd">
+    <test name="StoreFrontCheckNotificationMessageContainerTest">
+        <annotations>
+            <features value="Message container"/>
+            <stories value="Message container selector"/>
+            <title value="Check notification message container"/>
+            <description value="Check aria-atomic property on notification container message"/>
+            <severity value="AVERAGE"/>
+            <testCaseId value="MC-37339"/>
+            <group value="Theme"/>
+        </annotations>
+        <before>
+            <createData entity="SimpleProduct2" stepKey="simpleProduct"/>
+            <createData entity="SalesRuleSpecificCouponAndByPercent" stepKey="createSalesRule"/>
+            <createData entity="SimpleSalesRuleCoupon" stepKey="createCouponForCartPriceRule">
+                <requiredEntity createDataKey="createSalesRule"/>
+            </createData>
+        </before>
+        <after>
+            <deleteData createDataKey="simpleProduct" stepKey="deleteProduct"/>
+            <deleteData createDataKey="createSalesRule" stepKey="deleteSalesRule"/>
+        </after>
+
+        <actionGroup ref="AssertProductNameAndSkuInStorefrontProductPageByCustomAttributeUrlKeyActionGroup" stepKey="openProductPageAndVerifyProduct">
+            <argument name="product" value="$$simpleProduct$$"/>
+        </actionGroup>
+        <actionGroup ref="StorefrontAddProductToCartWithQtyActionGroup" stepKey="addProductToTheCart">
+            <argument name="productQty" value="1"/>
+        </actionGroup>
+
+        <waitForElementVisible selector="{{StorefrontProductPageSection.alertMessage}}[aria-atomic=true]" stepKey="checkAddedToCartMessage"/>
+
+        <actionGroup ref="GoToCheckoutFromMinicartActionGroup" stepKey="goToCheckoutFromMinicart"/>
+        <actionGroup ref="GuestCheckoutFillingShippingSectionActionGroup" stepKey="guestCheckoutFillingShipping">
+            <argument name="shippingMethod" value="Flat Rate"/>
+        </actionGroup>
+        <actionGroup ref="StorefrontApplyDiscountCodeActionGroup" stepKey="applyCoupon">
+            <argument name="discountCode" value="$createCouponForCartPriceRule.code$"/>
+        </actionGroup>
+
+        <waitForElementVisible selector="{{DiscountSection.DiscountVerificationMsgWithAriaAtomicProperty}}" stepKey="checkCouponCodeApply"/>
+    </test>
+</tests>

app/code/Magento/Theme/view/frontend/templates/messages.phtml

@@ -6,7 +6,7 @@
 ?>
 <div data-bind="scope: 'messages'">
     <!-- ko if: cookieMessages && cookieMessages.length > 0 -->
-    <div role="alert" data-bind="foreach: { data: cookieMessages, as: 'message' }" class="messages">
+    <div aria-atomic="true" role="alert" data-bind="foreach: { data: cookieMessages, as: 'message' }" class="messages">
         <div data-bind="attr: {
             class: 'message-' + message.type + ' ' + message.type + ' message',
             'data-ui-id': 'message-' + message.type
@@ -17,7 +17,9 @@
     <!-- /ko -->
 
     <!-- ko if: messages().messages && messages().messages.length > 0 -->
-    <div role="alert" data-bind="foreach: { data: messages().messages, as: 'message' }" class="messages">
+    <div aria-atomic="true" role="alert" class="messages" data-bind="foreach: {
+        data: messages().messages, as: 'message'
+    }">
         <div data-bind="attr: {
             class: 'message-' + message.type + ' ' + message.type + ' message',
             'data-ui-id': 'message-' + message.type

app/code/Magento/Ui/view/frontend/web/template/messages.html

@@ -6,12 +6,12 @@
 -->
 <div data-role="checkout-messages" class="messages" data-bind="visible: isVisible(), click: removeAll">
     <!-- ko foreach: messageContainer.getErrorMessages() -->
-    <div role="alert" class="message message-error error">
+    <div aria-atomic="true" role="alert" class="message message-error error">
         <div data-ui-id="checkout-cart-validationmessages-message-error" data-bind="text: $data"></div>
     </div>
     <!--/ko-->
     <!-- ko foreach: messageContainer.getSuccessMessages() -->
-    <div role="alert" class="message message-success success">
+    <div aria-atomic="true" role="alert" class="message message-success success">
         <div data-ui-id="checkout-cart-validationmessages-message-success" data-bind="text: $data"></div>
     </div>
     <!--/ko-->