@meetelise/chat 1.43.39 → 1.43.40

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

@@ -323,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,
@@ -339,7 +350,11 @@ 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">
           <h2 aria-live="polite" aria-atomic="true">
             ${monthNames[this.monthShown]} ${this.yearShown}

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

@@ -1101,17 +1101,17 @@ export class Launcher extends LitElement {
       ? `EliseAI options: ${optionLabels.join(", ")}`
       : "EliseAI options";
     return html`
-      <nav class="vertical-pill-list" aria-label=${navAriaLabel}>
-        <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>`
-            : ""}
+      <div class="vertical-pill-list">
+        ${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
@@ -1137,8 +1137,8 @@ export class Launcher extends LitElement {
                 <div class="chevron-right">${ChevronRightIcon("black")}</div>
               </button>`
             : ""}
-        </div>
-      </nav>
+        </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 = (