Add aria-atomic to messages appearing on storefront

Author: bradleybrecher

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
@@ -16,7 +16,7 @@
     </div>
     <!-- /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" data-bind="foreach: { data: messages().messages, as: 'message' }" class="messages">
         <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-->