@reliability-design/web 1.4.4 → 1.4.6

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

@@ -1,7 +1,11 @@
 import { LitElement, html, css, nothing } from "lit";
 import { customElement, property, state, query } from "lit/decorators.js";
+import { live } from "lit/directives/live.js";
 import "@reliability-design/icons/rel-icon";
 import "../rel-button/rel-button";
+import { announce } from "../../utils/announce";
+import { isEditableTarget } from "../../utils/shortcuts";
+import { parseDateInput } from "../rel-date-picker/date-parse";
 
 interface RangeDay {
   date: Date;
@@ -42,6 +46,7 @@ export class RelRangePicker extends LitElement {
   @property({ type: String, attribute: "max-height" }) maxHeight: string = "";
   @property({ type: String }) placeholder: string = "Select date range";
   @property({ type: String, attribute: "trigger-variant" }) triggerVariant: "default" | "icon" = "default";
+  @property({ type: Boolean }) clearable = false;
 
   @state() private draftFrom: string = "";
   @state() private draftTo: string = "";
@@ -50,8 +55,14 @@ export class RelRangePicker extends LitElement {
   @state() private viewMonth: number = new Date().getMonth();
   @state() private isSelectingRange: boolean = false;
   @state() private hoverDate: string | null = null;
-
-  @query(".trigger-button") private triggerButton?: HTMLButtonElement;
+  /** ISO date of the cell that owns the grid's single Tab stop (roving tabindex). */
+  @state() private focusedDate: string | null = null;
+  /** Uncommitted typed text; null → the input shows the committed range. */
+  @state() private inputText: string | null = null;
+  /** Parse/range error message for the typed text (cleared on next input). */
+  @state() private inputError: string | null = null;
+
+  @query(".trigger-input") private triggerInput?: HTMLInputElement;
   @query(".popover") private popoverEl?: HTMLDivElement;
   @query(".backdrop") private backdropEl?: HTMLDivElement;
 
@@ -95,22 +106,81 @@ export class RelRangePicker extends LitElement {
       letter-spacing: var(--rel-body-md-regular-letter-spacing);
     }
 
-    .trigger-button:hover:not(:disabled) {
+    :host(:not([disabled])) .trigger-button:hover {
       border-color: var(--rel-border-accent);
     }
 
-    .trigger-button:focus-visible {
+    .trigger-button:focus-within {
       outline: 2px solid var(--rel-border-focus);
       outline-offset: 2px;
     }
 
-    .trigger-content {
+    .trigger-button.error {
+      border-color: var(--rel-border-danger);
+    }
+
+    .trigger-button.error:focus-within {
+      outline-color: var(--rel-border-danger);
+    }
+
+    /* The editable field itself — the wrapper carries the box styles. */
+    .trigger-input {
       flex: 1;
+      min-width: 0;
+      border: none;
+      background: transparent;
+      padding: 0;
+      margin: 0;
+      outline: none;
       color: var(--rel-text-default);
+      font: inherit;
+      letter-spacing: inherit;
+      cursor: inherit;
     }
 
-    .trigger-content.placeholder {
+    .trigger-input::placeholder {
       color: var(--rel-text-placeholder);
+      opacity: 1;
+    }
+
+    /* Typed-entry error line (the component has no helper-text API). */
+    .range-picker-support.error {
+      margin-top: var(--rel-spacing-2xs);
+      color: var(--rel-text-danger);
+      font-family: var(--rel-body-xs-regular-font-family);
+      font-weight: var(--rel-body-xs-regular-font-weight);
+      font-size: var(--rel-body-xs-regular-font-size);
+      line-height: var(--rel-body-xs-regular-line-height);
+      letter-spacing: var(--rel-body-xs-regular-letter-spacing);
+    }
+
+    .trigger-icons {
+      display: flex;
+      align-items: center;
+      gap: var(--rel-spacing-2xs);
+    }
+
+    .icon-button {
+      background: none;
+      border: none;
+      padding: var(--rel-spacing-3xs);
+      cursor: pointer;
+      color: var(--rel-text-placeholder);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      border-radius: var(--rel-border-radius-xs);
+      transition: all 0.15s ease;
+    }
+
+    .icon-button:hover {
+      background: var(--rel-bg-surface-elevated);
+      color: var(--rel-text-default);
+    }
+
+    .icon-button svg {
+      width: 16px;
+      height: 16px;
     }
 
     /* ── Popover shell ── */
@@ -134,7 +204,13 @@ export class RelRangePicker extends LitElement {
       border-radius: var(--rel-border-radius-sm, 8px);
       background: var(--rel-bg-neutral);
       box-shadow: var(--rel-shadows-shadow-200);
-      overflow: visible;
+      /* Never wider or taller than the viewport (small screens) — the
+         two-calendar layout scrolls inside the shell instead of bleeding
+         off-screen. border-box so the caps include the 1px borders. */
+      box-sizing: border-box;
+      max-width: calc(100vw - 16px);
+      max-height: calc(100vh - 16px);
+      overflow: auto;
       display: none;
     }
 
@@ -225,6 +301,28 @@ export class RelRangePicker extends LitElement {
       grid-column: 1 / -1;
     }
 
+    /* Single-key hint chip on each preset (T, M, W, …). */
+    .preset-key {
+      flex-shrink: 0;
+      margin-left: var(--rel-spacing-2xs);
+      border: 1px solid var(--rel-border-default);
+      border-bottom-width: 2px;
+      border-radius: var(--rel-border-radius-xs);
+      background: var(--rel-bg-surface);
+      padding: 0 var(--rel-spacing-3xs);
+      min-width: 18px;
+      text-align: center;
+      font-family: var(--rel-body-xs-regular-font-family);
+      font-weight: var(--rel-body-xs-regular-font-weight);
+      font-size: var(--rel-body-xs-regular-font-size);
+      line-height: var(--rel-body-xs-regular-line-height);
+      color: var(--rel-text-label);
+    }
+
+    .preset-item.active .preset-key {
+      display: none;
+    }
+
     /* ── FROM/TO inputs ── */
     .date-inputs {
       display: flex;
@@ -338,11 +436,23 @@ export class RelRangePicker extends LitElement {
     }
 
     /* ── Calendar grid ── */
+    .calendar-table {
+      display: flex;
+      flex-direction: column;
+      gap: 6px;
+    }
+
     .calendar-grid {
       display: grid;
       grid-template-columns: repeat(7, 1fr);
     }
 
+    .calendar-week {
+      grid-column: 1 / -1;
+      display: grid;
+      grid-template-columns: repeat(7, 1fr);
+    }
+
     .day-cell {
       height: 36px;
       position: relative;
@@ -352,6 +462,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;
@@ -450,7 +566,7 @@ export class RelRangePicker extends LitElement {
     }
 
     @media (prefers-reduced-motion: reduce) {
-      .preset-item, .nav-btn, .day-inner {
+      .preset-item, .nav-btn, .day-inner, .icon-button {
         transition: none;
       }
     }
@@ -557,8 +673,9 @@ export class RelRangePicker extends LitElement {
     }
     let left = t.left;
     if (left + c.width > window.innerWidth - 8) {
-      left = Math.max(8, window.innerWidth - c.width - 8);
+      left = window.innerWidth - c.width - 8;
     }
+    left = Math.max(8, left);
 
     // Without top-layer support a transformed ancestor may be the containing
     // block for position:fixed, shifting the shell away from the viewport
@@ -588,11 +705,15 @@ export class RelRangePicker extends LitElement {
 
     if (e.key === "Escape") {
       this.cancelPopover();
-      this.triggerButton?.focus();
+      this.triggerInput?.focus();
       return;
     }
 
-    if ((e.target as HTMLElement)?.tagName === "INPUT") return;
+    // composedPath-aware: a document-level e.target retargets to the host,
+    // so a plain tagName check misses the typed-entry input in the shadow
+    // root — single-key preset shortcuts must not fire while typing.
+    if (isEditableTarget(e)) return;
+    if (e.ctrlKey || e.metaKey || e.altKey) return;
 
     const key = e.key.toUpperCase();
     const keyMap: Record<string, string> = {
@@ -627,6 +748,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);
@@ -668,27 +790,30 @@ export class RelRangePicker extends LitElement {
   }
 
   private applySelection() {
-    if (this.draftFrom || this.draftTo) {
-      this.from = this.draftFrom;
-      this.to = this.draftTo;
-      this.dispatchEvent(
-        new CustomEvent("rel-change", {
-          detail: { from: this.from, to: this.to, label: this.displayLabel },
-          bubbles: true,
-          composed: true,
-        })
-      );
-      this.open = false;
-      this.isSelectingRange = false;
-      this.hoverDate = null;
-      this.dispatchEvent(
-        new CustomEvent("rel-open-change", {
-          detail: { open: false },
-          bubbles: true,
-          composed: true,
-        })
-      );
-    }
+    // An empty draft is committable when a committed range exists — this is
+    // how Reset propagates to the trigger (Reset → Apply clears the input).
+    if (!this.draftFrom && !this.draftTo && !this.from && !this.to) return;
+    this.from = this.draftFrom;
+    this.to = this.draftTo;
+    this.inputText = null;
+    this.inputError = null;
+    this.dispatchEvent(
+      new CustomEvent("rel-change", {
+        detail: { from: this.from, to: this.to, label: this.displayLabel },
+        bubbles: true,
+        composed: true,
+      })
+    );
+    this.open = false;
+    this.isSelectingRange = false;
+    this.hoverDate = null;
+    this.dispatchEvent(
+      new CustomEvent("rel-open-change", {
+        detail: { open: false },
+        bubbles: true,
+        composed: true,
+      })
+    );
   }
 
   private resetDraft() {
@@ -701,6 +826,162 @@ export class RelRangePicker extends LitElement {
     }
   }
 
+  private clearRange(e: Event) {
+    e.stopPropagation();
+    this.from = "";
+    this.to = "";
+    this.draftFrom = "";
+    this.draftTo = "";
+    this.draftActivePreset = null;
+    this.isSelectingRange = false;
+    this.hoverDate = null;
+    this.inputText = null;
+    this.inputError = null;
+    this.dispatchEvent(
+      new CustomEvent("rel-change", {
+        detail: { from: "", to: "", label: "" },
+        bubbles: true,
+        composed: true,
+      })
+    );
+  }
+
+  // ── Typed keyboard entry ──
+
+  /**
+   * Parse "date → date" text into an ISO from/to pair, or null. Each side
+   * goes through rel-date-picker's parseDateInput, so ISO / numeric /
+   * month-name dates and the t / t±N shortcuts all work per side.
+   * Separators: "→", "..", spaced "-", or the word "to" ("t - t+7",
+   * "21/7 to 28/7"). A single date yields a one-day range. Reversed input
+   * is normalized (from ≤ to). dayFirst is hard-coded false because the
+   * displayed format is always MM/DD/YYYY.
+   */
+  private parseRangeText(text: string): { from: string; to: string } | null {
+    const parts = text
+      .split(/\s+to\s+|\s*(?:→|\.\.)\s*|\s+-\s+/i)
+      .map((p) => p.trim())
+      .filter(Boolean);
+    if (parts.length < 1 || parts.length > 2) return null;
+
+    const opts = { referenceDate: new Date(), dayFirst: false, locale: this.locale };
+    const fromDate = parseDateInput(parts[0], opts);
+    if (!fromDate) return null;
+    const toDate = parts.length === 2 ? parseDateInput(parts[1], opts) : fromDate;
+    if (!toDate) return null;
+
+    const [a, b] =
+      fromDate.getTime() <= toDate.getTime() ? [fromDate, toDate] : [toDate, fromDate];
+    return { from: this.formatISODate(a), to: this.formatISODate(b) };
+  }
+
+  /**
+   * Parse and commit the typed text (Enter / blur). Invalid or out-of-range
+   * text keeps the field in an error state with the text preserved for
+   * correction; the committed range is untouched (Escape reverts the text).
+   */
+  private commitTypedValue() {
+    if (this.inputText === null) return; // nothing typed since last commit
+    const text = this.inputText.trim();
+
+    if (!text) {
+      // Field cleared by keyboard — behaves like the clear button.
+      this.inputText = null;
+      this.inputError = null;
+      if (this.from || this.to) {
+        this.from = "";
+        this.to = "";
+        this.draftFrom = "";
+        this.draftTo = "";
+        this.draftActivePreset = null;
+        this.dispatchEvent(
+          new CustomEvent("rel-change", {
+            detail: { from: "", to: "", label: "" },
+            bubbles: true,
+            composed: true,
+          })
+        );
+      }
+      if (this.open) this.cancelPopover();
+      return;
+    }
+
+    const range = this.parseRangeText(text);
+    if (!range) {
+      this.inputError = "Invalid date range";
+      return;
+    }
+    const fromDate = this.parseISODate(range.from)!;
+    const toDate = this.parseISODate(range.to)!;
+    if (this.isDateDisabled(fromDate) || this.isDateDisabled(toDate)) {
+      this.inputError = "Date not available";
+      return;
+    }
+
+    this.from = range.from;
+    this.to = range.to;
+    this.inputText = null;
+    this.inputError = null;
+    this.dispatchEvent(
+      new CustomEvent("rel-change", {
+        detail: { from: this.from, to: this.to, label: this.displayLabel },
+        bubbles: true,
+        composed: true,
+      })
+    );
+    if (this.open) this.cancelPopover();
+  }
+
+  private handleInputInput(e: Event) {
+    this.inputText = (e.target as HTMLInputElement).value;
+    if (this.inputError) this.inputError = null;
+  }
+
+  private handleInputKeydown(e: KeyboardEvent) {
+    if (e.key === "Enter") {
+      e.preventDefault();
+      if (this.inputText === null) {
+        // Nothing typed — Enter opens the panel (previous trigger behavior).
+        if (!this.open) this.openPopover();
+      } else {
+        this.commitTypedValue();
+      }
+      return;
+    }
+    if (e.key === "ArrowDown") {
+      e.preventDefault();
+      if (!this.open) this.openPopover();
+      return;
+    }
+    if (e.key === "Escape" && this.inputText !== null) {
+      // Revert the typed text; the document listener closes the panel.
+      this.inputText = null;
+      this.inputError = null;
+    }
+  }
+
+  /** Clicking anywhere on the field opens the panel (never closes). */
+  private handleFieldClick() {
+    if (this.open || this.disabled) return;
+    this.openPopover();
+  }
+
+  /** The calendar icon toggles the panel (previous trigger behavior). */
+  private handleIconClick(e: Event) {
+    e.stopPropagation();
+    this.toggleOpen();
+  }
+
+  /** Commit typed text when focus leaves the component entirely. */
+  private handleInputBlur = (e: FocusEvent) => {
+    this.dispatchEvent(new CustomEvent("rel-blur", { bubbles: true, composed: true }));
+    const related = e.relatedTarget as Node | null;
+    if (related && (this.renderRoot.contains(related) || this.contains(related))) {
+      return; // focus moved into the panel/icons — their own handlers commit
+    }
+    this.commitTypedValue();
+  };
+
   private getTriggerLabel(): string {
     const from = this.from ? this.formatDisplayDate(this.from) : null;
     const to = this.to ? this.formatDisplayDate(this.to) : null;
@@ -823,6 +1104,7 @@ export class RelRangePicker extends LitElement {
     } else {
       this.viewMonth--;
     }
+    announce(`${this.getMonthName()} ${this.viewYear}`);
   }
 
   private nextMonth() {
@@ -832,6 +1114,7 @@ export class RelRangePicker extends LitElement {
     } else {
       this.viewMonth++;
     }
+    announce(`${this.getMonthName()} ${this.viewYear}`);
   }
 
   private getMonthName(): string {
@@ -840,6 +1123,23 @@ export class RelRangePicker extends LitElement {
     );
   }
 
+  private dayLabelFormatter: Intl.DateTimeFormat | null = null;
+
+  private formatDayLabel(day: RangeDay): string {
+    if (!this.dayLabelFormatter) {
+      this.dayLabelFormatter = new Intl.DateTimeFormat("en-US", {
+        weekday: "long",
+        month: "long",
+        day: "numeric",
+        year: "numeric",
+      });
+    }
+    let label = this.dayLabelFormatter.format(day.date);
+    if (day.isDraftFrom) label += ", range start";
+    if (day.isDraftTo) label += ", range end";
+    return label;
+  }
+
   private getWeekdayLabels(): string[] {
     const formatter = new Intl.DateTimeFormat("en-US", { weekday: "short" });
     const base = new Date(2024, 0, 7); // Sunday Jan 7 2024
@@ -956,19 +1256,23 @@ export class RelRangePicker extends LitElement {
       this.draftActivePreset = null;
       this.isSelectingRange = true;
       this.hoverDate = null;
+      announce(`From date ${this.formatDisplayDate(iso)}`);
     } else {
       const fromDate = this.parseISODate(this.draftFrom);
       if (!fromDate) {
         this.draftFrom = iso;
         this.draftTo = "";
+        announce(`From date ${this.formatDisplayDate(iso)}`);
         return;
       }
 
       if (day.date.getTime() >= fromDate.getTime()) {
         this.draftTo = iso;
+        announce(`To date ${this.formatDisplayDate(iso)}`);
       } else {
         this.draftTo = this.draftFrom;
         this.draftFrom = iso;
+        announce(`From date ${this.formatDisplayDate(iso)}`);
       }
 
       this.isSelectingRange = false;
@@ -982,12 +1286,135 @@ 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 weeks: RangeDay[][] = [];
+    for (let i = 0; i < days.length; i += 7) {
+      weeks.push(days.slice(i, i + 7));
+    }
 
     const draftFromDisplay = this.draftFrom ? this.formatDisplayDate(this.draftFrom) : "";
     const draftToDisplay = this.draftTo ? this.formatDisplayDate(this.draftTo) : "";
@@ -1011,22 +1438,71 @@ export class RelRangePicker extends LitElement {
             </rel-button>
           `
         : html`
-            <button
-              part="trigger" class="trigger-button"
-              type="button"
-              ?disabled=${this.disabled}
-              aria-haspopup="dialog"
-              aria-expanded=${this.open}
-              aria-label=${triggerLabel || this.placeholder}
-              @click=${this.toggleOpen}
+            <div
+              part="trigger"
+              class="trigger-button ${this.inputError ? "error" : ""}"
+              @click=${this.handleFieldClick}
             >
-              <span class="trigger-content ${triggerLabel ? "" : "placeholder"}">
-                ${triggerLabel || this.placeholder}
+              <input
+                part="value"
+                class="trigger-input"
+                type="text"
+                .value=${live(this.inputText ?? triggerLabel)}
+                placeholder=${this.placeholder}
+                ?disabled=${this.disabled}
+                autocomplete="off"
+                spellcheck="false"
+                enterkeyhint="done"
+                @input=${this.handleInputInput}
+                @keydown=${this.handleInputKeydown}
+                @blur=${this.handleInputBlur}
+                role="combobox"
+                aria-label=${this.placeholder}
+                aria-haspopup="dialog"
+                aria-expanded=${this.open}
+                aria-controls="range-picker-panel"
+                aria-invalid=${this.inputError !== null}
+                aria-describedby=${this.inputError ? "range-picker-desc" : nothing}
+              />
+              <span class="trigger-icons">
+                ${this.clearable && (this.from || this.to)
+                  ? html`
+                      <button
+                        class="icon-button"
+                        type="button"
+                        aria-label="Clear date range"
+                        @click=${this.clearRange}
+                      >
+                        <svg viewBox="0 0 16 16" fill="currentColor" aria-hidden="true">
+                          <path
+                            d="M4 4l8 8M12 4l-8 8"
+                            stroke="currentColor"
+                            stroke-width="2"
+                            stroke-linecap="round"
+                          />
+                        </svg>
+                      </button>
+                    `
+                  : nothing}
+                <button
+                  class="icon-button"
+                  type="button"
+                  aria-label="Open date range panel"
+                  aria-expanded=${this.open}
+                  ?disabled=${this.disabled}
+                  @click=${this.handleIconClick}
+                >
+                  <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true">
+                    <path d="M4 2h1V1h2v1h2V1h2v1h1a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2zm8 3H4v7h8V5z"/>
+                  </svg>
+                </button>
               </span>
-              <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true">
-                <path d="M4 2h1V1h2v1h2V1h2v1h1a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2zm8 3H4v7h8V5z"/>
-              </svg>
-            </button>
+            </div>
+            ${this.inputError
+              ? html`<div class="range-picker-support error" id="range-picker-desc">
+                  ${this.inputError}
+                </div>`
+              : nothing}
           `}
 
       ${isPopup && this.open
@@ -1035,6 +1511,7 @@ export class RelRangePicker extends LitElement {
 
       <div
         part="panel" class="popover ${this.open ? "open" : ""} ${isPopup ? "popup" : ""}"
+        id="range-picker-panel"
         popover="manual"
         role="dialog"
         aria-label="Select date range"
@@ -1043,18 +1520,20 @@ export class RelRangePicker extends LitElement {
 
           <!-- ── Left: Quick select ── -->
           <div part="list" class="presets">
-            <div class="presets-grid" role="list" aria-label="Quick date selections">
+            <div class="presets-grid" role="group" aria-label="Quick date selections">
               ${quickSelects.map(
                 (qs) => html`
                   <button
                     part="option" class="preset-item ${qs.fullWidth ? "full-width" : ""} ${this.draftActivePreset === qs.label ? "active" : ""}"
                     type="button"
-                    role="listitem"
                     ?disabled=${this.disabled}
                     aria-pressed=${this.draftActivePreset === qs.label}
                     @click=${() => this.selectQuickSelect(qs)}
                   >
                     <span>${qs.label}</span>
+                    ${this.draftActivePreset !== qs.label
+                      ? html`<kbd class="preset-key" aria-hidden="true" title="Press ${qs.key} while the panel is open">${qs.key}</kbd>`
+                      : nothing}
                     ${this.draftActivePreset === qs.label
                       ? html`<svg width="18" height="18" viewBox="0 0 24 24" fill="none" aria-hidden="true">
                           <circle cx="12" cy="12" r="12" fill="var(--rel-bg-brand)"/>
@@ -1106,49 +1585,60 @@ export class RelRangePicker extends LitElement {
               </button>
             </div>
 
-            <div class="week-header" role="row">
-              ${weekdayLabels.map(
-                (label) => html`
-                  <div class="week-day" role="columnheader" aria-label="${label}">
-                    ${label}
-                  </div>
-                `
-              )}
-            </div>
+            <div class="calendar-table" role="grid" aria-label="Select date range">
+              <div class="week-header" role="row">
+                ${weekdayLabels.map(
+                  (label) => html`
+                    <div class="week-day" role="columnheader" aria-label="${label}">
+                      ${label}
+                    </div>
+                  `
+                )}
+              </div>
 
-            <div
-              part="list" class="calendar-grid"
-              role="grid"
-              aria-label="Select date range"
-              @mouseleave=${() => { this.hoverDate = null; }}
-            >
-              ${days.map((day) => {
-                const cellClasses = [
-                  "day-cell",
-                  day.isInRange ? "in-range" : "",
-                  day.isDraftFrom ? "range-start" : "",
-                  day.isDraftTo ? "range-end" : "",
-                  day.isToday ? "today" : "",
-                  day.isDisabled ? "disabled" : "",
-                  !day.isCurrentMonth ? "other-month" : "",
-                  day.isWeekend ? "weekend" : "",
-                ]
-                  .filter(Boolean)
-                  .join(" ");
-
-                return html`
-                  <div
-                    class="${cellClasses}"
-                    role="gridcell"
-                    aria-label="${this.formatISODate(day.date)}"
-                    aria-selected="${day.isDraftFrom || day.isDraftTo || day.isInRange}"
-                    @click=${() => this.handleDayClick(day)}
-                    @mouseenter=${() => this.handleDayHover(day)}
-                  >
-                    <span class="day-inner">${day.day}</span>
-                  </div>
-                `;
-              })}
+              <div
+                part="list" class="calendar-grid"
+                @mouseleave=${() => { this.hoverDate = null; }}
+                @keydown=${this.handleGridKeydown}
+              >
+                ${weeks.map(
+                  (week) => html`
+                    <div class="calendar-week" role="row">
+                      ${week.map((day) => {
+                        const iso = this.formatISODate(day.date);
+                        const cellClasses = [
+                          "day-cell",
+                          day.isInRange ? "in-range" : "",
+                          day.isDraftFrom ? "range-start" : "",
+                          day.isDraftTo ? "range-end" : "",
+                          day.isToday ? "today" : "",
+                          day.isDisabled ? "disabled" : "",
+                          !day.isCurrentMonth ? "other-month" : "",
+                          day.isWeekend ? "weekend" : "",
+                        ]
+                          .filter(Boolean)
+                          .join(" ");
+
+                        return html`
+                          <div
+                            class="${cellClasses}"
+                            role="gridcell"
+                            tabindex="${day.isCurrentMonth && iso === rovingIso ? 0 : -1}"
+                            data-iso="${iso}"
+                            aria-label="${this.formatDayLabel(day)}"
+                            aria-selected="${day.isDraftFrom || day.isDraftTo || day.isInRange}"
+                            aria-disabled="${day.isDisabled ? "true" : nothing}"
+                            @click=${() => this.handleDayClick(day)}
+                            @mouseenter=${() => this.handleDayHover(day)}
+                          >
+                            <span class="day-inner">${day.day}</span>
+                          </div>
+                        `;
+                      })}
+                    </div>
+                  `
+                )}
+              </div>
             </div>
 
             <div part="footer" class="calendar-footer">
@@ -1175,7 +1665,7 @@ export class RelRangePicker extends LitElement {
                   tone="default"
                   size="small"
                   border="corner-radius"
-                  ?disabled=${isDraftEmpty}
+                  ?disabled=${isDraftEmpty && !this.from && !this.to}
                   @click=${() => this.applySelection()}
                 >
                   Apply