From 750d5912b024249854cc8d9c0769a6f9f149fc0a Mon Sep 17 00:00:00 2001
From: Kirill Braslavsky <k.braslavskyi@inpsyde.com>
Date: Tue, 2 Mar 2021 18:37:34 +0200
Subject: [PATCH] apply messages as elements of unordered list

---
 .../resources/js/modules/ErrorHandler.js      | 29 +++++++++++++++++--
 1 file changed, 27 insertions(+), 2 deletions(-)

diff --git a/modules/ppcp-button/resources/js/modules/ErrorHandler.js b/modules/ppcp-button/resources/js/modules/ErrorHandler.js
index 7a7d602e8..93e67ba1f 100644
--- a/modules/ppcp-button/resources/js/modules/ErrorHandler.js
+++ b/modules/ppcp-button/resources/js/modules/ErrorHandler.js
@@ -16,16 +16,41 @@ class ErrorHandler {
 
     message(text, persist = false)
     {
-        this.wrapper.classList.add('woocommerce-error');
+        let messagesList = this.prepareMessagesList();
         if (persist) {
             this.wrapper.classList.add('ppcp-persist');
         } else {
             this.wrapper.classList.remove('ppcp-persist');
         }
-        this.wrapper.innerHTML = this.sanitize(text);
+
+        let messageNode = this.prepareMessagesListItem(text);
+        messagesList.appendChild(messageNode);
+
         jQuery.scroll_to_notices(jQuery('.woocommerce-notices-wrapper'))
     }
 
+    prepareMessagesList()
+    {
+        let messagesList = document.querySelector('ul.woocommerce-error');
+
+        if(messagesList === null){
+            messagesList = document.createElement('ul');
+            messagesList.setAttribute('class', 'woocommerce-error');
+            messagesList.setAttribute('role', 'alert');
+            this.wrapper.appendChild(messagesList);
+        }
+
+        return messagesList;
+    }
+
+    prepareMessagesListItem(message)
+    {
+        const li = document.createElement('li');
+        li.innerHTML = message;
+
+        return li;
+    }
+
     sanitize(text)
     {
         const textarea = document.createElement('textarea');