@meetelise/chat 1.59.0 → 1.59.2

package/src/WebComponent/Scheduler/tour-scheduler.ts

@@ -75,11 +75,13 @@ import { readGoogleReserveReferral } from "../../googleReserve";
 import fetchBuildingUnitsSummary, {
   UnitSummary,
 } from "../../fetchBuildingUnitsSummary";
+import { focusFirstTabStop, trapTabInside } from "../pubnub-chat";
 
 @customElement("tour-scheduler")
 export class TourScheduler extends LitElement {
   connectedCallback(): void {
     super.connectedCallback();
+    this.addEventListener("keydown", this.trapOverlayTab);
     if (!this.hasAttribute("role")) {
       this.setAttribute("role", "dialog");
     }
@@ -149,6 +151,31 @@ export class TourScheduler extends LitElement {
   @property({ attribute: true })
   buildingName = "";
 
+  disconnectedCallback(): void {
+    this.removeEventListener("keydown", this.trapOverlayTab);
+    super.disconnectedCallback();
+  }
+
+  private trapOverlayTab = (event: KeyboardEvent): void => {
+    trapTabInside(event, this);
+  };
+
+  private movedFocusInside = false;
+
+  updated(): void {
+    if (this.movedFocusInside) return;
+    if (focusFirstTabStop(this)) {
+      this.movedFocusInside = true;
+      return;
+    }
+    // The first paint is the loading state and has no controls. A custom
+    // element's tabIndex reads as -1 until the attribute is set, and focus()
+    // is ignored until then. Hold focus on the dialog so it does not fall
+    // through to the page.
+    if (!this.hasAttribute("tabindex")) this.setAttribute("tabindex", "-1");
+    if (!this.matches(":focus")) this.focus({ preventScroll: true });
+  }
+
   onCloseClicked?: (e: MouseEvent) => void;
 
   @state()

package/src/WebComponent/actions/call-us-window.ts

@@ -17,6 +17,7 @@ import {
 } from "../LeadSourceMultitouchClient";
 
 import { getOfficeHourText } from "../OfficeHours";
+import { focusFirstTabStop, trapTabInside } from "../pubnub-chat";
 import {
   formatToUsPhoneInput,
   isModifierKey,
@@ -32,6 +33,27 @@ import {
 
 @customElement("call-us-window")
 export class CallUsWindow extends LitElement {
+  connectedCallback(): void {
+    super.connectedCallback();
+    this.addEventListener("keydown", this.trapOverlayTab);
+  }
+
+  disconnectedCallback(): void {
+    this.removeEventListener("keydown", this.trapOverlayTab);
+    super.disconnectedCallback();
+  }
+
+  private trapOverlayTab = (event: KeyboardEvent): void => {
+    trapTabInside(event, this);
+  };
+
+  private movedFocusInside = false;
+
+  updated(): void {
+    if (this.movedFocusInside) return;
+    if (focusFirstTabStop(this)) this.movedFocusInside = true;
+  }
+
   static styles = [
     InputStyles,
     css`

package/src/WebComponent/actions/email-us-window.ts

@@ -14,6 +14,7 @@ import axios from "axios";
 import { FeatureFlagsShowDropdown } from "../../fetchFeatureFlag";
 import { pushGtmEvent } from "../../gtm";
 import formDisclaimer from "../../disclaimers";
+import { focusFirstTabStop, trapTabInside } from "../pubnub-chat";
 import { isMobile, isValidEmail, snakify } from "../../utils";
 import LeadSourceClient, {
   getDefaultLeadSourceAttribution,
@@ -32,6 +33,27 @@ import {
 
 @customElement("email-us-window")
 export class EmailUsWindow extends LitElement {
+  connectedCallback(): void {
+    super.connectedCallback();
+    this.addEventListener("keydown", this.trapOverlayTab);
+  }
+
+  disconnectedCallback(): void {
+    this.removeEventListener("keydown", this.trapOverlayTab);
+    super.disconnectedCallback();
+  }
+
+  private trapOverlayTab = (event: KeyboardEvent): void => {
+    trapTabInside(event, this);
+  };
+
+  private movedFocusInside = false;
+
+  updated(): void {
+    if (this.movedFocusInside) return;
+    if (focusFirstTabStop(this)) this.movedFocusInside = true;
+  }
+
   static styles = [
     css`
       .email-us__name-input,

package/src/WebComponent/me-chat.ts

@@ -10,7 +10,7 @@ import fetchBuildingWebchatView, {
   DesignConcepts,
   fetchOrgCentralWebchatView,
 } from "../fetchBuildingWebchatView";
-import Analytics, { logSignal, LogType, sendLoggingEvent } from "../analytics";
+import Analytics, { logSignal } from "../analytics";
 import {
   FeatureFlagsShowDropdown,
   fetchFeatureFlagUseApplicationsLinkReplacement,
@@ -26,15 +26,11 @@ import { defaultPrimaryColor, defaultBackgroundColor } from "../themes";
 import getShouldShowWebchat from "../getShouldShowWebchat";
 import { isMobile, onMobileChange } from "../utils";
 import { installLauncher } from "./launcher/Launcher";
-import parseISO from "date-fns/parseISO";
-import isPast from "date-fns/isPast";
 import { getWidgetOverrides } from "../utils/getWidgetOverrides";
 
 import "./MEChat.css";
 import { getRawAvailabilities } from "../getAvailabilities";
 import { StyleInfo } from "lit/directives/style-map";
-import addMinutes from "date-fns/addMinutes";
-import formatISO from "date-fns/formatISO";
 import fetchLeadSources from "../fetchLeadSources";
 import fetchBuildingAip from "../fetchBuildingAip";
 import { formatPhoneNumber } from "./actions/formatPhoneNumber";
@@ -50,6 +46,7 @@ import {
 import "./actions/minimize-expand-button";
 import "./launcher/mobile-launcher";
 import "./pubnub-chat";
+import type { PubnubChat } from "./pubnub-chat";
 import { getBuildingPhoneNumber } from "../getBuildingPhoneNumber";
 import {
   clearChatStorageKey,
@@ -220,6 +217,11 @@ export class MEChat extends LitElement {
   @state()
   private displayPubnubChat = false;
 
+  private launcherButton: HTMLElement | null = null;
+
+  /** Set only for a user-initiated open, so auto-open does not steal focus. */
+  private focusChatOnMount = false;
+
   @state()
   private myPubnub: MyPubnub | null = null;
 
@@ -375,7 +377,7 @@ export class MEChat extends LitElement {
       this.displayPubnubChat = true;
       this.hideLauncher = true;
       this.hasMounted = true;
-      this.updateAlreadyAutoOpenedTimestamp();
+      this.rememberChatAutoOpenDismissed();
     } else if (localStorage.getItem("isChatOpen") === "true") {
       this.hideLauncher = true;
       this.displayPubnubChat = true;
@@ -850,17 +852,31 @@ export class MEChat extends LitElement {
     }
   };
 
+  private chatAutoOpenDismissedStorageKey = (): string | null => {
+    const { orgSlug, buildingSlug } = this;
+    if (orgSlug && buildingSlug) {
+      return `com.elise.webchat.autoOpenDismissed=${orgSlug}=${buildingSlug}`;
+    }
+    if (buildingSlug) {
+      return `com.elise.webchat.autoOpenDismissed=${buildingSlug}`;
+    }
+    if (orgSlug) {
+      return `com.elise.webchat.autoOpenDismissed=${orgSlug}`;
+    }
+    return null;
+  };
+
   private shouldAutoOpenChat = (buildingHasAutoOpen: boolean): boolean => {
-    const alreadyAutoOpenedTimestamp = sessionStorage.getItem(
-      "alreadyAutoOpenedTimestamp"
-    ); // we dont want to autoopen on EVERY single page load, so we'll only do it once every 15 minutes max
-    const shouldAutoOpen =
-      !alreadyAutoOpenedTimestamp ||
-      !(
-        alreadyAutoOpenedTimestamp &&
-        !isPast(parseISO(alreadyAutoOpenedTimestamp))
-      );
-    return !!buildingHasAutoOpen && !!shouldAutoOpen && !isMobile();
+    if (!buildingHasAutoOpen || isMobile()) return false;
+    const key = this.chatAutoOpenDismissedStorageKey();
+    if (!key) return true;
+    return localStorage.getItem(key) !== "true";
+  };
+
+  private rememberChatAutoOpenDismissed = (): void => {
+    const key = this.chatAutoOpenDismissedStorageKey();
+    if (!key) return;
+    localStorage.setItem(key, "true");
   };
 
   private async handleChatInitializeAnalytics(): Promise<void> {
@@ -888,13 +904,6 @@ export class MEChat extends LitElement {
     this.hideLauncher = false;
   }
 
-  private updateAlreadyAutoOpenedTimestamp = (): void => {
-    sessionStorage.setItem(
-      "alreadyAutoOpenedTimestamp",
-      formatISO(addMinutes(new Date(), 15))
-    );
-  };
-
   /** Show the chat button on the screen if it was previously hidden. */
   show(): void {
     if (!this.launcher) {
@@ -963,116 +972,11 @@ export class MEChat extends LitElement {
   connectedCallback(): void {
     super.connectedCallback();
     window.addEventListener("resize", this.adjustPositionChatAdditionalActions);
-    window.addEventListener("keydown", this.handleKeydownTab);
     this._cleanupMobileListener = onMobileChange((m) => {
       this._isMobile = m;
     });
   }
 
-  private static readonly FOCUSABLE_SELECTOR =
-    "a[href]:not([tabindex='-1']), input:not([disabled]), button:not([disabled]), textarea, [tabindex]:not([tabindex='-1'])";
-
-  /**
-   * Recursively collects focusable elements, piercing shadow DOM boundaries.
-   */
-  private static isFocusable(el: HTMLElement): boolean {
-    if (
-      "disabled" in el &&
-      (el as HTMLButtonElement | HTMLInputElement).disabled
-    ) {
-      return false;
-    }
-    return true;
-  }
-
-  private collectFocusableElements(root: Element | ShadowRoot): HTMLElement[] {
-    const results: HTMLElement[] = [];
-    // If root is an Element with its own shadow root, recurse into it
-    if (root instanceof Element && root.shadowRoot) {
-      results.push(...this.collectFocusableElements(root.shadowRoot));
-    }
-    const elements = root.querySelectorAll("*");
-    for (const el of Array.from(elements)) {
-      if (
-        el.matches(MEChat.FOCUSABLE_SELECTOR) &&
-        MEChat.isFocusable(el as HTMLElement)
-      ) {
-        results.push(el as HTMLElement);
-      }
-      if (el.shadowRoot) {
-        results.push(...this.collectFocusableElements(el.shadowRoot));
-      }
-    }
-    return results;
-  }
-
-  handleKeydownTab = (e: KeyboardEvent): void => {
-    if (e.key !== "Tab") return;
-
-    const launcherShadow =
-      this.shadowRoot?.getElementById("meetelise-launcher")?.shadowRoot;
-
-    let inputsArray: HTMLElement[] = [];
-    if (this.displayPubnubChat) {
-      const chatContainer = this.shadowRoot
-        ?.getElementById("pubnub-chat")
-        ?.shadowRoot?.getElementById("pubnub-chat-container");
-      const additionalActions = this.shadowRoot?.getElementById(
-        "chatAdditionalActionsPubnub"
-      );
-      if (chatContainer) {
-        inputsArray.push(...this.collectFocusableElements(chatContainer));
-      }
-      if (additionalActions) {
-        inputsArray.push(...this.collectFocusableElements(additionalActions));
-      }
-    } else {
-      const containerElement =
-        launcherShadow?.getElementById("email-us-window") ?? // email us form
-        launcherShadow?.getElementById("tour-scheduler-window") ?? // tour booking form
-        launcherShadow?.getElementById("call-us-window"); // text/call us form
-      if (containerElement) {
-        inputsArray = this.collectFocusableElements(containerElement);
-      }
-    }
-
-    if (inputsArray.length === 0) return;
-    e.preventDefault();
-
-    const deepActive = this.getDeepActiveElement();
-    const currentFocusedIndex = inputsArray.findIndex(
-      (el) => el === deepActive
-    );
-
-    const nextIndex = e.shiftKey
-      ? (currentFocusedIndex - 1 + inputsArray.length) % inputsArray.length
-      : (currentFocusedIndex + 1) % inputsArray.length;
-    inputsArray[nextIndex].focus();
-  };
-
-  getDeepActiveElement(): Element | null {
-    let activeElement = document.activeElement;
-    let count = 0;
-    while (
-      activeElement?.shadowRoot &&
-      activeElement?.shadowRoot.activeElement
-    ) {
-      count += 1;
-      activeElement = activeElement?.shadowRoot.activeElement;
-      if (count > 100) {
-        // just incase we get stuck in an infinite loop
-        sendLoggingEvent({
-          logType: LogType.error,
-          buildingSlug: this.buildingSlug,
-          logTitle: "[ERROR_GETTING_DEEP_ELEMENT]",
-          logData: { message: "error getting deep active element" },
-        });
-        break;
-      }
-    }
-    return activeElement;
-  }
-
   updated(): void {
     this.adjustPositionChatAdditionalActions();
   }
@@ -1083,7 +987,6 @@ export class MEChat extends LitElement {
       "resize",
       this.adjustPositionChatAdditionalActions
     );
-    window.removeEventListener("keydown", this.handleKeydownTab);
     this._cleanupMobileListener?.();
 
     super.disconnectedCallback();
@@ -1103,6 +1006,7 @@ export class MEChat extends LitElement {
     }
 
     launcher.onChatTapped = async () => {
+      this.focusChatOnMount = true;
       this.displayPubnubChat = true;
       this.hideLauncher = true;
       this.hasMounted = true;
@@ -1116,8 +1020,58 @@ export class MEChat extends LitElement {
     this.hideLauncher = false;
     this.showTourNextToChat = false;
     localStorage.setItem("isChatOpen", "false");
+    this.rememberChatAutoOpenDismissed();
   };
 
+  private focusLauncherButton = (): void => {
+    const stored = this.launcherButton?.isConnected
+      ? this.launcherButton
+      : null;
+    (stored ?? this.currentLauncherButton())?.focus();
+  };
+
+  /**
+   * User-initiated open. The caret belongs in the message field.
+   * While consent hides the composer, keep focus on the dialog so the agree
+   * control is reachable. Stored consent is applied after onMount, so try
+   * again once that paint has committed.
+   */
+  private focusMessageFieldOnOpen = (): void => {
+    const chat = this.shadowRoot?.getElementById(
+      "pubnub-chat"
+    ) as PubnubChat | null;
+    const root = chat?.shadowRoot;
+    if (!chat || !root) return;
+    if (!chat.focusMessageField()) {
+      root.getElementById("pubnub-chat-container")?.focus();
+    }
+    setTimeout(() => {
+      chat.focusMessageField();
+    }, 0);
+  };
+
+  private closeChatAndRestoreFocus = (): void => {
+    this.onExitChat();
+    void this.updateComplete.then(() => {
+      this.focusLauncherButton();
+      requestAnimationFrame(() => this.focusLauncherButton());
+    });
+  };
+
+  private currentLauncherButton(): HTMLElement | null {
+    const launcherShadow =
+      this.shadowRoot?.getElementById("meetelise-launcher")?.shadowRoot;
+    const directButton = launcherShadow?.querySelector(
+      "#type-hey__ask-prompt, button[aria-label='Chat with us']"
+    );
+    const mobileButton = launcherShadow
+      ?.querySelector("mobile-launcher")
+      ?.shadowRoot?.querySelector("button[aria-label='Chat with us']");
+    if (directButton instanceof HTMLElement) return directButton;
+    if (mobileButton instanceof HTMLElement) return mobileButton;
+    return null;
+  }
+
   render(): TemplateResult {
     installLauncher();
     const showChatAdditionalActions =
@@ -1139,9 +1093,13 @@ export class MEChat extends LitElement {
                   .building=${this.buildingWebchatView}
                   .primaryColor=${this.primaryColor}
                   .backgroundColor=${this.backgroundColor}
-                  .onClickExit=${this.onExitChat}
+                  .onClickExit=${this.closeChatAndRestoreFocus}
                   .onMount=${() => {
                     this.adjustPositionChatAdditionalActions();
+                    this.launcherButton = this.currentLauncherButton();
+                    if (!this.focusChatOnMount) return;
+                    this.focusChatOnMount = false;
+                    this.focusMessageFieldOnOpen();
                   }}
                   .requiresConsent=${this.requiresConsent}
                   .hideMobileFeatures=${this.hideMobileFeatures}
@@ -1167,12 +1125,7 @@ export class MEChat extends LitElement {
                   .onClickEmailOption=${this.handleContactClicked}
                   .onClickPhoneOption=${this.handleContactTabClicked}
                   .onClickSSTOption=${this.handleTourClicked}
-                  .onClose=${() => {
-                    this.displayPubnubChat = false;
-                    this.showTourNextToChat = false;
-                    this.hideLauncher = false;
-                    localStorage.setItem("isChatOpen", "false");
-                  }}
+                  .onClose=${this.closeChatAndRestoreFocus}
                 ></chat-additional-actions>
               `
             : ""

package/src/WebComponent/me-select.ts

@@ -357,7 +357,7 @@ export class MESelect extends LitElement {
           </svg>
         </div>
         ${this.isOpen
-          ? html`<ul id=${this.listboxId} role="listbox">
+          ? html`<ul id=${this.listboxId} role="listbox" tabindex="-1">
               ${visibleOptions.map(
                 (option, index) =>
                   html`<li

package/src/WebComponent/pubnub-chat-styles.ts

@@ -201,4 +201,16 @@ export const pubnubChatStyles = css`
   .checkbox:hover {
     opacity: 0.5;
   }
+
+  .sr-only {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border: 0;
+  }
 `;