ui: harden toast rendering

apps/ui/js/ui-feedback.js

@@ -25,22 +25,57 @@
     var config = options || {};
     var duration = config.duration === 0 ? 0 : (config.duration || 3600);
     var toast = document.createElement('div');
+    var copy = document.createElement('div');
+    var close = document.createElement('button');
+    var closeIcon = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+    var lineA = document.createElementNS('http://www.w3.org/2000/svg', 'line');
+    var lineB = document.createElementNS('http://www.w3.org/2000/svg', 'line');
 
     toast.id = 'toast_' + (++nextToastId);
     toast.className = 'toast-card toast-' + (config.type || 'info');
-    toast.innerHTML =
+    copy.className = 'toast-copy';
-      '<div class="toast-copy">' +
+    if (config.title) {
-        (config.title ? '<div class="toast-title">' + config.title + '</div>' : '') +
+      var title = document.createElement('div');
-        (config.message ? '<div class="toast-message">' + config.message + '</div>' : '') +
+      title.className = 'toast-title';
-      '</div>' +
+      title.textContent = config.title;
-      '<button class="toast-close" type="button" aria-label="Dismiss">' +
+      copy.appendChild(title);
-        '<svg width="12" height="12" viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round">' +
+    }
-          '<line x1="1" y1="1" x2="11" y2="11"></line>' +
+    if (config.message) {
-          '<line x1="11" y1="1" x2="1" y2="11"></line>' +
+      var message = document.createElement('div');
-        '</svg>' +
+      message.className = 'toast-message';
-      '</button>';
+      message.textContent = config.message;
+      copy.appendChild(message);
+    }
 
-    toast.querySelector('.toast-close').addEventListener('click', function() {
+    close.className = 'toast-close';
+    close.type = 'button';
+    close.setAttribute('aria-label', 'Dismiss');
+
+    closeIcon.setAttribute('width', '12');
+    closeIcon.setAttribute('height', '12');
+    closeIcon.setAttribute('viewBox', '0 0 12 12');
+    closeIcon.setAttribute('fill', 'none');
+    closeIcon.setAttribute('stroke', 'currentColor');
+    closeIcon.setAttribute('stroke-width', '1.8');
+    closeIcon.setAttribute('stroke-linecap', 'round');
+
+    lineA.setAttribute('x1', '1');
+    lineA.setAttribute('y1', '1');
+    lineA.setAttribute('x2', '11');
+    lineA.setAttribute('y2', '11');
+    lineB.setAttribute('x1', '11');
+    lineB.setAttribute('y1', '1');
+    lineB.setAttribute('x2', '1');
+    lineB.setAttribute('y2', '11');
+
+    closeIcon.appendChild(lineA);
+    closeIcon.appendChild(lineB);
+    close.appendChild(closeIcon);
+
+    toast.appendChild(copy);
+    toast.appendChild(close);
+
+    close.addEventListener('click', function() {
       dismiss(toast);
     });