From cd4c16a3d95d1349698b9e245cd8cd878c4c7cbc Mon Sep 17 00:00:00 2001
From: Jose Carcamo <jcarcamo@esri.com>
Date: Mon, 3 Jun 2024 16:42:32 -0700
Subject: [PATCH 1/8] fix(alert): pause auto-close alert when link focused

---
 .../src/components/alert/alert.e2e.ts         | 14 +++++++
 .../src/components/alert/alert.scss           |  7 ++++
 .../src/components/alert/alert.tsx            | 40 ++++++++++++++++++-
 3 files changed, 59 insertions(+), 2 deletions(-)

diff --git a/packages/calcite-components/src/components/alert/alert.e2e.ts b/packages/calcite-components/src/components/alert/alert.e2e.ts
index 63e35eabe69..dee3bd09b3f 100644
--- a/packages/calcite-components/src/components/alert/alert.e2e.ts
+++ b/packages/calcite-components/src/components/alert/alert.e2e.ts
@@ -457,6 +457,20 @@ describe("calcite-alert", () => {
       await page.waitForTimeout(DURATIONS.medium + animationDurationInMs);
       await page.waitForSelector("#alert", { visible: false });
     });
+
+    it("pauses on focus and resumes on unfocus", async () => {
+      await button.click();
+      expect(await alert.isVisible()).toBe(true);
+      expect(await alert.getProperty("autoCloseDuration")).toEqual("medium");
+      expect(playState).toEqual("running");
+      const link = await page.find(`#alert >>> calcite-link`);
+      await link.focus();
+      await page.waitForTimeout(DURATIONS.medium);
+      expect(await alert.isVisible()).toBe(true);
+      await button.focus();
+      await page.waitForTimeout(DURATIONS.medium + animationDurationInMs);
+      await page.waitForSelector("#alert", { visible: false });
+    });
   });
 
   describe("translation support", () => {
diff --git a/packages/calcite-components/src/components/alert/alert.scss b/packages/calcite-components/src/components/alert/alert.scss
index 68c259951b4..759dc0fdec5 100644
--- a/packages/calcite-components/src/components/alert/alert.scss
+++ b/packages/calcite-components/src/components/alert/alert.scss
@@ -296,6 +296,13 @@ $alertDurations:
   :host(:hover[auto-close-duration="#{$name}"]) .dismiss-progress:after {
     animation-play-state: paused;
   }
+  :host(:focus[auto-close-duration="#{$name}"]) .dismiss-progress:after {
+    animation-play-state: paused;
+  }
+}
+
+.container.focused .dismiss-progress:after {
+  animation-play-state: paused;
 }
 
 @keyframes dismissProgress {
diff --git a/packages/calcite-components/src/components/alert/alert.tsx b/packages/calcite-components/src/components/alert/alert.tsx
index 0e4b2be7365..6c0cd38a4c4 100644
--- a/packages/calcite-components/src/components/alert/alert.tsx
+++ b/packages/calcite-components/src/components/alert/alert.tsx
@@ -232,7 +232,13 @@ export class Alert implements OpenCloseComponent, LoadableComponent, T9nComponen
           ref={this.setTransitionEl}
         >
           {effectiveIcon && this.renderIcon(effectiveIcon)}
-          <div class={CSS.textContainer}>
+          <div
+            class={CSS.textContainer}
+            onFocusin={this.autoClose && this.autoCloseTimeoutId ? this.handleKeyBoardFocus : null}
+            onFocusout={
+              this.autoClose && this.autoCloseTimeoutId ? this.handleKeyBoardUnfocus : null
+            }
+          >
             <slot name={SLOTS.title} />
             <slot name={SLOTS.message} />
             <slot name={SLOTS.link} />
@@ -246,6 +252,20 @@ export class Alert implements OpenCloseComponent, LoadableComponent, T9nComponen
     );
   }
 
+  private handleKeyBoardFocus = (): void => {
+    this.transitionEl.classList.add("focused");
+    this.keyBoardFocus = true;
+    this.handleFocus();
+  };
+
+  private handleKeyBoardUnfocus = (): void => {
+    this.transitionEl.classList.remove("focused");
+    this.keyBoardFocus = false;
+    if (!this.mouseFocus) {
+      this.handleUnfocus();
+    }
+  };
+
   private renderCloseButton(): VNode {
     return (
       <button
@@ -447,6 +467,10 @@ export class Alert implements OpenCloseComponent, LoadableComponent, T9nComponen
 
   transitionEl: HTMLDivElement;
 
+  keyBoardFocus: boolean;
+
+  mouseFocus: boolean;
+
   //--------------------------------------------------------------------------
   //
   //  Private Methods
@@ -510,12 +534,24 @@ export class Alert implements OpenCloseComponent, LoadableComponent, T9nComponen
   };
 
   private handleMouseOver = (): void => {
+    this.mouseFocus = true;
+    this.handleFocus();
+  };
+
+  private handleMouseLeave = (): void => {
+    this.mouseFocus = false;
+    if (!this.keyBoardFocus) {
+      this.handleUnfocus();
+    }
+  };
+
+  private handleFocus = (): void => {
     window.clearTimeout(this.autoCloseTimeoutId);
     this.totalOpenTime = Date.now() - this.initialOpenTime;
     this.lastMouseOverBegin = Date.now();
   };
 
-  private handleMouseLeave = (): void => {
+  private handleUnfocus = (): void => {
     const hoverDuration = Date.now() - this.lastMouseOverBegin;
     const timeRemaining =
       DURATIONS[this.autoCloseDuration] - this.totalOpenTime + this.totalHoverTime;

From 8c19242498ae10ab969b71a92c3bc7318bc2cff7 Mon Sep 17 00:00:00 2001
From: Jose Carcamo <jcarcamo@esri.com>
Date: Tue, 4 Jun 2024 17:29:32 -0700
Subject: [PATCH 2/8] Renamed data member and method; set autoCloseTimeoutId to
 null; rewrote test

---
 .../src/components/alert/alert.e2e.ts         |  2 +-
 .../src/components/alert/alert.scss           |  4 +---
 .../src/components/alert/alert.tsx            | 21 +++++++++----------
 3 files changed, 12 insertions(+), 15 deletions(-)

diff --git a/packages/calcite-components/src/components/alert/alert.e2e.ts b/packages/calcite-components/src/components/alert/alert.e2e.ts
index dee3bd09b3f..263aaf3c709 100644
--- a/packages/calcite-components/src/components/alert/alert.e2e.ts
+++ b/packages/calcite-components/src/components/alert/alert.e2e.ts
@@ -463,7 +463,7 @@ describe("calcite-alert", () => {
       expect(await alert.isVisible()).toBe(true);
       expect(await alert.getProperty("autoCloseDuration")).toEqual("medium");
       expect(playState).toEqual("running");
-      const link = await page.find(`#alert >>> calcite-link`);
+      const link = document.querySelector("calcite-link");
       await link.focus();
       await page.waitForTimeout(DURATIONS.medium);
       expect(await alert.isVisible()).toBe(true);
diff --git a/packages/calcite-components/src/components/alert/alert.scss b/packages/calcite-components/src/components/alert/alert.scss
index 759dc0fdec5..17587b14794 100644
--- a/packages/calcite-components/src/components/alert/alert.scss
+++ b/packages/calcite-components/src/components/alert/alert.scss
@@ -293,9 +293,7 @@ $alertDurations:
   :host([auto-close-duration="#{$name}"]) .dismiss-progress:after {
     animation: dismissProgress $duration ease-out;
   }
-  :host(:hover[auto-close-duration="#{$name}"]) .dismiss-progress:after {
-    animation-play-state: paused;
-  }
+  :host(:hover[auto-close-duration="#{$name}"]) .dismiss-progress:after,
   :host(:focus[auto-close-duration="#{$name}"]) .dismiss-progress:after {
     animation-play-state: paused;
   }
diff --git a/packages/calcite-components/src/components/alert/alert.tsx b/packages/calcite-components/src/components/alert/alert.tsx
index 6c0cd38a4c4..f18681a68b7 100644
--- a/packages/calcite-components/src/components/alert/alert.tsx
+++ b/packages/calcite-components/src/components/alert/alert.tsx
@@ -200,6 +200,7 @@ export class Alert implements OpenCloseComponent, LoadableComponent, T9nComponen
       }),
     );
     window.clearTimeout(this.autoCloseTimeoutId);
+    this.autoCloseTimeoutId = null;
     window.clearTimeout(this.queueTimeout);
     disconnectLocalized(this);
     disconnectMessages(this);
@@ -226,18 +227,17 @@ export class Alert implements OpenCloseComponent, LoadableComponent, T9nComponen
             [CSS.containerQueued]: queued,
             [`${CSS.container}--${placement}`]: true,
             [CSS.containerSlottedInShell]: this.slottedInShell,
+            ["focused"]: this.keyBoardFocus,
           }}
           onPointerEnter={this.autoClose && this.autoCloseTimeoutId ? this.handleMouseOver : null}
-          onPointerLeave={this.autoClose && this.autoCloseTimeoutId ? this.handleMouseLeave : null}
+          onPointerLeave={this.autoClose ? this.handleMouseLeave : null}
           ref={this.setTransitionEl}
         >
           {effectiveIcon && this.renderIcon(effectiveIcon)}
           <div
             class={CSS.textContainer}
             onFocusin={this.autoClose && this.autoCloseTimeoutId ? this.handleKeyBoardFocus : null}
-            onFocusout={
-              this.autoClose && this.autoCloseTimeoutId ? this.handleKeyBoardUnfocus : null
-            }
+            onFocusout={this.autoClose ? this.handleKeyBoardUnfocus : null}
           >
             <slot name={SLOTS.title} />
             <slot name={SLOTS.message} />
@@ -253,16 +253,14 @@ export class Alert implements OpenCloseComponent, LoadableComponent, T9nComponen
   }
 
   private handleKeyBoardFocus = (): void => {
-    this.transitionEl.classList.add("focused");
     this.keyBoardFocus = true;
     this.handleFocus();
   };
 
   private handleKeyBoardUnfocus = (): void => {
-    this.transitionEl.classList.remove("focused");
     this.keyBoardFocus = false;
     if (!this.mouseFocus) {
-      this.handleUnfocus();
+      this.handleBlur();
     }
   };
 
@@ -449,6 +447,8 @@ export class Alert implements OpenCloseComponent, LoadableComponent, T9nComponen
   /** is the alert queued */
   @State() queued = false;
 
+  @State() keyBoardFocus = false;
+
   private autoCloseTimeoutId: number = null;
 
   private closeButton: HTMLButtonElement;
@@ -467,8 +467,6 @@ export class Alert implements OpenCloseComponent, LoadableComponent, T9nComponen
 
   transitionEl: HTMLDivElement;
 
-  keyBoardFocus: boolean;
-
   mouseFocus: boolean;
 
   //--------------------------------------------------------------------------
@@ -541,17 +539,18 @@ export class Alert implements OpenCloseComponent, LoadableComponent, T9nComponen
   private handleMouseLeave = (): void => {
     this.mouseFocus = false;
     if (!this.keyBoardFocus) {
-      this.handleUnfocus();
+      this.handleBlur();
     }
   };
 
   private handleFocus = (): void => {
     window.clearTimeout(this.autoCloseTimeoutId);
+    this.autoCloseTimeoutId = null;
     this.totalOpenTime = Date.now() - this.initialOpenTime;
     this.lastMouseOverBegin = Date.now();
   };
 
-  private handleUnfocus = (): void => {
+  private handleBlur = (): void => {
     const hoverDuration = Date.now() - this.lastMouseOverBegin;
     const timeRemaining =
       DURATIONS[this.autoCloseDuration] - this.totalOpenTime + this.totalHoverTime;

From 70b651cd2d611e55c2f965d5c8ff8c1c3b9d84cd Mon Sep 17 00:00:00 2001
From: Jose Carcamo <jcarcamo@esri.com>
Date: Tue, 4 Jun 2024 17:45:28 -0700
Subject: [PATCH 3/8] Modified test

---
 packages/calcite-components/src/components/alert/alert.e2e.ts | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/packages/calcite-components/src/components/alert/alert.e2e.ts b/packages/calcite-components/src/components/alert/alert.e2e.ts
index 263aaf3c709..ac82cae6292 100644
--- a/packages/calcite-components/src/components/alert/alert.e2e.ts
+++ b/packages/calcite-components/src/components/alert/alert.e2e.ts
@@ -463,8 +463,7 @@ describe("calcite-alert", () => {
       expect(await alert.isVisible()).toBe(true);
       expect(await alert.getProperty("autoCloseDuration")).toEqual("medium");
       expect(playState).toEqual("running");
-      const link = document.querySelector("calcite-link");
-      await link.focus();
+      alert.focus();
       await page.waitForTimeout(DURATIONS.medium);
       expect(await alert.isVisible()).toBe(true);
       await button.focus();

From 4e25335dce5e0b8ab3ecc65ee7e7d7b01e30e4d3 Mon Sep 17 00:00:00 2001
From: Jose Carcamo <jcarcamo@esri.com>
Date: Wed, 5 Jun 2024 10:39:55 -0700
Subject: [PATCH 4/8] Modified test

---
 packages/calcite-components/src/components/alert/alert.e2e.ts | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/calcite-components/src/components/alert/alert.e2e.ts b/packages/calcite-components/src/components/alert/alert.e2e.ts
index ac82cae6292..6ede3ee246d 100644
--- a/packages/calcite-components/src/components/alert/alert.e2e.ts
+++ b/packages/calcite-components/src/components/alert/alert.e2e.ts
@@ -463,7 +463,8 @@ describe("calcite-alert", () => {
       expect(await alert.isVisible()).toBe(true);
       expect(await alert.getProperty("autoCloseDuration")).toEqual("medium");
       expect(playState).toEqual("running");
-      alert.focus();
+      const link = await page.find(`#alert >>> .text-container`);
+      await link.focus();
       await page.waitForTimeout(DURATIONS.medium);
       expect(await alert.isVisible()).toBe(true);
       await button.focus();

From 39a6dd53e0da35e2d790942afa434e4070c746b6 Mon Sep 17 00:00:00 2001
From: Jose Carcamo <jcarcamo@esri.com>
Date: Wed, 5 Jun 2024 11:04:12 -0700
Subject: [PATCH 5/8] Modified test

---
 .../calcite-components/src/components/alert/alert.e2e.ts    | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/packages/calcite-components/src/components/alert/alert.e2e.ts b/packages/calcite-components/src/components/alert/alert.e2e.ts
index 6ede3ee246d..7529a0d63bd 100644
--- a/packages/calcite-components/src/components/alert/alert.e2e.ts
+++ b/packages/calcite-components/src/components/alert/alert.e2e.ts
@@ -463,8 +463,10 @@ describe("calcite-alert", () => {
       expect(await alert.isVisible()).toBe(true);
       expect(await alert.getProperty("autoCloseDuration")).toEqual("medium");
       expect(playState).toEqual("running");
-      const link = await page.find(`#alert >>> .text-container`);
-      await link.focus();
+      buttonClose = await page.find(`#alert >>> .${CSS.close}`);
+      buttonClose.focus();
+      // const link = await page.find(`#alert >>> .text-container`);
+      // await link.focus();
       await page.waitForTimeout(DURATIONS.medium);
       expect(await alert.isVisible()).toBe(true);
       await button.focus();

From a68bacabf6da5ea5eabd84283e959109491b9617 Mon Sep 17 00:00:00 2001
From: Jose Carcamo <jcarcamo@esri.com>
Date: Wed, 5 Jun 2024 12:48:01 -0700
Subject: [PATCH 6/8] Added constant for class name; made close button stop
 auto close; modified test case

---
 .../calcite-components/src/components/alert/alert.e2e.ts  | 2 --
 .../calcite-components/src/components/alert/alert.tsx     | 8 +++++---
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/packages/calcite-components/src/components/alert/alert.e2e.ts b/packages/calcite-components/src/components/alert/alert.e2e.ts
index 7529a0d63bd..7d6d82a8d88 100644
--- a/packages/calcite-components/src/components/alert/alert.e2e.ts
+++ b/packages/calcite-components/src/components/alert/alert.e2e.ts
@@ -465,8 +465,6 @@ describe("calcite-alert", () => {
       expect(playState).toEqual("running");
       buttonClose = await page.find(`#alert >>> .${CSS.close}`);
       buttonClose.focus();
-      // const link = await page.find(`#alert >>> .text-container`);
-      // await link.focus();
       await page.waitForTimeout(DURATIONS.medium);
       expect(await alert.isVisible()).toBe(true);
       await button.focus();
diff --git a/packages/calcite-components/src/components/alert/alert.tsx b/packages/calcite-components/src/components/alert/alert.tsx
index f18681a68b7..366fd9b6a81 100644
--- a/packages/calcite-components/src/components/alert/alert.tsx
+++ b/packages/calcite-components/src/components/alert/alert.tsx
@@ -227,7 +227,7 @@ export class Alert implements OpenCloseComponent, LoadableComponent, T9nComponen
             [CSS.containerQueued]: queued,
             [`${CSS.container}--${placement}`]: true,
             [CSS.containerSlottedInShell]: this.slottedInShell,
-            ["focused"]: this.keyBoardFocus,
+            [CSS.focused]: this.keyBoardFocus,
           }}
           onPointerEnter={this.autoClose && this.autoCloseTimeoutId ? this.handleMouseOver : null}
           onPointerLeave={this.autoClose ? this.handleMouseLeave : null}
@@ -237,7 +237,7 @@ export class Alert implements OpenCloseComponent, LoadableComponent, T9nComponen
           <div
             class={CSS.textContainer}
             onFocusin={this.autoClose && this.autoCloseTimeoutId ? this.handleKeyBoardFocus : null}
-            onFocusout={this.autoClose ? this.handleKeyBoardUnfocus : null}
+            onFocusout={this.autoClose ? this.handleKeyBoardBlur : null}
           >
             <slot name={SLOTS.title} />
             <slot name={SLOTS.message} />
@@ -257,7 +257,7 @@ export class Alert implements OpenCloseComponent, LoadableComponent, T9nComponen
     this.handleFocus();
   };
 
-  private handleKeyBoardUnfocus = (): void => {
+  private handleKeyBoardBlur = (): void => {
     this.keyBoardFocus = false;
     if (!this.mouseFocus) {
       this.handleBlur();
@@ -271,6 +271,8 @@ export class Alert implements OpenCloseComponent, LoadableComponent, T9nComponen
         class={CSS.close}
         key="close"
         onClick={this.closeAlert}
+        onFocusin={this.autoClose ? this.handleKeyBoardFocus : null}
+        onFocusout={this.autoClose ? this.handleKeyBoardBlur : null}
         ref={(el) => (this.closeButton = el)}
         type="button"
       >

From 3619ef436444a1b72871bf3427832f93a05b80d2 Mon Sep 17 00:00:00 2001
From: Jose Carcamo <jcarcamo@esri.com>
Date: Wed, 5 Jun 2024 12:56:24 -0700
Subject: [PATCH 7/8] Adding focused

---
 packages/calcite-components/src/components/alert/resources.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/calcite-components/src/components/alert/resources.ts b/packages/calcite-components/src/components/alert/resources.ts
index 945fe7015ee..38c9a988058 100644
--- a/packages/calcite-components/src/components/alert/resources.ts
+++ b/packages/calcite-components/src/components/alert/resources.ts
@@ -31,4 +31,5 @@ export const CSS = {
   queueCount: "queue-count",
   queueCountActive: "queue-count--active",
   textContainer: "text-container",
+  focused: "focused",
 };

From 5cd9d9ca3b2a5de2874be3b31693c3586b66e0eb Mon Sep 17 00:00:00 2001
From: Jose Carcamo <jcarcamo@esri.com>
Date: Wed, 5 Jun 2024 13:12:11 -0700
Subject: [PATCH 8/8] Changed name of test case

---
 packages/calcite-components/src/components/alert/alert.e2e.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/calcite-components/src/components/alert/alert.e2e.ts b/packages/calcite-components/src/components/alert/alert.e2e.ts
index 7d6d82a8d88..daa5bc120e1 100644
--- a/packages/calcite-components/src/components/alert/alert.e2e.ts
+++ b/packages/calcite-components/src/components/alert/alert.e2e.ts
@@ -458,7 +458,7 @@ describe("calcite-alert", () => {
       await page.waitForSelector("#alert", { visible: false });
     });
 
-    it("pauses on focus and resumes on unfocus", async () => {
+    it("pauses on focus and resumes on blur", async () => {
       await button.click();
       expect(await alert.isVisible()).toBe(true);
       expect(await alert.getProperty("autoCloseDuration")).toEqual("medium");