@reliability-design/web 1.4.3 → 1.4.5

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

@@ -1,5 +1,6 @@
 import { LitElement, html, css } from "lit";
 import { customElement, property, state, query } from "lit/decorators.js";
+import { getDeepActiveElement, getFocusableElements } from "../../utils/focus.js";
 
 type SideType = "top" | "right" | "bottom" | "left";
 type AlignType = "start" | "center" | "end";
@@ -86,13 +87,15 @@ export class RelPopover extends LitElement {
     super.connectedCallback();
     this.internalOpen = this.isControlled() ? !!this.open : this.defaultOpen;
 
-    // ONE interaction entry point — capture phase
+    // ONE interaction entry point per input method — capture phase
     this.addEventListener("pointerdown", this.onHostPointerDown, true);
+    this.addEventListener("keydown", this.onHostKeyDown, true);
   }
 
   disconnectedCallback() {
     super.disconnectedCallback();
     this.removeEventListener("pointerdown", this.onHostPointerDown, true);
+    this.removeEventListener("keydown", this.onHostKeyDown, true);
     this.removeGlobalListeners();
     this.hideNativePopover();
   }
@@ -159,13 +162,25 @@ export class RelPopover extends LitElement {
     this.setOpen(!this.activeOpen);
   };
 
+  private onHostKeyDown = (e: KeyboardEvent) => {
+    if (this.disabled) return;
+    if (e.key !== "Enter" && e.key !== " ") return;
+    if (!this.triggerEl || !e.composedPath().includes(this.triggerEl)) return;
+
+    // Keyboard twin of onHostPointerDown. preventDefault also suppresses the
+    // native synthetic click of a <button> trigger, which would toggle twice.
+    e.preventDefault();
+    e.stopPropagation();
+
+    this.setOpen(!this.activeOpen);
+  };
+
   /* =======================
    * OPEN / CLOSE
    * ======================= */
 
   private onOpen() {
-    this.returnFocusEl =
-      (document.activeElement as HTMLElement) ?? this.triggerEl;
+    this.returnFocusEl = getDeepActiveElement() ?? this.triggerEl;
 
     this.addGlobalListeners();
     this.showNativePopover();
@@ -386,6 +401,19 @@ export class RelPopover extends LitElement {
     this.triggerEl.setAttribute("aria-haspopup", "dialog");
     this.triggerEl.setAttribute("aria-expanded", String(this.activeOpen));
     this.triggerEl.setAttribute("aria-controls", this.uniqueId);
+
+    // A bare <div>/<span> trigger must be Tab-reachable. Skip anything that
+    // is (or contains) natively focusable so buttons don't get a second stop.
+    if (
+      this.triggerEl.tabIndex < 0 &&
+      !this.triggerEl.hasAttribute("tabindex") &&
+      getFocusableElements(this.triggerEl).length === 0
+    ) {
+      this.triggerEl.setAttribute("tabindex", "0");
+      if (!this.triggerEl.hasAttribute("role")) {
+        this.triggerEl.setAttribute("role", "button");
+      }
+    }
   }
 
   /* =======================

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

@@ -50,8 +50,12 @@ export class RelRangePicker extends LitElement {
   @state() private viewMonth: number = new Date().getMonth();
   @state() private isSelectingRange: boolean = false;
   @state() private hoverDate: string | null = null;
+  /** ISO date of the cell that owns the grid's single Tab stop (roving tabindex). */
+  @state() private focusedDate: string | null = null;
 
   @query(".trigger-button") private triggerButton?: HTMLButtonElement;
+  @query(".popover") private popoverEl?: HTMLDivElement;
+  @query(".backdrop") private backdropEl?: HTMLDivElement;
 
   static styles = css`
     :host {
@@ -113,6 +117,17 @@ export class RelRangePicker extends LitElement {
 
     /* ── Popover shell ── */
     .popover {
+      /* Reset native [popover] UA styles first (the shell is promoted to
+         the top layer so transformed / overflow:hidden ancestors — e.g. a
+         centered rel-modal panel — can't hijack or clip it). While in the
+         top layer, JS overrides the anchored position below with inline
+         fixed coordinates; the CSS anchoring is the no-Popover-API
+         fallback. */
+      margin: 0;
+      padding: 0;
+      width: auto;
+      height: auto;
+      color: inherit;
       position: absolute;
       top: calc(100% + 4px);
       left: 0;
@@ -137,6 +152,13 @@ export class RelRangePicker extends LitElement {
     .backdrop {
       position: fixed;
       inset: 0;
+      /* Reset native [popover] UA styles — the backdrop is promoted to the
+         top layer right before the panel so the panel stacks above it. */
+      margin: 0;
+      padding: 0;
+      width: auto;
+      height: auto;
+      border: none;
       z-index: 2147483646;
       background: rgba(0,0,0,0.4);
     }
@@ -332,6 +354,12 @@ export class RelRangePicker extends LitElement {
       cursor: pointer;
     }
 
+    .day-cell:focus-visible {
+      outline: 2px solid var(--rel-border-focus);
+      outline-offset: -2px;
+      z-index: 2;
+    }
+
     .day-cell.other-month {
       opacity: 0.35;
       pointer-events: none;
@@ -448,17 +476,111 @@ export class RelRangePicker extends LitElement {
     super.disconnectedCallback();
     document.removeEventListener("click", this.handleClickOutside);
     document.removeEventListener("keydown", this.handleGlobalKeydown);
+    window.removeEventListener("resize", this.onReposition);
+    window.removeEventListener("scroll", this.onReposition, true);
+    this.hideTopLayer();
   }
 
-  updated() {
+  updated(changed: Map<string, unknown>) {
     this.style.width = this.width;
     this.style.minWidth = this.minWidth;
     this.style.maxWidth = this.maxWidth;
     this.style.height = this.height;
     this.style.minHeight = this.minHeight;
     this.style.maxHeight = this.maxHeight;
+
+    // `open` is a public reflected property (consumers may set it directly,
+    // not only via the trigger), so top-layer promotion syncs here rather
+    // than inside openPopover/cancelPopover.
+    if (changed.has("open")) {
+      if (this.open) {
+        this.showTopLayer();
+        window.addEventListener("resize", this.onReposition);
+        window.addEventListener("scroll", this.onReposition, true);
+      } else {
+        window.removeEventListener("resize", this.onReposition);
+        window.removeEventListener("scroll", this.onReposition, true);
+        this.hideTopLayer();
+      }
+    }
   }
 
+  /* A transformed ancestor (e.g. rel-modal's centered panel with
+   * translate(-50%,-50%)) becomes the containing block for position:fixed
+   * descendants, and its overflow:hidden clips position:absolute ones —
+   * either way the picker shell breaks inside a modal. Promoting shell
+   * (and popup-mode backdrop) to the browser top layer sidesteps both —
+   * same fix as rel-popover / rel-autocomplete / rel-select. `manual`
+   * keeps outside-click and Escape handling under this component's own
+   * control. While in the top layer the CSS anchoring (absolute, below
+   * the trigger) is meaningless, so popover mode gets inline fixed
+   * coordinates from updatePopoverPosition(). */
+
+  private showTopLayer() {
+    // Backdrop first — later-shown popovers stack above earlier ones.
+    for (const el of [this.mode === "popup" ? this.backdropEl : undefined, this.popoverEl]) {
+      if (!el || typeof el.showPopover !== "function") continue;
+      try {
+        if (!el.matches(":popover-open")) el.showPopover();
+      } catch {
+        /* older engines / detached element — CSS fallback applies */
+      }
+    }
+    if (this.mode === "popover") {
+      requestAnimationFrame(() => this.updatePopoverPosition());
+    }
+  }
+
+  private hideTopLayer() {
+    for (const el of [this.popoverEl, this.backdropEl]) {
+      if (!el || typeof el.hidePopover !== "function") continue;
+      try {
+        if (el.matches(":popover-open")) el.hidePopover();
+      } catch {
+        /* already hidden or unsupported — nothing to do */
+      }
+    }
+    if (this.popoverEl) {
+      this.popoverEl.style.position = "";
+      this.popoverEl.style.top = "";
+      this.popoverEl.style.left = "";
+    }
+  }
+
+  private onReposition = () => {
+    if (this.open && this.mode === "popover") this.updatePopoverPosition();
+  };
+
+  private updatePopoverPosition = () => {
+    const panel = this.popoverEl;
+    if (!panel || !this.open || this.mode !== "popover") return;
+
+    // Host rect anchors both trigger variants (default button and icon).
+    const t = this.getBoundingClientRect();
+    const c = panel.getBoundingClientRect();
+
+    let top = t.bottom + 4;
+    if (top + c.height > window.innerHeight - 8) {
+      top = Math.max(8, t.top - c.height - 4);
+    }
+    let left = t.left;
+    if (left + c.width > window.innerWidth - 8) {
+      left = Math.max(8, window.innerWidth - c.width - 8);
+    }
+
+    // Without top-layer support a transformed ancestor may be the containing
+    // block for position:fixed, shifting the shell away from the viewport
+    // coordinates computed above. Apply, re-measure, and cancel the offset.
+    panel.style.position = "fixed";
+    panel.style.top = `${top}px`;
+    panel.style.left = `${left}px`;
+    const applied = panel.getBoundingClientRect();
+    top -= applied.top - top;
+    left -= applied.left - left;
+    panel.style.top = `${top}px`;
+    panel.style.left = `${left}px`;
+  };
+
   // ── Open / close ──
 
   private handleClickOutside = (e: MouseEvent) => {
@@ -513,6 +635,7 @@ export class RelRangePicker extends LitElement {
     this.draftActivePreset = null;
     this.isSelectingRange = false;
     this.hoverDate = null;
+    this.focusedDate = null;
 
     if (this.draftFrom) {
       const date = this.parseISODate(this.draftFrom);
@@ -868,11 +991,130 @@ export class RelRangePicker extends LitElement {
     this.hoverDate = this.formatISODate(day.date);
   }
 
+  // ── Grid keyboard navigation (APG grid pattern) ──
+
+  /**
+   * The cell that carries tabindex="0". Prefers the last roved date, then the
+   * draft start, then today, then the first selectable day — always exactly
+   * one Tab stop, even after arrowing away with nothing selected.
+   */
+  private getRovingIso(days: RangeDay[]): string {
+    const inView = days.filter((d) => d.isCurrentMonth);
+    if (inView.length === 0) return "";
+
+    const candidates = [
+      this.focusedDate,
+      this.draftFrom,
+      this.formatISODate(new Date()),
+    ];
+    for (const iso of candidates) {
+      if (iso && inView.some((d) => this.formatISODate(d.date) === iso)) {
+        return iso;
+      }
+    }
+    const firstEnabled = inView.find((d) => !d.isDisabled) ?? inView[0];
+    return this.formatISODate(firstEnabled.date);
+  }
+
+  private handleGridKeydown = (e: KeyboardEvent) => {
+    const cell = (e.target as HTMLElement).closest?.(".day-cell") as
+      | HTMLElement
+      | null;
+    const iso = cell?.dataset.iso;
+    if (!iso) return;
+    const date = this.parseISODate(iso);
+    if (!date) return;
+
+    if (e.key === "Enter" || e.key === " ") {
+      e.preventDefault();
+      const isDisabled = this.isDateDisabled(date);
+      if (!isDisabled) {
+        this.handleDayClick({
+          date,
+          day: date.getDate(),
+          isCurrentMonth: true,
+          isToday: false,
+          isDraftFrom: false,
+          isDraftTo: false,
+          isInRange: false,
+          isDisabled,
+          isWeekend: false,
+        });
+      }
+      return;
+    }
+
+    const next = new Date(date);
+    const dow = next.getDay();
+    switch (e.key) {
+      case "ArrowLeft":
+        next.setDate(next.getDate() - 1);
+        break;
+      case "ArrowRight":
+        next.setDate(next.getDate() + 1);
+        break;
+      case "ArrowUp":
+        next.setDate(next.getDate() - 7);
+        break;
+      case "ArrowDown":
+        next.setDate(next.getDate() + 7);
+        break;
+      case "Home":
+        next.setDate(
+          next.getDate() -
+            (this.weekStart === "mon" ? (dow === 0 ? 6 : dow - 1) : dow)
+        );
+        break;
+      case "End":
+        next.setDate(
+          next.getDate() +
+            (this.weekStart === "mon" ? (dow === 0 ? 0 : 7 - dow) : 6 - dow)
+        );
+        break;
+      case "PageUp":
+        if (e.shiftKey) next.setFullYear(next.getFullYear() - 1);
+        else next.setMonth(next.getMonth() - 1);
+        break;
+      case "PageDown":
+        if (e.shiftKey) next.setFullYear(next.getFullYear() + 1);
+        else next.setMonth(next.getMonth() + 1);
+        break;
+      default:
+        return;
+    }
+
+    e.preventDefault();
+    this.moveGridFocusTo(next);
+  };
+
+  private async moveGridFocusTo(date: Date) {
+    this.focusedDate = this.formatISODate(date);
+
+    if (
+      date.getMonth() !== this.viewMonth ||
+      date.getFullYear() !== this.viewYear
+    ) {
+      this.viewMonth = date.getMonth();
+      this.viewYear = date.getFullYear();
+    }
+
+    // Keyboard twin of handleDayHover: keep the range preview following focus.
+    if (this.isSelectingRange && !this.isDateDisabled(date)) {
+      this.hoverDate = this.focusedDate;
+    }
+
+    await this.updateComplete;
+    this.renderRoot
+      .querySelector<HTMLElement>(`.day-cell[data-iso="${this.focusedDate}"]`)
+      ?.focus();
+  }
+
   // ── Render ──
 
   render() {
     const quickSelects = this.getQuickSelects();
     const days = this.getCalendarDays();
+    const rovingIso = this.getRovingIso(days);
     const weekdayLabels = this.getWeekdayLabels();
 
     const draftFromDisplay = this.draftFrom ? this.formatDisplayDate(this.draftFrom) : "";
@@ -916,11 +1158,12 @@ export class RelRangePicker extends LitElement {
           `}
 
       ${isPopup && this.open
-        ? html`<div part="overlay" class="backdrop" @click=${this.cancelPopover}></div>`
+        ? html`<div part="overlay" class="backdrop" popover="manual" @click=${this.cancelPopover}></div>`
         : nothing}
 
       <div
         part="panel" class="popover ${this.open ? "open" : ""} ${isPopup ? "popup" : ""}"
+        popover="manual"
         role="dialog"
         aria-label="Select date range"
       >
@@ -1006,8 +1249,10 @@ export class RelRangePicker extends LitElement {
               role="grid"
               aria-label="Select date range"
               @mouseleave=${() => { this.hoverDate = null; }}
+              @keydown=${this.handleGridKeydown}
             >
               ${days.map((day) => {
+                const iso = this.formatISODate(day.date);
                 const cellClasses = [
                   "day-cell",
                   day.isInRange ? "in-range" : "",
@@ -1025,8 +1270,11 @@ export class RelRangePicker extends LitElement {
                   <div
                     class="${cellClasses}"
                     role="gridcell"
-                    aria-label="${this.formatISODate(day.date)}"
+                    tabindex="${day.isCurrentMonth && iso === rovingIso ? 0 : -1}"
+                    data-iso="${iso}"
+                    aria-label="${iso}"
                     aria-selected="${day.isDraftFrom || day.isDraftTo || day.isInRange}"
+                    aria-disabled="${day.isDisabled ? "true" : nothing}"
                     @click=${() => this.handleDayClick(day)}
                     @mouseenter=${() => this.handleDayHover(day)}
                   >

package/dist/components/rel-resizable/rel-resizable-group.ts

@@ -94,6 +94,16 @@ export class RelResizableGroup extends LitElement {
     // Calculate initial sizes
     const sizes = this.calculateInitialSizes();
     this.applySizes(sizes);
+
+    // Initialize each handle's aria-valuenow — before this, AT had no value
+    // to announce until the first drag/keypress.
+    this.handles.forEach((handle, idx) => {
+      const left = sizes[idx];
+      const right = sizes[idx + 1];
+      if (left !== undefined && right !== undefined && left + right > 0) {
+        handle.updateAriaValue((left / (left + right)) * 100);
+      }
+    });
   }
 
   private calculateInitialSizes(): number[] {
@@ -275,6 +285,16 @@ export class RelResizableGroup extends LitElement {
       const delta = e.key === "ArrowUp" ? -step : step;
       this.applyKeyboardResize(handleIndex, delta);
       applied = true;
+    } else if (e.key === "Home" || e.key === "End") {
+      // APG window-splitter: Home collapses the leading panel to its min,
+      // End grows it to its max (both still clamped by the neighbor).
+      const leftPanel = this.panels[handleIndex];
+      if (leftPanel && handleIndex + 1 < this.panels.length) {
+        e.preventDefault();
+        const target = e.key === "Home" ? leftPanel.minSize : leftPanel.maxSize;
+        this.applyKeyboardResize(handleIndex, target - leftPanel.currentSize);
+        applied = true;
+      }
     }
 
     if (applied) {

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

@@ -108,21 +108,21 @@ export class RelSegmentedButton extends LitElement {
 
     /* Sizes */
     .segmented-buttons.small .segment {
-      padding: var(--rel-spacing-3xs) var(--rel-spacing-xs);
-      font-family: var(--rel-body-xs-regular-font-family);
+      padding: var(--rel-spacing-3xs) var(--rel-spacing-xs);
+      font-family: var(--rel-body-xs-regular-font-family);
       font-weight: var(--rel-body-xs-semibold-font-weight);
       font-size: var(--rel-body-xs-semibold-font-size);
       line-height: var(--rel-body-xs-semibold-line-height);
-      letter-spacing: var(--rel-body-xs-semibold-letter-spacing);
+      letter-spacing: var(--rel-body-xs-semibold-letter-spacing);
     }
 
     .segmented-buttons.medium .segment {
-      padding: var(--rel-spacing-2xs) var(--rel-spacing-md);
-      font-family: var(--rel-body-sm-regular-font-family);
-      font-weight: var(--rel-body-sm-regular-font-weight);
-      font-size: var(--rel-body-sm-regular-font-size);
-      line-height: var(--rel-body-sm-regular-line-height);
-      letter-spacing: var(--rel-body-sm-regular-letter-spacing);
+      padding: var(--rel-spacing-2xs) var(--rel-spacing-md);
+      font-family: var(--rel-body-sm-regular-font-family);
+      font-weight: var(--rel-body-sm-regular-font-weight);
+      font-size: var(--rel-body-sm-regular-font-size);
+      line-height: var(--rel-body-sm-regular-line-height);
+      letter-spacing: var(--rel-body-sm-regular-letter-spacing);
     }
   `;
 
@@ -139,7 +139,33 @@ export class RelSegmentedButton extends LitElement {
     }
   }
 
-  private renderSegment(option: SegmentOption) {
+  /** APG radio-group navigation: arrows move focus AND select, the group is
+   *  one Tab stop (roving tabindex on the selected segment). */
+  private onKeyDown = (e: KeyboardEvent) => {
+    const prevKey = e.key === "ArrowLeft" || e.key === "ArrowUp";
+    const nextKey = e.key === "ArrowRight" || e.key === "ArrowDown";
+    if (!prevKey && !nextKey && e.key !== "Home" && e.key !== "End") return;
+
+    const enabled = this.options.filter((o) => !o.disabled);
+    if (enabled.length === 0) return;
+    e.preventDefault();
+
+    const currentIdx = enabled.findIndex((o) => o.value === this.active);
+    let target: number;
+    if (e.key === "Home") target = 0;
+    else if (e.key === "End") target = enabled.length - 1;
+    else if (prevKey) target = currentIdx <= 0 ? enabled.length - 1 : currentIdx - 1;
+    else target = (currentIdx + 1) % enabled.length;
+
+    this.setActive(enabled[target]);
+    this.updateComplete.then(() => {
+      this.shadowRoot
+        ?.querySelector<HTMLElement>('button[tabindex="0"]')
+        ?.focus();
+    });
+  };
+
+  private renderSegment(option: SegmentOption, rovingValue: string | null) {
     const isActive = this.active === option.value;
     const classes = [
       "segment",
@@ -152,6 +178,9 @@ export class RelSegmentedButton extends LitElement {
     return html`
       <button
         part="option" class="${classes}"
+        role="radio"
+        aria-checked="${isActive}"
+        tabindex="${!option.disabled && option.value === rovingValue ? 0 : -1}"
         ?disabled="${option.disabled}"
         @click="${() => this.setActive(option)}">
         ${option.label}
@@ -166,9 +195,18 @@ export class RelSegmentedButton extends LitElement {
       `align-${this.align}`,
     ].join(" ");
 
+    const enabled = this.options.filter((o) => !o.disabled);
+    const rovingValue = enabled.some((o) => o.value === this.active)
+      ? this.active
+      : enabled[0]?.value ?? null;
+
     return html`
-      <div part="base" class="${containerClasses}">
-        ${this.options.map((option) => this.renderSegment(option))}
+      <div
+        part="base" class="${containerClasses}"
+        role="radiogroup"
+        @keydown="${this.onKeyDown}"
+      >
+        ${this.options.map((option) => this.renderSegment(option, rovingValue))}
       </div>
     `;
   }

package/dist/components/rel-select/README.md

@@ -119,3 +119,4 @@ None exposed.
 - Typed text that doesn't exactly match (case-insensitive) any option reverts to the last committed `selected` value on blur, Escape, or Tab
 - The ghost-text suggestion shows the remainder of the first option whose name starts with the typed text (case-insensitive); it has no effect on filtering, which matches substrings anywhere in an option
 - Dropdown panel is positioned via `position: fixed` and flips above the trigger if there isn't enough viewport space below
+- The open listbox is promoted to the browser **top layer** (native Popover API, `popover="manual"`), so it renders correctly inside transformed / `overflow: hidden` containers — a centered `rel-modal`, a bottom `rel-drawer`. Engines without the Popover API fall back to `position: fixed` with a measure-and-cancel correction for transformed ancestors