Merge pull request #88 from l3szcz/master

Fix close button to be semantic html
apvarun · Dec 5, 2021 · 5725170 · 5725170
2 parents d21c577 + 5a1333e
commit 5725170
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 6 deletions.
diff --git a/src/toastify-es.js b/src/toastify-es.js
@@ -238,10 +238,11 @@ class Toastify {
       // Adding a close icon to the toast
       if (this.options.close === true) {
         // Create a span for close element
-        let closeElement = document.createElement("span");
-        closeElement.innerHTML = "&#10006;";
-
+        let closeElement = document.createElement("button");
+        closeElement.type = "button";
+        closeElement.setAttribute("aria-label", "Close");
         closeElement.className = "toast-close";
+        closeElement.innerHTML = "&#10006;";
 
         // Triggering the removal of toast from DOM on close click
         closeElement.addEventListener(

diff --git a/src/toastify.css b/src/toastify.css
@@ -28,6 +28,12 @@
 }
 
 .toast-close {
+    background: transparent;
+    border: 0;
+    color: white;
+    cursor: pointer;
+    font-family: inherit;
+    font-size: 1em;
     opacity: 0.4;
     padding: 0 5px;
 }

diff --git a/src/toastify.js b/src/toastify.js
@@ -160,10 +160,11 @@
       // Adding a close icon to the toast
       if (this.options.close === true) {
         // Create a span for close element
-        var closeElement = document.createElement("span");
-        closeElement.innerHTML = "&#10006;";
-
+        var closeElement = document.createElement("button");
+        closeElement.type = "button";
+        closeElement.setAttribute("aria-label", "Close");
         closeElement.className = "toast-close";
+        closeElement.innerHTML = "&#10006;";
 
         // Triggering the removal of toast from DOM on close click
         closeElement.addEventListener(