fix: esl-alert a11y and post animate cleanup

exadel-inc · Feb 19, 2021 · 7646ffb · 7646ffb
1 parent bc249ba
commit 7646ffb
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 23 deletions.
diff --git a/src/modules/esl-alert/core/esl-alert.ts b/src/modules/esl-alert/core/esl-alert.ts
@@ -14,16 +14,21 @@ export interface AlertActionParams extends ToggleableActionParams {
   html?: string;
   /** classes to add to alert element */
   cls?: string;
+  /** timeout to clear classes */
+  hideTime?: number;
 }
 
 @ExportNs('Alert')
 export class ESLAlert extends ESLToggleable {
   static is = 'esl-alert';
   static eventNs = 'esl:alert';
 
-  static get observedAttributes() { return ['target']; }
+  static get observedAttributes() {
+    return ['target'];
+  }
 
   static defaultConfig: AlertActionParams = {
+    hideTime: 300,
     hideDelay: 2500
   };
 
@@ -32,7 +37,8 @@ export class ESLAlert extends ESLToggleable {
   @jsonAttr<AlertActionParams>()
   public defaultParams: AlertActionParams;
 
-  protected $text: HTMLElement;
+  protected $content: HTMLElement;
+  protected activeCls?: string;
 
   private _$target: EventTarget;
 
@@ -57,7 +63,12 @@ export class ESLAlert extends ESLToggleable {
 
   protected connectedCallback() {
     super.connectedCallback();
-    this.render();
+    this.setAttribute('role', this.getAttribute('role') || 'alert');
+    this.$content = document.createElement('div');
+    this.$content.className = 'esl-alert-content';
+    this.innerHTML = '';
+    this.appendChild(this.$content);
+    if (DeviceDetector.isIE) this.appendChild(createZIndexIframe());
     if (this.target) {
       this.$target = TraversingQuery.first(this.target, this) as EventTarget;
     }
@@ -68,16 +79,6 @@ export class ESLAlert extends ESLToggleable {
     this.unbindTargetEvents();
   }
 
-  protected render() {
-    this.$text = document.createElement('div');
-    this.$text.className = 'esl-alert-text';
-    this.innerHTML = '';
-    this.appendChild(this.$text);
-    if (DeviceDetector.isIE) {
-      this.appendChild(createZIndexIframe());
-    }
-  }
-
   public get $target() {
     return this._$target;
   }
@@ -99,21 +100,26 @@ export class ESLAlert extends ESLToggleable {
   }
 
   protected onShow(params: AlertActionParams) {
-    CSSUtil.addCls(this, params.cls);
-    if (params.text || params.html) {
-      if (params.text) {
-        this.$text.textContent = params.text;
-      } else if (params.html) {
-        this.$text.innerHTML = params.html;
-      }
+    if (params.html || params.text) {
+      this.render(params);
       super.onShow(params);
     }
     this.hide(params);
-    return this;
   }
   protected onHide(params: AlertActionParams) {
     super.onHide(params);
-    CSSUtil.removeCls(this, params.cls);
+    setTimeout(() => this.clear(), params.hideTime);
+  }
+
+  protected render({text, html, cls}: AlertActionParams) {
+    CSSUtil.removeCls(this, this.activeCls);
+    CSSUtil.addCls(this, this.activeCls = cls);
+    if (html) this.$content.innerHTML = html;
+    if (text) this.$content.textContent = text;
+  }
+  protected clear() {
+    this.$content.innerHTML = '';
+    CSSUtil.removeCls(this, this.activeCls);
   }
 
   @bind

diff --git a/test-server/views/pages/esl-alert.html b/test-server/views/pages/esl-alert.html
@@ -12,7 +12,7 @@ <h3 class="text-center">Triggers</h3>
 
       <div class="m-2 p-2">
         <button type="button" class="btn btn-primary esl-alert-show"
-                data-text="Global Alert Long">Show Long</button>
+                data-text="Global Alert Long" data-cls="bg-danger">Show Long</button>
         <button type="button" class="btn btn-success esl-alert-show"
                 data-text="Global Alert Short" data-delay="1500">Show Quick</button>
         <button type="button" class="btn btn-dark esl-alert-hide">Hide</button>
@@ -34,6 +34,9 @@ <h3 class="text-center">Triggers</h3>
           var params = {};
 
           if (el && el.matches('.esl-alert-show')) {
+            if (el.dataset.cls) {
+              params.cls = el.dataset.cls;
+            }
             if (el.dataset.text) {
               params.text = el.dataset.text;
             }