@reliability-design/web 1.4.4 → 1.4.5

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

@@ -50,6 +50,8 @@ 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;
@@ -352,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;
@@ -627,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);
@@ -982,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) : "";
@@ -1121,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" : "",
@@ -1140,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/rel-select.ts

@@ -103,6 +103,11 @@ export class RelSelect extends LitElement {
 
   @state() private open = false;
   @state() private highlightedIndex = -1;
+  /** Virtual highlight on the Select-All header row (multi mode). */
+  @state() private selectAllHighlighted = false;
+
+  private typeaheadBuffer = "";
+  private typeaheadTimer: number | undefined;
   @state() private panelStyle = "";
   @state() private searchValue = "";
   @state() private internalState: "default" | "focused" = "default";
@@ -571,6 +576,10 @@ export class RelSelect extends LitElement {
       padding: 12px;
     }
 
+    .select-all-row.highlighted {
+      background: var(--rel-select-option-hover, var(--rel-bg-neutral-elevated-1));
+    }
+
     .select-empty {
       padding: var(--rel-spacing-xs) 12px;
       color: var(--rel-select-placeholder-color, var(--rel-text-body));
@@ -769,6 +778,7 @@ export class RelSelect extends LitElement {
     // before the user has touched anything reads as an unintended default.
     // Highlight only kicks in once they actually hover or press an arrow key.
     this.highlightedIndex = -1;
+    this.selectAllHighlighted = false;
     this.addGlobalListeners();
     requestAnimationFrame(() => {
       this.showNativePopover();
@@ -903,6 +913,20 @@ export class RelSelect extends LitElement {
 
   private onTriggerKeyDown(e: KeyboardEvent) {
     if (this.state === "disabled") return;
+
+    // Chips render inside the trigger <button>, so their remove buttons can
+    // never be tab stops — Backspace/Delete is the keyboard path for
+    // removing the most recent selection (standard multi-combobox behavior).
+    if (
+      this.multiple &&
+      (e.key === "Backspace" || e.key === "Delete") &&
+      this.selectedValues.length > 0
+    ) {
+      e.preventDefault();
+      this.removeChip(this.selectedValues[this.selectedValues.length - 1]);
+      return;
+    }
+
     if (!this.open) {
       if (["ArrowDown", "ArrowUp", "Enter", " "].includes(e.key)) {
         e.preventDefault();
@@ -918,31 +942,79 @@ export class RelSelect extends LitElement {
   private onSearchInput = (e: InputEvent) => {
     this.searchValue = (e.target as HTMLInputElement).value;
     this.highlightedIndex = this.filteredOptions.length > 0 ? 0 : -1;
+    this.selectAllHighlighted = false;
     requestAnimationFrame(() => this.updatePosition());
   };
 
   private onSearchKeyDown(e: KeyboardEvent) {
+    // Backspace in an empty search field removes the last chip (see
+    // onTriggerKeyDown for the rationale).
+    if (
+      this.multiple &&
+      e.key === "Backspace" &&
+      this.searchValue === "" &&
+      this.selectedValues.length > 0
+    ) {
+      this.removeChip(this.selectedValues[this.selectedValues.length - 1]);
+      return;
+    }
     this.handleListNavigation(e);
   }
 
   private handleListNavigation(e: KeyboardEvent) {
     const filtered = this.filteredOptions;
+    // The Select-All row participates in arrow navigation as a virtual row
+    // above the first option — it lives in the panel header, outside the
+    // option list, and would otherwise be keyboard-unreachable.
+    const hasSelectAll = this.multiple && filtered.length > 0;
+
     switch (e.key) {
       case "ArrowDown":
         e.preventDefault();
-        this.highlightedIndex = Math.min(filtered.length - 1, this.highlightedIndex + 1);
+        if (this.selectAllHighlighted) {
+          this.selectAllHighlighted = false;
+          this.highlightedIndex = filtered.length > 0 ? 0 : -1;
+        } else if (this.highlightedIndex === -1 && hasSelectAll) {
+          this.selectAllHighlighted = true;
+        } else {
+          this.highlightedIndex = Math.min(filtered.length - 1, this.highlightedIndex + 1);
+        }
+        this.scrollHighlightedIntoView();
         break;
       case "ArrowUp":
         e.preventDefault();
-        this.highlightedIndex = Math.max(0, this.highlightedIndex - 1);
+        if (!this.selectAllHighlighted && this.highlightedIndex <= 0 && hasSelectAll) {
+          this.highlightedIndex = -1;
+          this.selectAllHighlighted = true;
+        } else {
+          this.highlightedIndex = Math.max(0, this.highlightedIndex - 1);
+        }
+        this.scrollHighlightedIntoView();
+        break;
+      case "Home":
+        if (filtered.length === 0) break;
+        e.preventDefault();
+        this.selectAllHighlighted = false;
+        this.highlightedIndex = 0;
+        this.scrollHighlightedIntoView();
+        break;
+      case "End":
+        if (filtered.length === 0) break;
+        e.preventDefault();
+        this.selectAllHighlighted = false;
+        this.highlightedIndex = filtered.length - 1;
+        this.scrollHighlightedIntoView();
+        break;
+      case " ":
+        // With a search field, Space types into it; only the no-search mode
+        // (trigger holds focus) treats Space as toggle/select.
+        if (!this.noSearch) return;
+        e.preventDefault();
+        this.activateHighlighted();
         break;
       case "Enter":
         e.preventDefault();
-        if (this.highlightedIndex >= 0 && filtered[this.highlightedIndex]) {
-          const opt = filtered[this.highlightedIndex];
-          if (this.multiple) this.toggleMultiOption(opt);
-          else this.selectSingleOption(opt);
-        }
+        this.activateHighlighted();
         break;
       case "Escape":
         e.preventDefault();
@@ -951,9 +1023,67 @@ export class RelSelect extends LitElement {
       case "Tab":
         this.closeListbox();
         break;
+      default:
+        this.handleTypeahead(e);
+        break;
+    }
+  }
+
+  /** APG typeahead for the no-search mode (with a search field, typing
+   *  filters instead). Accumulates printable keys for 500 ms and jumps the
+   *  highlight to the next option whose label starts with the buffer. */
+  private handleTypeahead(e: KeyboardEvent) {
+    if (!this.noSearch) return;
+    if (e.key.length !== 1 || e.ctrlKey || e.metaKey || e.altKey) return;
+
+    e.preventDefault();
+    const isNewQuery = this.typeaheadBuffer === "";
+    this.typeaheadBuffer += e.key.toLowerCase();
+    clearTimeout(this.typeaheadTimer);
+    this.typeaheadTimer = window.setTimeout(() => {
+      this.typeaheadBuffer = "";
+    }, 500);
+
+    const filtered = this.filteredOptions;
+    if (filtered.length === 0) return;
+
+    // A fresh single-letter query starts searching AFTER the highlight (so
+    // repeated presses cycle through matches); a growing buffer re-tests the
+    // current one first.
+    const start = Math.max(0, this.highlightedIndex) + (isNewQuery ? 1 : 0);
+    for (let offset = 0; offset < filtered.length; offset++) {
+      const idx = (start + offset) % filtered.length;
+      if (filtered[idx].label.toLowerCase().startsWith(this.typeaheadBuffer)) {
+        this.selectAllHighlighted = false;
+        this.highlightedIndex = idx;
+        this.scrollHighlightedIntoView();
+        return;
+      }
+    }
+  }
+
+  private activateHighlighted() {
+    if (this.selectAllHighlighted) {
+      this.toggleSelectAll();
+      return;
+    }
+    const filtered = this.filteredOptions;
+    if (this.highlightedIndex >= 0 && filtered[this.highlightedIndex]) {
+      const opt = filtered[this.highlightedIndex];
+      if (this.multiple) this.toggleMultiOption(opt);
+      else this.selectSingleOption(opt);
     }
   }
 
+  private scrollHighlightedIntoView() {
+    if (this.highlightedIndex < 0) return;
+    requestAnimationFrame(() => {
+      this.renderRoot
+        .querySelector<HTMLElement>(`#${this.uniqueId}-option-${this.highlightedIndex}`)
+        ?.scrollIntoView({ block: "nearest" });
+    });
+  }
+
   private renderChips() {
     const values = this.selectedValues;
     const visible = values.slice(0, Math.min(this.visibleChipCount, this.maxVisibleChips));
@@ -1046,8 +1176,13 @@ export class RelSelect extends LitElement {
       .join(" ");
 
     const listboxId = `${this.uniqueId}-listbox`;
-    const activeOptionId =
-      this.open && this.highlightedIndex >= 0 ? `${this.uniqueId}-option-${this.highlightedIndex}` : "";
+    const activeOptionId = !this.open
+      ? ""
+      : this.selectAllHighlighted
+      ? `${this.uniqueId}-select-all`
+      : this.highlightedIndex >= 0
+      ? `${this.uniqueId}-option-${this.highlightedIndex}`
+      : "";
 
     const selectedSingle = opts.find((o) => o.value === this.selected);
 
@@ -1145,7 +1280,17 @@ export class RelSelect extends LitElement {
                   </div>`
                 : ""}
               ${this.multiple && filtered.length > 0
-                ? html`<div class="select-all-row">
+                ? html`<div
+                    id="${this.uniqueId}-select-all"
+                    class="select-all-row ${this.selectAllHighlighted ? "highlighted" : ""}"
+                    role="option"
+                    aria-selected="${this.selectAllStatus === "checked"}"
+                    @pointerenter="${() => {
+                      this.selectAllHighlighted = true;
+                      this.highlightedIndex = -1;
+                    }}"
+                    @pointerleave="${() => (this.selectAllHighlighted = false)}"
+                  >
                     <rel-checkbox
                       label="${this.selectAllLabel}"
                       status="${this.selectAllStatus}"
@@ -1175,7 +1320,10 @@ export class RelSelect extends LitElement {
                       class="checkbox-option ${index === this.highlightedIndex ? "highlighted" : ""}"
                       role="option"
                       aria-selected="${this.selectedValues.includes(option.value)}"
-                      @pointerenter="${() => (this.highlightedIndex = index)}"
+                      @pointerenter="${() => {
+                        this.highlightedIndex = index;
+                        this.selectAllHighlighted = false;
+                      }}"
                     >
                       <rel-checkbox
                         label="${option.label}"

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

@@ -1,6 +1,7 @@
 import { LitElement, html, css } from "lit";
 import { customElement, property, query } from "lit/decorators.js";
 import "@reliability-design/icons/rel-icon";
+import { getDeepActiveElement, getFocusableElements, trapTabKey } from "../../utils/focus.js";
 
 export type ModalSide = "top" | "bottom" | "center";
 
@@ -21,6 +22,7 @@ export class RelModal extends LitElement {
   breakpoint: "responsive" | "web" = "responsive";
 
   @query(".overlay") private overlayElement!: HTMLElement;
+  @query(".panel") private panelElement!: HTMLElement;
 
   private previousFocus: HTMLElement | null = null;
   private originalBodyOverflow = "";
@@ -322,9 +324,23 @@ export class RelModal extends LitElement {
   }
 
   private handleOpen() {
-    this.previousFocus = document.activeElement as HTMLElement;
+    // Deep-resolved — document.activeElement retargets to shadow hosts whose
+    // .focus() may be a no-op, silently dropping the restore.
+    this.previousFocus = getDeepActiveElement();
     this.lockScroll();
     document.addEventListener("keydown", this.handleKeydown);
+
+    // Move focus into the dialog — before this, a keyboard user had to Tab
+    // through the entire page behind the overlay to reach the sheet.
+    if (this.modal) {
+      this.updateComplete.then(() => {
+        const panel = this.panelElement;
+        if (!panel) return;
+        const focusTarget = getFocusableElements(panel)[0];
+        if (focusTarget) focusTarget.focus();
+        else panel.focus();
+      });
+    }
     this.dispatchEvent(
       new CustomEvent("rel-open-change", {
         detail: true,
@@ -374,6 +390,11 @@ export class RelModal extends LitElement {
     if (e.key === "Escape" && this.dismissible) {
       e.preventDefault();
       this.open = false;
+      return;
+    }
+    // aria-modal promised containment; actually deliver it.
+    if (e.key === "Tab" && this.modal && this.panelElement) {
+      trapTabKey(e, this.panelElement);
     }
   };