@meetelise/chat 1.59.0 → 1.59.2

package/src/WebComponent/pubnub-chat.ts

@@ -1,10 +1,12 @@
 import { html, LitElement, TemplateResult } from "lit";
+import { ifDefined } from "lit/directives/if-defined.js";
 import { customElement, property, query, state } from "lit/decorators.js";
 import { classMap } from "lit/directives/class-map.js";
 import { styleMap } from "lit/directives/style-map.js";
 import MyPubnub, {
   SimpleMessageTypes,
   SimpleChatMessage,
+  SimpleTextChatMessage,
   isSimpleMediaChatMessage,
   isSimpleNavigationChatMessage,
   isSimpleTextChatMessage,
@@ -127,6 +129,13 @@ export class PubnubChat extends LitElement {
   @state()
   hasReceivedConsent = false;
 
+  @state()
+  private _replyAnnouncement = "";
+
+  private announcedReplyKeys = new Set<string>();
+
+  private hasReplySnapshot = false;
+
   @state()
   privacyPolicyUrl = "http://bit.ly/me_privacy_policy";
 
@@ -227,6 +236,50 @@ export class PubnubChat extends LitElement {
       distanceFromBottom <= PubnubChat.AUTO_SCROLL_THRESHOLD_PX;
   };
 
+  protected willUpdate(): void {
+    this.syncReplyAnnouncement();
+  }
+
+  private syncReplyAnnouncement(): void {
+    const assistantName = this.building?.userFirstName || "Elise";
+    const ready = this.messages.flatMap((message) => {
+      const announcement = finishedAssistantAnnouncement(
+        message,
+        assistantName
+      );
+      return announcement ? [{ key: replyKey(message), announcement }] : [];
+    });
+    if (!this.hasReplySnapshot) {
+      if (this.messages.length === 0) return;
+      ready.forEach(({ key }) => this.announcedReplyKeys.add(key));
+      this.hasReplySnapshot = true;
+      return;
+    }
+    const fresh = ready.filter(({ key }) => !this.announcedReplyKeys.has(key));
+    if (fresh.length === 0) return;
+    fresh.forEach(({ key }) => this.announcedReplyKeys.add(key));
+    const text = fresh.map(({ announcement }) => announcement).join(" ");
+    // The same string does not update a live region. A repeat toggles a
+    // zero-width space so the second reply is spoken. Readers skip that space.
+    const previous = this._replyAnnouncement.replace(/\u200b/g, "");
+    this._replyAnnouncement =
+      text === previous && !this._replyAnnouncement.endsWith("\u200b")
+        ? `${text}\u200b`
+        : text;
+  }
+
+  private renderReplyAnnouncer(): TemplateResult {
+    return html`<div
+      id="reply-announcer"
+      class="sr-only"
+      role="status"
+      aria-live="polite"
+      aria-atomic="true"
+    >
+      ${this._replyAnnouncement}
+    </div>`;
+  }
+
   async updated(): Promise<void> {
     this.scrollToChatBottom();
     try {
@@ -248,6 +301,25 @@ export class PubnubChat extends LitElement {
     return this.requiresConsent && !this.hasReceivedConsent;
   };
 
+  /** Caret in the message field when the composer is on screen. */
+  focusMessageField(): boolean {
+    const root = this.shadowRoot;
+    const input = root?.getElementById("message-input");
+    if (!(input instanceof HTMLTextAreaElement) || !root) return false;
+    // Consent hides the footer with display:none. Focusing it would no-op.
+    if (input.getClientRects().length === 0) return false;
+    if (root.activeElement !== input) input.focus();
+    return root.activeElement === input;
+  }
+
+  /** Tab cycles inside the fullscreen mobile dialog. Desktop stays non-modal. */
+  private trapTabInMobileDialog(event: KeyboardEvent): void {
+    if (!this._isMobile) return;
+    const container = this.shadowRoot?.getElementById("pubnub-chat-container");
+    if (!container) return;
+    trapTabInside(event, container);
+  }
+
   render(): TemplateResult {
     if (!this.buildingSlug && !this.centralConvo) {
       return html``; // error should be here
@@ -344,8 +416,6 @@ export class PubnubChat extends LitElement {
           >
             <ul
               id="message-thread-list"
-              role="log"
-              aria-live="polite"
               class=${classMap({
                 ["hidden"]: this.needsConsent(),
               })}
@@ -425,6 +495,7 @@ export class PubnubChat extends LitElement {
                   `
                 : ""}
             </ul>
+            ${this.renderReplyAnnouncer()}
           </div>
 
           <div
@@ -521,8 +592,6 @@ export class PubnubChat extends LitElement {
           >
             <ul
               id="message-thread-list"
-              role="log"
-              aria-live="polite"
               class=${classMap({
                 ["hidden"]: this.needsConsent(),
               })}
@@ -603,6 +672,7 @@ export class PubnubChat extends LitElement {
                   `
                 : ""}
             </ul>
+            ${this.renderReplyAnnouncer()}
           </div>
 
           <div
@@ -655,12 +725,25 @@ export class PubnubChat extends LitElement {
     return html`
       <div
         id="pubnub-chat-container"
+        role="dialog"
+        aria-label=${this.building.name
+          ? `Chat with ${this.building.name}`
+          : "Chat"}
+        aria-modal=${ifDefined(this._isMobile ? "true" : undefined)}
+        tabindex="-1"
         class=${classMap({
           ["pubnub-container__mobile"]: this._isMobile,
           ["pubnub-container__desktop"]: !this._isMobile,
         })}
         style=${styleMap(styles)}
-        @keydown=${(e: KeyboardEvent) => e.stopPropagation()}
+        @keydown=${(e: KeyboardEvent) => {
+          e.stopPropagation();
+          // Escape cancels an in-progress IME conversion. Don't also close the chat.
+          if (e.key === "Escape" && !e.isComposing) {
+            this.onClickExit();
+          }
+          this.trapTabInMobileDialog(e);
+        }}
         @keyup=${(e: KeyboardEvent) => e.stopPropagation()}
       >
         <div
@@ -713,8 +796,6 @@ export class PubnubChat extends LitElement {
         >
           <ul
             id="message-thread-list"
-            role="log"
-            aria-live="polite"
             class=${classMap({
               ["hidden"]: this.needsConsent(),
             })}
@@ -802,6 +883,7 @@ export class PubnubChat extends LitElement {
                 `
               : ""}
           </ul>
+          ${this.renderReplyAnnouncer()}
         </div>
         <div
           id="footer"
@@ -868,6 +950,82 @@ export class PubnubChat extends LitElement {
   }
 }
 
+/** Move focus to the first control in an overlay. Returns false if there is none yet. */
+export function focusFirstTabStop(container: HTMLElement): boolean {
+  const first = tabStopsIn(container)[0];
+  if (!first) return false;
+  first.focus();
+  return true;
+}
+
+/** Wrap Tab inside container when focus is already in it. No effect otherwise. */
+export function trapTabInside(
+  event: KeyboardEvent,
+  container: HTMLElement
+): void {
+  if (event.key !== "Tab") return;
+  const active = activeElementInside(container);
+  if (!active) return;
+  const stops = tabStopsIn(container);
+  // No controls yet (e.g. the tour's loading paint): hold focus on the container.
+  if (stops.length === 0) {
+    event.preventDefault();
+    return;
+  }
+  const index = stops.indexOf(active);
+  const onFirst = index === 0;
+  const onLast = index === stops.length - 1;
+  if (event.shiftKey && (active === container || onFirst)) {
+    event.preventDefault();
+    stops[stops.length - 1].focus();
+    return;
+  }
+  if (!event.shiftKey && (active === container || onLast)) {
+    event.preventDefault();
+    stops[0].focus();
+  }
+}
+
+function activeElementInside(container: HTMLElement): HTMLElement | null {
+  let active: Element | null = document.activeElement;
+  while (active?.shadowRoot?.activeElement) {
+    active = active.shadowRoot.activeElement;
+  }
+  if (!(active instanceof HTMLElement)) return null;
+  let node: Node | null = active;
+  while (node) {
+    if (node === container) return active;
+    node = node instanceof ShadowRoot ? node.host : node.parentNode;
+  }
+  return null;
+}
+
+function tabStopsIn(root: ParentNode): HTMLElement[] {
+  const stops: HTMLElement[] = [];
+  const visit = (node: ParentNode): void => {
+    if (node instanceof Element && node.shadowRoot) visit(node.shadowRoot);
+    node.querySelectorAll<HTMLElement>("*").forEach((el) => {
+      if (isTabStop(el)) stops.push(el);
+      if (el.shadowRoot) visit(el.shadowRoot);
+    });
+  };
+  visit(root);
+  return stops;
+}
+
+function isTabStop(el: HTMLElement): boolean {
+  if (el.getAttribute("tabindex") === "-1") return false;
+  if ("disabled" in el && (el as HTMLButtonElement).disabled) return false;
+  const focusable =
+    el.tagName === "BUTTON" ||
+    el.tagName === "INPUT" ||
+    el.tagName === "TEXTAREA" ||
+    el.tagName === "SELECT" ||
+    (el.tagName === "A" && el.hasAttribute("href")) ||
+    el.hasAttribute("tabindex");
+  return focusable && el.getClientRects().length > 0;
+}
+
 const messageAriaLabel = (message: SimpleChatMessage): string => {
   if (isSimpleTextChatMessage(message)) return message.message;
   if (isSimpleNavigationChatMessage(message)) {
@@ -875,3 +1033,24 @@ const messageAriaLabel = (message: SimpleChatMessage): string => {
   }
   return "Media message";
 };
+
+const replyKey = (message: SimpleChatMessage): string =>
+  `${message.type}:${message.timestamp}`;
+
+// Same check as pubnub-message: done chunk present, and the list is past its order.
+const isTextStillStreaming = (message: SimpleTextChatMessage): boolean => {
+  const doneChunk = message.chunks.find((chunk) => chunk.isDone);
+  if (!doneChunk) return true;
+  return message.chunks.length === doneChunk.order;
+};
+
+const finishedAssistantAnnouncement = (
+  message: SimpleChatMessage,
+  assistantName: string
+): string | null => {
+  if (message.isLeadMessage) return null;
+  if (isSimpleTextChatMessage(message) && isTextStillStreaming(message)) {
+    return null;
+  }
+  return `${assistantName}: ${messageAriaLabel(message)}`;
+};