@meetelise/chat 1.43.38 → 1.43.40

package/src/WebComponent/Scheduler/date-picker.ts

@@ -140,7 +140,7 @@ export class DatePicker extends LitElement {
       margin-bottom: 13px;
     }
 
-    h1 {
+    h2 {
       font-weight: 600;
       font-size: 12px;
       margin: 0;
@@ -154,6 +154,23 @@ export class DatePicker extends LitElement {
       align-items: center;
     }
 
+    #arrows button {
+      background: none;
+      border: none;
+      padding: 0;
+      margin: 0;
+      cursor: pointer;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      color: inherit;
+    }
+
+    #arrows button:disabled {
+      cursor: default;
+      opacity: 0.4;
+    }
+
     #rows {
       display: flex;
       flex-direction: column;
@@ -306,8 +323,19 @@ export class DatePicker extends LitElement {
       const hasNoAvailabilities =
         !this.availabilities?.[dateString] ||
         this.availabilities?.[dateString]?.length === 0;
+      const isStartOverflow = index < extraDaysAtBeginningOfMonth.length;
+      const isEndOverflow =
+        index >= extraDaysAtBeginningOfMonth.length + daysOfMonth.length;
+      const cellDate = new Date(
+        this.yearShown,
+        this.monthShown + (isStartOverflow ? -1 : isEndOverflow ? 1 : 0),
+        dayNumber
+      );
+      const cellAriaLabel = format(cellDate, "MMMM d, y");
       return html`<button
         ?disabled=${isPast || hasNoAvailabilities || isDifferentMonth}
+        aria-label=${cellAriaLabel}
+        aria-pressed=${isSelected ? "true" : "false"}
         class="dayNumber ${classMap({
           past: isPast,
           differentMonth: isDifferentMonth,
@@ -322,9 +350,15 @@ export class DatePicker extends LitElement {
     const rows = chunk(7, dayElements);
 
     return html`
-      <div id="calendar">
+      <div
+        id="calendar"
+        role="group"
+        aria-label="Calendar, ${monthNames[this.monthShown]} ${this.yearShown}"
+      >
         <div id="header">
-          <h1>${monthNames[this.monthShown]} ${this.yearShown}</h1>
+          <h2 aria-live="polite" aria-atomic="true">
+            ${monthNames[this.monthShown]} ${this.yearShown}
+          </h2>
           <div
             id="arrows"
             @click="${(e: MouseEvent) => {
@@ -341,55 +375,47 @@ export class DatePicker extends LitElement {
                 this.monthShown++;
               }
             }}"
-            @keydown="${(e: KeyboardEvent) => {
-              if (![" ", "Enter"].includes(e.key)) {
-                return;
-              }
-              if (
-                (e.target as HTMLElement)?.closest("#back") &&
-                !isSameMonth(
-                  this.now,
-                  new Date(this.yearShown, this.monthShown, 1)
-                )
-              ) {
-                e.preventDefault();
-                e.stopPropagation();
-                this.monthShown--;
-              } else if ((e.target as HTMLElement)?.closest("#forward")) {
-                e.preventDefault();
-                e.stopPropagation();
-                this.monthShown++;
-              }
-            }}"
           >
-            <svg
+            <button
               id="back"
-              tabindex="0"
-              width="9"
-              height="16"
-              viewBox="0 0 9 16"
-              fill="none"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                d="M8.67727 2.34317L7.26305 0.928955L0.192017 8.00001L7.26308 15.0711L8.6773 13.6569L3.02044 8L8.67727 2.34317Z"
-                fill="#83818E"
-              />
-            </svg>
-            <svg
-              id="forward"
-              tabindex="0"
-              width="9"
-              height="16"
-              viewBox="0 0 9 16"
-              fill="none"
-              xmlns="http://www.w3.org/2000/svg"
+              type="button"
+              aria-label="Previous month"
+              ?disabled=${isSameMonth(
+                this.now,
+                new Date(this.yearShown, this.monthShown, 1)
+              )}
             >
-              <path
-                d="M0.157227 2.34315L1.57144 0.928932L8.64251 8L1.57144 15.0711L0.157227 13.6569L5.81408 8L0.157227 2.34315Z"
-                fill="#83818E"
-              />
-            </svg>
+              <svg
+                aria-hidden="true"
+                focusable="false"
+                width="9"
+                height="16"
+                viewBox="0 0 9 16"
+                fill="none"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M8.67727 2.34317L7.26305 0.928955L0.192017 8.00001L7.26308 15.0711L8.6773 13.6569L3.02044 8L8.67727 2.34317Z"
+                  fill="#83818E"
+                />
+              </svg>
+            </button>
+            <button id="forward" type="button" aria-label="Next month">
+              <svg
+                aria-hidden="true"
+                focusable="false"
+                width="9"
+                height="16"
+                viewBox="0 0 9 16"
+                fill="none"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M0.157227 2.34315L1.57144 0.928932L8.64251 8L1.57144 15.0711L0.157227 13.6569L5.81408 8L0.157227 2.34315Z"
+                  fill="#83818E"
+                />
+              </svg>
+            </button>
           </div>
         </div>
 

package/src/WebComponent/Scheduler/time-picker.ts

@@ -108,7 +108,10 @@ export class TimePicker extends LitElement {
       border-radius: 10px;
       font-style: normal;
       font-size: 14px;
+      font-family: inherit;
+      color: inherit;
       user-select: none;
+      cursor: pointer;
     }
 
     .option.selected {
@@ -179,50 +182,33 @@ export class TimePicker extends LitElement {
             <div
               id="optionContainer"
               @click="${(e: MouseEvent) => {
-                const target = e.target as HTMLElement | undefined;
-
-                if (target?.closest(".option:not(.selected)"))
-                  this.selected = getDateWithTimezoneOffset(
-                    this.options,
-                    target.innerText
-                  );
+                const target = (e.target as HTMLElement | null)?.closest(
+                  ".option"
+                ) as HTMLButtonElement | null;
+                if (!target) return;
+                const value = target.dataset.displayTimeZoned ?? "";
+                const isAlreadySelected =
+                  value === this.selected?.displayTimeZoned;
+                this.selected = isAlreadySelected
+                  ? undefined
+                  : getDateWithTimezoneOffset(this.options, value);
                 this.dispatchEvent(
                   new Event("change", { bubbles: true, composed: true })
                 );
               }}"
-              @keydown="${(e: KeyboardEvent) => {
-                const target = e.target as HTMLElement | undefined;
-                if (
-                  [" ", "Enter"].includes(e.key) &&
-                  target?.closest(".option")
-                ) {
-                  e.preventDefault();
-                  this.selected =
-                    target.innerText !== this.selected?.displayTimeZoned
-                      ? getDateWithTimezoneOffset(
-                          this.options,
-                          target.innerText
-                        )
-                      : undefined;
-                  this.dispatchEvent(
-                    new Event("change", { bubbles: true, composed: true })
-                  );
-                }
-              }}"
             >
-              ${this.options.map(
-                (option) =>
-                  html`<div
-                    class="option ${classMap({
-                      selected:
-                        this.selected?.displayTimeZoned ===
-                        option.displayTimeZoned,
-                    })}"
-                    tabindex="0"
-                  >
-                    <span>${option.displayTimeZoned}</span>
-                  </div>`
-              )}
+              ${this.options.map((option) => {
+                const isSelected =
+                  this.selected?.displayTimeZoned === option.displayTimeZoned;
+                return html`<button
+                  type="button"
+                  class="option ${classMap({ selected: isSelected })}"
+                  aria-pressed=${isSelected ? "true" : "false"}
+                  data-display-time-zoned=${option.displayTimeZoned}
+                >
+                  <span>${option.displayTimeZoned}</span>
+                </button>`;
+              })}
             </div>
             <p class="timezone-display-text">
               *All times displayed are in the community's local time

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

@@ -64,6 +64,19 @@ import { LeadSourceMultitouchClient } from "../LeadSourceMultitouchClient";
 
 @customElement("tour-scheduler")
 export class TourScheduler extends LitElement {
+  connectedCallback(): void {
+    super.connectedCallback();
+    if (!this.hasAttribute("role")) {
+      this.setAttribute("role", "dialog");
+    }
+    if (!this.hasAttribute("aria-modal")) {
+      this.setAttribute("aria-modal", "true");
+    }
+    if (!this.hasAttribute("aria-label")) {
+      this.setAttribute("aria-label", "Schedule a Tour");
+    }
+  }
+
   @property({ attribute: false })
   tourTypeOptions: LabeledOption[] = [];
   @property({ attribute: true })
@@ -749,8 +762,12 @@ export class TourScheduler extends LitElement {
   static styles = [tourSchedulerStyles, InputStyles];
 
   tourTypeMenu(): TemplateResult {
-    return html`<h2 class="journey-header">Tour Type</h2>
-      <div id="tour-type-menu">
+    return html`<h2 id="tour-type-heading" class="journey-header">Tour Type</h2>
+      <div
+        id="tour-type-menu"
+        role="radiogroup"
+        aria-labelledby="tour-type-heading"
+      >
         ${this.shouldShowTourType[TourType.Self]
           ? html` <tour-type-option
               heading="Take a tour"
@@ -933,10 +950,7 @@ export class TourScheduler extends LitElement {
               if (
                 this.tourType === TourType.Guided &&
                 this.escortedToursLink &&
-                shouldOpenTourLink(
-                  this.tourType,
-                  this.escortedToursTypeOffered
-                )
+                shouldOpenTourLink(this.tourType, this.escortedToursTypeOffered)
               ) {
                 window.open(this.escortedToursLink, "_blank");
                 return;
@@ -1054,8 +1068,7 @@ export class TourScheduler extends LitElement {
     return html` <button
       id="close-button"
       @click=${this.onCloseClicked}
-      aria-label="Close"
-      aria-describedby="close-button"
+      aria-label="Close scheduler"
     >
       <svg
         width="19"
@@ -1445,14 +1458,14 @@ export class TourScheduler extends LitElement {
                 <div id="scheduler-container">
                   <div>
                     <h2 class="journey-header">Reschedule Tour</h2>
-                    <p class="explanation">
+                    <div class="explanation">
                       You already have a tour scheduled. Would you like to
                       reschedule?
-                    </p>
+                    </div>
                   </div>
                 </div>
                 <div id="tour-scheduler-footer">
-                  <p class="explanation">
+                  <div class="explanation">
                     We'll send a confirmation and any follow-ups to your email
                     address, please reply to the email to make any appointment
                     changes.
@@ -1464,7 +1477,7 @@ export class TourScheduler extends LitElement {
                       orgSlug: this.orgSlug,
                       clickingButtonText: "schedule tour",
                     })}
-                  </p>
+                  </div>
 
                   <div class="reschedule-buttons-wrapper">
                     <action-confirm-button
@@ -1506,7 +1519,7 @@ export class TourScheduler extends LitElement {
                   </div>
                 </div>
                 <div id="tour-scheduler-footer">
-                  <p class="explanation">
+                  <div class="explanation">
                     We'll send a confirmation and any follow-ups to your email
                     address, please reply to the email to make any appointment
                     changes.
@@ -1518,7 +1531,7 @@ export class TourScheduler extends LitElement {
                       orgSlug: this.orgSlug,
                       clickingButtonText: "schedule tour",
                     })}
-                  </p>
+                  </div>
 
                   <action-confirm-button
                     id="schedule-bttn"
@@ -1575,10 +1588,10 @@ export class TourScheduler extends LitElement {
               ? html` <div id="scheduler-container">
                     <div>
                       <h2 class="journey-header">Reschedule Tour</h2>
-                      <p class="explanation">
+                      <div class="explanation">
                         You already have a tour scheduled. Would you like to
                         reschedule?
-                      </p>
+                      </div>
                     </div>
                   </div>
                   <div id="tour-scheduler-footer">

package/src/WebComponent/Scheduler/tour-type-option.ts

@@ -67,17 +67,18 @@ export class TourTypeOption extends LitElement {
         color: #ffffff;
       }
 
-      h1,
-      h2 {
+      .heading,
+      .subtitle {
         font-size: 15px;
         margin: 0;
+        display: block;
       }
 
-      h1 {
+      .heading {
         font-weight: 600;
       }
 
-      h2 {
+      .subtitle {
         font-weight: 400;
       }
     `,
@@ -87,7 +88,10 @@ export class TourTypeOption extends LitElement {
     return html`
       <div
         class="tour-type-option"
+        role="radio"
         tabindex="0"
+        aria-checked=${this.selected ? "true" : "false"}
+        aria-label="${this.heading} ${this.subtitle}"
         style=${styleMap({
           background: this.selected ? this.primaryColor : undefined,
         })}
@@ -102,8 +106,8 @@ export class TourTypeOption extends LitElement {
                 : this.foregroundColorOnSecondaryBackgroundColor,
             })}
           >
-            <h1>${this.heading}</h1>
-            <h2>${this.subtitle}</h2>
+            <span class="heading">${this.heading}</span>
+            <span class="subtitle">${this.subtitle}</span>
           </div>
         </div>
       </div>

package/src/WebComponent/actions/action-confirm-button.ts

@@ -4,6 +4,11 @@ import { customElement, property } from "lit/decorators.js";
 
 @customElement("action-confirm-button")
 export class ActionConfirmButton extends LitElement {
+  static shadowRootOptions: ShadowRootInit = {
+    ...LitElement.shadowRootOptions,
+    delegatesFocus: true,
+  };
+
   static styles = [
     css`
       .action-confirm-button {
@@ -104,7 +109,6 @@ export class ActionConfirmButton extends LitElement {
       @click=${!this.isLoading ? this.onClick : null}
       ?disabled=${this.disabled}
       style=${`height: ${this.height}; width: ${this.width};`}
-      tabindex="0"
     >
       ${!this.isLoading
         ? this.text

package/src/WebComponent/launcher/Launcher.ts

@@ -797,9 +797,11 @@ export class Launcher extends LitElement {
     const verticalPillListItems: {
       pillKey: string;
       pill: TemplateResult | null;
+      optionLabel: string;
     }[] = [
       {
         pillKey: "Chat",
+        optionLabel: "Chat with us",
         pill: this.hasChatEnabledDesktop
           ? html`
               <button
@@ -844,6 +846,7 @@ export class Launcher extends LitElement {
       },
       {
         pillKey: "Price Calculator",
+        optionLabel: "Calculate cost",
         pill: this.hasPricingCalculatorEnabledDesktop
           ? html`
               <button
@@ -875,6 +878,7 @@ export class Launcher extends LitElement {
       },
       {
         pillKey: "SST",
+        optionLabel: "Book a tour",
         pill: this.hasSSTEnabledDesktop
           ? html`
               <button
@@ -921,6 +925,7 @@ export class Launcher extends LitElement {
       },
       {
         pillKey: "Email",
+        optionLabel: "Email an agent",
         pill: this.hasEmailEnabledDesktop
           ? html`
               <button
@@ -958,6 +963,12 @@ export class Launcher extends LitElement {
       },
       {
         pillKey: "Phone",
+        optionLabel:
+          this.hasCallUsEnabledDesktop && this.hasTextUsEnabledDesktop
+            ? "Call or text us"
+            : this.hasCallUsEnabledDesktop
+            ? "Call us"
+            : "Text us",
         pill:
           this.phoneNumber &&
           (this.hasCallUsEnabledDesktop || this.hasTextUsEnabledDesktop)
@@ -1036,6 +1047,7 @@ export class Launcher extends LitElement {
       },
       {
         pillKey: "Apply",
+        optionLabel: "Apply now",
         pill:
           this.applicationLink && this.hasApplyNowEnabledDesktop
             ? html`
@@ -1081,18 +1093,25 @@ export class Launcher extends LitElement {
         pills.unshift(sstPill);
       }
     }
+    const optionLabels = pills.map((p) => p.optionLabel);
+    if (this.overrideRentgrata && hasRentgrata()) {
+      optionLabels.push("Contact a resident");
+    }
+    const navAriaLabel = optionLabels.length
+      ? `EliseAI options: ${optionLabels.join(", ")}`
+      : "EliseAI options";
     return html`
       <div class="vertical-pill-list">
-        <div class="vertical-pill-list">
-          ${this.hasChatEnabledDesktop
-            ? html`<button
-                @click=${this.onClickMinimize}
-                class="minimize-button"
-                aria-label="Minimize"
-              >
-                <div class="chevron-down">${ChevronRightIcon("black")}</div>
-              </button>`
-            : ""}
+        ${this.hasChatEnabledDesktop
+          ? html`<button
+              @click=${this.onClickMinimize}
+              class="minimize-button"
+              aria-label="Minimize EliseAI widget"
+            >
+              <div class="chevron-down">${ChevronRightIcon("black")}</div>
+            </button>`
+          : ""}
+        <nav class="vertical-pill-list" aria-label=${navAriaLabel}>
           ${pills.map((p) => p.pill)}
           ${this.overrideRentgrata && hasRentgrata()
             ? html`<button
@@ -1118,7 +1137,7 @@ export class Launcher extends LitElement {
                 <div class="chevron-right">${ChevronRightIcon("black")}</div>
               </button>`
             : ""}
-        </div>
+        </nav>
       </div>
     `;
   };

package/src/WebComponent/me-select.ts

@@ -204,7 +204,17 @@ export class MESelect extends LitElement {
       this.meSelect.style.color = "rgba(32, 32, 32, 1)";
     }
   };
+
+  private listboxId = `me-select-listbox-${Math.random()
+    .toString(36)
+    .slice(2, 9)}`;
+
+  private optionId = (index: number): string =>
+    `${this.listboxId}-opt-${index}`;
+
   render(): TemplateResult {
+    const activeIndex = this.activeOptionIndex;
+    const accessibleName = this.placeholder ?? "Select";
     return html`
       <div id="outer-select-container">
         <div
@@ -215,6 +225,14 @@ export class MESelect extends LitElement {
             ["webchat-font__mobile"]: isMobile(),
           })}
           tabindex="0"
+          role="combobox"
+          aria-haspopup="listbox"
+          aria-expanded=${this.isOpen ? "true" : "false"}
+          aria-controls=${this.listboxId}
+          aria-label=${accessibleName}
+          aria-activedescendant=${this.isOpen && activeIndex != null
+            ? this.optionId(activeIndex)
+            : ""}
           @click=${() => (this.isOpen = !this.isOpen)}
           @keydown="${(e: KeyboardEvent) => {
             switch (e.key) {
@@ -270,6 +288,7 @@ export class MESelect extends LitElement {
               >`
             : html` <input
                 readonly
+                tabindex="-1"
                 placeholder="${this.placeholder}"
                 .value="${this.options.find((o) => o.value === this.value)
                   ?.label ||
@@ -292,24 +311,27 @@ export class MESelect extends LitElement {
           </svg>
         </div>
         ${this.isOpen
-          ? html`<ul>
+          ? html`<ul id=${this.listboxId} role="listbox">
               ${this.options.map(
-                (option) =>
+                (option, index) =>
                   html`<li
+                    id=${this.optionId(index)}
+                    role="option"
+                    aria-selected=${this.value === option.value
+                      ? "true"
+                      : "false"}
                     @click="${() => this.setSelectedOption(option)}"
-                    @keydown="${this.handleKeydown(["Enter", " "], () =>
-                      this.setSelectedOption(option)
-                    )}"
                     @mousemove="${() => {
                       this.activeOption = option;
+                      this.activeOptionIndex = index;
                     }}"
                     @mouseleave="${() => {
                       this.activeOption = null;
+                      this.activeOptionIndex = null;
                     }}"
                     class="option ${classMap({
                       active: this.activeOption === option,
                     })}"
-                    tabindex="0"
                   >
                     ${option.label}
                   </li>`

package/src/disclaimers.ts

@@ -92,7 +92,18 @@ const formDisclaimer = ({
       recorded and used by a third party.
     </div>`;
   }
-  return html``;
+  // Default: no email or phone entered yet. Still surface the privacy policy
+  // link so it's discoverable in the tab order before the user types.
+  return html` <div style=${styleMap(disclaimerStyles.container)}>
+    By clicking ${clickingButtonText}, you consent to this
+    <a
+      style=${styleMap(disclaimerStyles.link)}
+      href="http://bit.ly/me_privacy_policy"
+      target="_blank"
+      rel="noopener noreferrer"
+      >privacy policy</a
+    >.
+  </div>`;
 };
 
 export const getConsentPreChatDisclaimer = (

package/src/main/MEChat.ts

@@ -65,10 +65,9 @@ export default class MEChat {
     installFont();
     const healthChat = document.createElement("health-chat");
     healthChat.setAttribute("class", "health-chat");
-    healthChat.setAttribute("role", "dialog");
+    healthChat.setAttribute("role", "region");
     healthChat.setAttribute("aria-label", "EliseAI Healthcare Widget");
     healthChat.setAttribute("aria-describedby", "aria-describe-info");
-    healthChat.setAttribute("aria-modal", "true");
     healthChat.setAttribute("healthcareId", opts.id);
 
     healthChat.setAttribute("right", opts.right?.toString() || "unset");
@@ -140,10 +139,9 @@ export default class MEChat {
       opts.widgetType || WidgetType.Default
     );
     meChatElement.setAttribute("class", "meetelise-chat");
-    meChatElement.setAttribute("role", "dialog");
+    meChatElement.setAttribute("role", "region");
     meChatElement.setAttribute("aria-label", "EliseAI Widget");
     meChatElement.setAttribute("aria-describedby", "aria-describe-info");
-    meChatElement.setAttribute("aria-modal", "true");
 
     if (opts.brandColor) {
       this.brandColor = opts.brandColor;