Make role attribute configurable (#119)

Author: Quy

src/js/alert/alert.js

@@ -1,12 +1,16 @@
 (() => {
   class JoomlaAlertElement extends HTMLElement {
     /* Attributes to monitor */
-    static get observedAttributes() { return ['type', 'dismiss', 'acknowledge', 'href']; }
+    static get observedAttributes() { return ['type', 'role', 'dismiss', 'acknowledge', 'href']; }
 
     get type() { return this.getAttribute('type'); }
 
     set type(value) { return this.setAttribute('type', value); }
 
+    get role() { return this.getAttribute('role'); }
+
+    set role(value) { return this.setAttribute('role', value); }
+
     get dismiss() { return this.getAttribute('dismiss'); }
 
     get acknowledge() { return this.getAttribute('acknowledge'); }
@@ -15,13 +19,16 @@
 
     /* Lifecycle, element appended to the DOM */
     connectedCallback() {
-      this.setAttribute('role', 'alertdialog');
       this.classList.add('joomla-alert--show');
 
       // Default to info
       if (!this.type || ['info', 'warning', 'danger', 'success'].indexOf(this.type) === -1) {
         this.setAttribute('type', 'info');
       }
+      // Default to alert
+      if (!this.role || ['alert', 'alertdialog'].indexOf(this.role) === -1) {
+        this.setAttribute('role', 'alert');
+      }
       // Append button
       if ((this.hasAttribute('dismiss') || this.hasAttribute('acknowledge')) || ((this.hasAttribute('href') && this.getAttribute('href') !== '')
         && !this.querySelector('button.joomla-alert--close') && !this.querySelector('button.joomla-alert-button--close'))) {
@@ -50,6 +57,11 @@
             this.type = 'info';
           }
           break;
+        case 'role':
+          if (!newValue || (newValue && ['alert', 'alertdialog'].indexOf(newValue) === -1)) {
+            this.role = 'alert';
+          }
+          break;
         case 'dismiss':
         case 'acknowledge':
           if (!newValue || newValue === 'true') {