@reliability-design/web 1.4.4 → 1.4.5

package/dist/components/rel-accordion/rel-accordion.ts

@@ -270,6 +270,9 @@ export class RelAccordion extends LitElement {
     }
   `;
 
+  /** Stable id prefix wiring the header to its panel. */
+  private accordionId = `rel-accordion-${Math.random().toString(36).slice(2)}`;
+
   private toggle() {
     this.open = !this.open;
     this.dispatchEvent(
@@ -286,9 +289,11 @@ export class RelAccordion extends LitElement {
       <div part="base" class="accordion">
         <div
           part="trigger" class="header"
+          id="${this.accordionId}-header"
           role="button"
           tabindex="0"
           aria-expanded="${this.open}"
+          aria-controls="${this.accordionId}-body"
           @click=${this.toggle}
           @keydown=${(e: KeyboardEvent) => {
             if (e.key === "Enter" || e.key === " ") {
@@ -315,7 +320,14 @@ export class RelAccordion extends LitElement {
             </slot>
           </div>
         </div>
-        <div part="content" class="body ${this.open ? "open" : "closed"}">
+        <div
+          part="content"
+          class="body ${this.open ? "open" : "closed"}"
+          id="${this.accordionId}-body"
+          role="region"
+          aria-labelledby="${this.accordionId}-header"
+          ?inert=${!this.open}
+        >
           <slot></slot>
         </div>
       </div>

package/dist/components/rel-button/rel-button.ts

@@ -137,9 +137,12 @@ export class RelButton extends LitElement {
       }
     }
 
-    /* Sizes */
+    /* Sizes. Min-widths come from the Figma Button master (S/M/L =
+       80/100/120) so short labels like "OK" keep a proper pill shape;
+       --rel-button-min-width lets a consumer override per instance. */
     .size-small {
       height: 32px;
+      min-width: var(--rel-button-min-width, 80px);
       padding: 0 var(--rel-spacing-sm);
       font-family: var(--rel-action-md-font-family);
       font-weight: var(--rel-action-md-font-weight);
@@ -150,6 +153,7 @@ export class RelButton extends LitElement {
 
     .size-medium {
       height: 40px;
+      min-width: var(--rel-button-min-width, 100px);
       gap: var(--rel-spacing-xs);
       padding: 0 var(--rel-spacing-md);
       font-family: var(--rel-action-lg-font-family);
@@ -161,6 +165,7 @@ export class RelButton extends LitElement {
 
     .size-large {
       height: 48px;
+      min-width: var(--rel-button-min-width, 120px);
       padding: 0 var(--rel-spacing-lg);
       font-family: var(--rel-action-xl-font-family);
       font-weight: var(--rel-action-xl-font-weight);
@@ -267,6 +272,11 @@ export class RelButton extends LitElement {
       color: var(--rel-action-neutral-label-icons-ghost);
     }
 
+    /* Figma master: ghost S has a narrower 56px min than primary/outline. */
+    .btn-text.size-small {
+      min-width: var(--rel-button-min-width, 56px);
+    }
+
     .btn-text.tone-critical {
       color: var(--rel-action-danger-label-icons-ghost);
     }
@@ -275,6 +285,8 @@ export class RelButton extends LitElement {
       background: transparent;
       color: var(--rel-action-neutral-label-icons-link);
       text-decoration: underline;
+      /* Links are inline actions — no minimum footprint in the Figma master. */
+      min-width: 0;
     }
 
     button.btn-link:hover:not(:disabled) {
@@ -303,6 +315,7 @@ export class RelButton extends LitElement {
     /* Icon Only as an independent axis: square button of the current style */
     .btn-icon-only {
       padding: 0;
+      min-width: 0;
     }
 
     .btn-icon-only.size-small {
@@ -321,6 +334,7 @@ export class RelButton extends LitElement {
       width: 40px;
       height: 40px;
       padding: 0;
+      min-width: 0;
       border-radius: 50%;
     }
     .btn-icon.tone-default {
@@ -365,7 +379,9 @@ export class RelButton extends LitElement {
        .btn-text: ghost gets tone-accent hovers below (this generic grey overlay
        has higher specificity than the per-tone ghost rules and was overriding
        them, which is why every ghost hover looked grey). */
-    button:hover:not(:disabled):not(.btn-primary):not(.btn-default):not(.btn-icon):not(.btn-secondary):not(.btn-static):not(.btn-text) {
+    /* Link buttons change label color only (rule above) — the overlay fill
+       here would make a hovered link read as a ghost button. */
+    button:hover:not(:disabled):not(.btn-primary):not(.btn-default):not(.btn-icon):not(.btn-secondary):not(.btn-static):not(.btn-text):not(.btn-link) {
       background: var(--rel-action-overlay-hover);
     }
 

package/dist/components/rel-calendar/rel-calendar.ts

@@ -426,9 +426,31 @@ export class RelCalendar extends LitElement {
     }
   }
 
+  /**
+   * Index of the single grid cell carrying tabindex="0". The old expression
+   * (`isSelected || (index === 0 && !focusedDate)`) left the grid with ZERO
+   * tab stops once the user arrowed around without a selection — Tab could
+   * never re-enter the calendar.
+   */
+  private getRovingIndex(days: CalendarDay[]): number {
+    const candidates = [
+      this.focusedDate
+        ? days.findIndex(
+            (d) => d.isCurrentMonth && this.isSameDay(d.date, this.focusedDate!)
+          )
+        : -1,
+      days.findIndex((d) => d.isSelected),
+      days.findIndex((d) => d.isCurrentMonth && d.isToday),
+      days.findIndex((d) => d.isCurrentMonth && !d.isDisabled),
+    ];
+    const found = candidates.find((i) => i >= 0);
+    return found ?? 0;
+  }
+
   render() {
     const days = this.getCalendarDays();
     const weekdayLabels = this.getWeekdayLabels();
+    const rovingIndex = this.getRovingIndex(days);
 
     return html`
       <div role="grid" aria-label="Calendar">
@@ -484,7 +506,7 @@ export class RelCalendar extends LitElement {
                 ?disabled=${day.isDisabled}
                 @click=${() => this.selectDay(day)}
                 @keydown=${(e: KeyboardEvent) => this.handleKeyDown(e, day, index)}
-                tabindex="${day.isSelected || (index === 0 && !this.focusedDate) ? 0 : -1}"
+                tabindex="${index === rovingIndex ? 0 : -1}"
               >
                 ${day.day}
               </button>

package/dist/components/rel-carousel/rel-carousel.ts

@@ -251,6 +251,11 @@ export class RelCarousel extends LitElement {
       "(prefers-reduced-motion: reduce)"
     ).matches;
 
+    // WCAG 2.2.2: auto-advance must pause while keyboard focus is inside the
+    // carousel, not just on mouse hover.
+    this.addEventListener("focusin", this.handleFocusIn);
+    this.addEventListener("focusout", this.handleFocusOut);
+
     if (this.autoplay) {
       this.startAutoplay();
     }
@@ -285,6 +290,8 @@ export class RelCarousel extends LitElement {
 
   disconnectedCallback() {
     super.disconnectedCallback();
+    this.removeEventListener("focusin", this.handleFocusIn);
+    this.removeEventListener("focusout", this.handleFocusOut);
     this._ro?.disconnect();
     this.stopAutoplay();
     if (this.animationId) {
@@ -556,6 +563,18 @@ export class RelCarousel extends LitElement {
     }
   }
 
+  private handleFocusIn = () => {
+    if (this.autoplay) this.stopAutoplay();
+  };
+
+  private handleFocusOut = (e: FocusEvent) => {
+    if (!this.autoplay) return;
+    const next = e.relatedTarget as Node | null;
+    // Resume only once focus has fully left the carousel (light or shadow).
+    if (next && (this.contains(next) || this.shadowRoot?.contains(next))) return;
+    this.startAutoplay();
+  };
+
   private handleMouseEnter() {
     if (this.autoplay && this.pauseOnHover) {
       this.stopAutoplay();
@@ -667,6 +686,7 @@ export class RelCarousel extends LitElement {
                       class="dot ${i === this.value ? "active" : ""}"
                       part="dot"
                       aria-label="Go to slide ${i + 1}"
+                      aria-current="${i === this.value ? "true" : nothing}"
                       @click=${() => this.goToSlide(i)}
                     ></button>
                   `)

package/dist/components/rel-checkbox/rel-checkbox.ts

@@ -1,4 +1,4 @@
-import { LitElement, html, css, type PropertyValues } from "lit";
+import { LitElement, html, css, nothing, type PropertyValues } from "lit";
 import { customElement, property } from "lit/decorators.js";
 import "@reliability-design/icons/rel-icon";
 
@@ -334,6 +334,9 @@ export class RelCheckbox extends LitElement {
         <label class="row">
           <input
             type="checkbox"
+            .checked=${this.status === "checked"}
+            .indeterminate=${this.status === "indeterminate"}
+            aria-checked="${this.status === "indeterminate" ? "mixed" : nothing}"
             @click=${this.toggle}
             @blur=${() => this._onTouched()}
             ?disabled=${this.state === "disabled"}

package/dist/components/rel-chip/rel-chip.ts

@@ -365,6 +365,34 @@ export class RelChip extends LitElement {
     );
   }
 
+  /** The chip body is announced as a button, so it must also act on keys:
+   *  Enter/Space re-dispatch as a host click (consumers' @click handlers
+   *  fire), Delete/Backspace remove when removable, and arrow keys ask the
+   *  container to reorder a draggable chip (`chip-move`) — the keyboard
+   *  alternative to pointer drag-and-drop. */
+  private handleKeydown = (e: KeyboardEvent) => {
+    if (e.key === "Enter" || e.key === " ") {
+      e.preventDefault();
+      this.click();
+      return;
+    }
+    if ((e.key === "Delete" || e.key === "Backspace") && this.removable) {
+      e.preventDefault();
+      this.handleRemove(e);
+      return;
+    }
+    if (this.draggableChip && (e.key === "ArrowLeft" || e.key === "ArrowRight")) {
+      e.preventDefault();
+      this.dispatchEvent(
+        new CustomEvent("chip-move", {
+          detail: { direction: e.key === "ArrowLeft" ? -1 : 1 },
+          bubbles: true,
+          composed: true,
+        })
+      );
+    }
+  };
+
   private onDragStart = (e: DragEvent) => {
     if (!this.draggableChip) return;
     this.dragging = true;
@@ -409,6 +437,7 @@ export class RelChip extends LitElement {
         role="button"
         tabindex="0"
         aria-label="${this.label}"
+        @keydown=${this.handleKeydown}
       >
         ${showAvatar
           ? html`<rel-avatar type="text" text=${this.avatar} size="xs"></rel-avatar>`

package/dist/components/rel-date-picker/rel-date-picker.ts

@@ -1,6 +1,7 @@
 import { LitElement, html, css, nothing } from "lit";
 import { customElement, property, state, query } from "lit/decorators.js";
 import { formatDatePattern } from "./date-format";
+import { getDeepActiveElement, trapTabKey } from "../../utils/focus.js";
 
 interface CalendarDay {
   date: Date;
@@ -357,6 +358,11 @@ export class RelDatePicker extends LitElement {
     }
 
     .dropdown-item {
+      display: block;
+      width: 100%;
+      border: none;
+      background: transparent;
+      text-align: left;
       padding: var(--rel-spacing-xs) var(--rel-spacing-sm);
       cursor: pointer;
       color: var(--rel-text-default);
@@ -368,6 +374,11 @@ export class RelDatePicker extends LitElement {
       letter-spacing: var(--rel-body-sm-regular-letter-spacing);
     }
 
+    .dropdown-item:focus-visible {
+      outline: 2px solid var(--rel-border-focus);
+      outline-offset: -2px;
+    }
+
     .dropdown-item:hover {
       background: var(--rel-bg-surface-elevated);
     }
@@ -497,8 +508,15 @@ export class RelDatePicker extends LitElement {
   };
 
   private handleEscapeKey = (e: KeyboardEvent) => {
-    if (e.key === "Escape" && this.open) {
+    if (!this.open) return;
+    if (e.key === "Escape") {
       this.closeCalendarPopover();
+      return;
+    }
+    // The popover announces itself as a dialog — keep Tab inside it.
+    if (e.key === "Tab") {
+      const popover = this.renderRoot.querySelector<HTMLElement>(".popover");
+      if (popover) trapTabKey(e, popover);
     }
   };
 
@@ -512,12 +530,17 @@ export class RelDatePicker extends LitElement {
     }
 
     if (changedProperties.has("open") && this.open) {
-      // Focus first day when opening
+      // Focus the roving cell (selected day, else today, else first
+      // selectable) when opening — not blindly the first of the month.
       setTimeout(() => {
-        const firstDay = this.calendarGrid?.querySelector<HTMLButtonElement>(
-          ".day-button:not(:disabled)"
-        );
-        firstDay?.focus();
+        const target =
+          this.calendarGrid?.querySelector<HTMLButtonElement>(
+            '.day-button[tabindex="0"]:not(:disabled)'
+          ) ??
+          this.calendarGrid?.querySelector<HTMLButtonElement>(
+            ".day-button:not(:disabled)"
+          );
+        target?.focus();
       }, 100);
     }
   }
@@ -865,24 +888,125 @@ export class RelDatePicker extends LitElement {
     e.stopPropagation();
     this.monthDropdownOpen = !this.monthDropdownOpen;
     this.yearDropdownOpen = false;
+    if (this.monthDropdownOpen) this.focusOpenDropdownSelection();
   }
 
   private toggleYearDropdown(e: Event) {
     e.stopPropagation();
     this.yearDropdownOpen = !this.yearDropdownOpen;
     this.monthDropdownOpen = false;
+    if (this.yearDropdownOpen) this.focusOpenDropdownSelection();
   }
 
+  private handleDropdownTriggerKeydown(e: KeyboardEvent, kind: "month" | "year") {
+    if (e.key !== "ArrowDown") return;
+    e.preventDefault();
+    e.stopPropagation();
+    this.monthDropdownOpen = kind === "month";
+    this.yearDropdownOpen = kind === "year";
+    this.focusOpenDropdownSelection();
+  }
+
+  private async focusOpenDropdownSelection() {
+    await this.updateComplete;
+    const menu = this.renderRoot.querySelector<HTMLElement>(".dropdown-menu.open");
+    if (!menu) return;
+    const target =
+      menu.querySelector<HTMLElement>(".dropdown-item.selected") ??
+      menu.querySelector<HTMLElement>(".dropdown-item");
+    target?.focus();
+    target?.scrollIntoView({ block: "nearest" });
+  }
+
+  private handleDropdownKeydown = (e: KeyboardEvent) => {
+    const menu = e.currentTarget as HTMLElement;
+    const items = Array.from(
+      menu.querySelectorAll<HTMLElement>(".dropdown-item")
+    );
+    if (items.length === 0) return;
+
+    if (e.key === "Escape") {
+      // Close only the dropdown, not the whole calendar popover behind it.
+      e.preventDefault();
+      e.stopPropagation();
+      const trigger = menu
+        .closest(".dropdown-container")
+        ?.querySelector<HTMLElement>(".dropdown-trigger");
+      this.monthDropdownOpen = false;
+      this.yearDropdownOpen = false;
+      trigger?.focus();
+      return;
+    }
+
+    if (e.key === "Tab") {
+      this.monthDropdownOpen = false;
+      this.yearDropdownOpen = false;
+      return;
+    }
+
+    const idx = items.indexOf(getDeepActiveElement() as HTMLElement);
+    let target: number;
+    switch (e.key) {
+      case "ArrowDown":
+        target = Math.min(items.length - 1, idx + 1);
+        break;
+      case "ArrowUp":
+        target = Math.max(0, idx - 1);
+        break;
+      case "Home":
+        target = 0;
+        break;
+      case "End":
+        target = items.length - 1;
+        break;
+      default:
+        return;
+    }
+    e.preventDefault();
+    e.stopPropagation();
+    items[target]?.focus();
+    items[target]?.scrollIntoView({ block: "nearest" });
+  };
+
   private selectMonth(month: number, e: Event) {
     e.stopPropagation();
+    const trigger = (e.target as HTMLElement)
+      .closest(".dropdown-container")
+      ?.querySelector<HTMLElement>(".dropdown-trigger");
     this.viewMonth = month;
     this.monthDropdownOpen = false;
+    // The focused item just went display:none — keep keyboard users anchored.
+    this.updateComplete.then(() => trigger?.focus());
   }
 
   private selectYear(year: number, e: Event) {
     e.stopPropagation();
+    const trigger = (e.target as HTMLElement)
+      .closest(".dropdown-container")
+      ?.querySelector<HTMLElement>(".dropdown-trigger");
     this.viewYear = year;
     this.yearDropdownOpen = false;
+    this.updateComplete.then(() => trigger?.focus());
+  }
+
+  /**
+   * Index of the single grid cell carrying tabindex="0". The old expression
+   * (`isSelected || (index === 0 && !value)`) left the grid with ZERO tab
+   * stops once the user arrowed around without a selection.
+   */
+  private getRovingIndex(days: CalendarDay[]): number {
+    const candidates = [
+      this.focusedDate
+        ? days.findIndex(
+            (d) => d.isCurrentMonth && this.isSameDay(d.date, this.focusedDate!)
+          )
+        : -1,
+      days.findIndex((d) => d.isSelected),
+      days.findIndex((d) => d.isCurrentMonth && d.isToday),
+      days.findIndex((d) => d.isCurrentMonth && !d.isDisabled),
+    ];
+    const found = candidates.find((i) => i >= 0);
+    return found ?? 0;
   }
 
   render() {
@@ -890,6 +1014,7 @@ export class RelDatePicker extends LitElement {
     const weekdayLabels = this.getWeekdayLabels();
     const months = this.getMonthsList();
     const years = this.getYearsList();
+    const rovingIndex = this.getRovingIndex(days);
 
     const isError = this.error;
     const belowText = isError && this.errorMessage ? this.errorMessage : this.helperText;
@@ -988,22 +1113,31 @@ export class RelDatePicker extends LitElement {
                 class="dropdown-trigger"
                 type="button"
                 @click=${this.toggleMonthDropdown}
+                @keydown=${(e: KeyboardEvent) => this.handleDropdownTriggerKeydown(e, "month")}
                 aria-label="Select month"
+                aria-haspopup="listbox"
                 aria-expanded=${this.monthDropdownOpen}
               >
                 ${this.getMonthName()}
               </button>
-              <div class="dropdown-menu ${this.monthDropdownOpen ? "open" : ""}">
+              <div
+                class="dropdown-menu ${this.monthDropdownOpen ? "open" : ""}"
+                role="listbox"
+                aria-label="Month"
+                @keydown=${this.handleDropdownKeydown}
+              >
                 ${months.map(
                   (m) => html`
-                    <div
+                    <button
                       class="dropdown-item ${m.value === this.viewMonth ? "selected" : ""}"
+                      type="button"
+                      tabindex="-1"
                       @click=${(e: Event) => this.selectMonth(m.value, e)}
                       role="option"
                       aria-selected=${m.value === this.viewMonth}
                     >
                       ${m.label}
-                    </div>
+                    </button>
                   `
                 )}
               </div>
@@ -1014,22 +1148,31 @@ export class RelDatePicker extends LitElement {
                 class="dropdown-trigger"
                 type="button"
                 @click=${this.toggleYearDropdown}
+                @keydown=${(e: KeyboardEvent) => this.handleDropdownTriggerKeydown(e, "year")}
                 aria-label="Select year"
+                aria-haspopup="listbox"
                 aria-expanded=${this.yearDropdownOpen}
               >
                 ${this.viewYear}
               </button>
-              <div class="dropdown-menu ${this.yearDropdownOpen ? "open" : ""}">
+              <div
+                class="dropdown-menu ${this.yearDropdownOpen ? "open" : ""}"
+                role="listbox"
+                aria-label="Year"
+                @keydown=${this.handleDropdownKeydown}
+              >
                 ${years.map(
                   (y) => html`
-                    <div
+                    <button
                       class="dropdown-item ${y === this.viewYear ? "selected" : ""}"
+                      type="button"
+                      tabindex="-1"
                       @click=${(e: Event) => this.selectYear(y, e)}
                       role="option"
                       aria-selected=${y === this.viewYear}
                     >
                       ${y}
-                    </div>
+                    </button>
                   `
                 )}
               </div>
@@ -1074,7 +1217,7 @@ export class RelDatePicker extends LitElement {
                   ?disabled=${day.isDisabled}
                   @click=${() => this.selectDay(day)}
                   @keydown=${(e: KeyboardEvent) => this.handleDayKeydown(e, day, index)}
-                  tabindex="${day.isSelected || (index === 0 && !this.value) ? 0 : -1}"
+                  tabindex="${index === rovingIndex ? 0 : -1}"
                 >
                   ${day.day}
                 </button>

package/dist/components/rel-drawer/rel-drawer.ts

@@ -2,6 +2,7 @@ import { LitElement, html, css } from "lit";
 import { customElement, property, state, query } from "lit/decorators.js";
 import "@reliability-design/icons/rel-icon";
 import "./rel-drawer-footer";
+import { getDeepActiveElement, getFocusableElements, trapTabKey } from "../../utils/focus.js";
 
 export type DrawerSide = "bottom" | "left" | "right";
 export type DrawerCloseReason = "backdrop" | "escape" | "drag" | "programmatic";
@@ -327,16 +328,26 @@ export class RelDrawer extends LitElement {
   }
 
   private handleOpen() {
-    this.previousFocus = document.activeElement as HTMLElement;
+    // Deep-resolved: document.activeElement retargets to a component's host
+    // (e.g. <rel-button>), whose .focus() is a no-op — restore would drop
+    // focus to <body>.
+    this.previousFocus = getDeepActiveElement();
     this.lockScroll();
 
     if (this.modal) {
+      // The panel lives in the shadow root, so plain this.querySelector never
+      // found it (focus was never moved in). The shared util walks the
+      // composed tree, seeing both shadow and slotted content.
       this.updateComplete.then(() => {
-        const focusTarget =
-          this.querySelector<HTMLElement>("[autofocus]") ??
-          this.querySelector<HTMLElement>(".close-button") ??
-          this.querySelector<HTMLElement>(".panel");
-        focusTarget?.focus();
+        const panel = this.panelElement;
+        if (!panel) return;
+        const focusTarget = getFocusableElements(panel)[0];
+        if (focusTarget) {
+          focusTarget.focus();
+        } else {
+          panel.tabIndex = -1;
+          panel.focus();
+        }
       });
     }
 
@@ -414,35 +425,6 @@ export class RelDrawer extends LitElement {
     document.body.style.paddingRight = this.originalBodyPaddingRight;
   }
 
-  private getFocusableElements(): HTMLElement[] {
-    if (!this.panelElement) return [];
-
-    const selectors = [
-      'a[href]',
-      'button:not([disabled])',
-      'textarea:not([disabled])',
-      'input:not([disabled])',
-      'select:not([disabled])',
-      '[tabindex]:not([tabindex="-1"])',
-    ].join(",");
-
-    const elements = Array.from(
-      this.panelElement.querySelectorAll(selectors)
-    ) as HTMLElement[];
-
-    // Also check slotted content
-    const slots = this.panelElement.querySelectorAll("slot");
-    slots.forEach((slot) => {
-      const assigned = slot.assignedElements({ flatten: true });
-      assigned.forEach((el) => {
-        const focusableInSlot = el.querySelectorAll(selectors);
-        elements.push(...(Array.from(focusableInSlot) as HTMLElement[]));
-      });
-    });
-
-    return elements;
-  }
-
   private handleKeydown = (e: KeyboardEvent) => {
     if (!this.open) return;
 
@@ -452,29 +434,11 @@ export class RelDrawer extends LitElement {
       return;
     }
 
-    // Focus trap
-    if (e.key === "Tab" && this.modal) {
-      const focusable = this.getFocusableElements();
-      if (focusable.length === 0) {
-        e.preventDefault();
-        return;
-      }
-
-      const firstFocusable = focusable[0];
-      const lastFocusable = focusable[focusable.length - 1];
-      const activeElement = document.activeElement;
-
-      if (e.shiftKey) {
-        if (activeElement === firstFocusable) {
-          e.preventDefault();
-          lastFocusable.focus();
-        }
-      } else {
-        if (activeElement === lastFocusable) {
-          e.preventDefault();
-          firstFocusable.focus();
-        }
-      }
+    // Focus trap — the shared helper resolves the deep active element, which
+    // the old document.activeElement comparison never could (it retargets to
+    // the <rel-drawer> host, so Tab was never wrapped).
+    if (e.key === "Tab" && this.modal && this.panelElement) {
+      trapTabKey(e, this.panelElement);
     }
   };