fix(alert): pause auto-close alert when link focused

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", () => {

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 {

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;