@reliability-design/web 1.4.3 → 1.4.5

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);
     }
   };
 

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

@@ -1,4 +1,4 @@
-import { LitElement, html } from "lit";
+import { LitElement, html, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators.js";
 import "@reliability-design/icons/rel-icon";
 import "../rel-checkbox/rel-checkbox.js";
@@ -38,8 +38,13 @@ export class RelMenu extends LitElement {
   @property({ type: Array }) items: MenuItem[] = [];
 
   @state() private focusedIndex: number = 0;
+  /** Index inside the open submenu that virtual focus sits on; -1 = main list. */
+  @state() private subFocusedIndex: number = -1;
   @state() private _items: MenuItem[] = [];
 
+  /** Stable id prefix for aria-activedescendant targets. */
+  private menuId = `rel-menu-${Math.random().toString(36).slice(2)}`;
+
   public static readonly _css = `
     :host {
       color: var(--rel-text-default);
@@ -122,7 +127,10 @@ export class RelMenu extends LitElement {
       cursor: not-allowed;
     }
 
-    .rel-menu-item[data-focused="true"] {
+    /* [data-focused] (presence, not ="true"): the ?data-focused boolean
+       binding renders the attribute with an EMPTY value, so a ="true"
+       selector never matches. */
+    .rel-menu-item[data-focused] {
       outline: 2px solid var(--rel-border-focus);
       outline-offset: -2px;
     }
@@ -235,6 +243,7 @@ export class RelMenu extends LitElement {
     // click that opened it. composedPath pierces shadow boundaries.
     if (!e.composedPath().includes(this)) {
       this.lockedIndex = -1;
+      this.subFocusedIndex = -1;
       this._items = this._items.map(i => ({ ...i, open: false }));
     }
   };
@@ -319,38 +328,119 @@ export class RelMenu extends LitElement {
     );
   }
 
+  /** Keyboard-open locks the submenu (no hover-out to close it) and moves
+   *  virtual focus onto its first entry. */
+  private openSubmenuAt(index: number) {
+    this.lockedIndex = index;
+    this.subFocusedIndex = 0;
+    this._items = this._items.map((i, idx) => ({ ...i, open: idx === index }));
+  }
+
+  private closeSubmenus() {
+    this.lockedIndex = -1;
+    this.subFocusedIndex = -1;
+    this._items = this._items.map(i => ({ ...i, open: false }));
+  }
+
   private onKeydown(ev: KeyboardEvent) {
     const last = this._items.length - 1;
+    const focusedItem = this._items[this.focusedIndex];
+
+    // ── Virtual focus is inside an open submenu ──
+    if (
+      this.subFocusedIndex >= 0 &&
+      this.type === "arrow" &&
+      focusedItem?.open &&
+      focusedItem.submenu?.length
+    ) {
+      const subLast = focusedItem.submenu.length - 1;
+      switch (ev.key) {
+        case "ArrowDown":
+          this.subFocusedIndex = Math.min(subLast, this.subFocusedIndex + 1);
+          ev.preventDefault();
+          return;
+        case "ArrowUp":
+          this.subFocusedIndex = Math.max(0, this.subFocusedIndex - 1);
+          ev.preventDefault();
+          return;
+        case "Home":
+          this.subFocusedIndex = 0;
+          ev.preventDefault();
+          return;
+        case "End":
+          this.subFocusedIndex = subLast;
+          ev.preventDefault();
+          return;
+        case "ArrowLeft":
+        case "Escape":
+          // Close only the submenu; don't let Escape also dismiss an
+          // enclosing popover in the same keystroke.
+          this.closeSubmenus();
+          ev.preventDefault();
+          ev.stopPropagation();
+          return;
+        case "Enter":
+        case " ":
+          this.onSubClick(this.focusedIndex, this.subFocusedIndex);
+          ev.preventDefault();
+          return;
+        default:
+          return;
+      }
+    }
 
+    // ── Virtual focus is in the main list ──
     if (ev.key === "ArrowDown") {
       this.focusedIndex = Math.min(last, this.focusedIndex + 1);
       ev.preventDefault();
     } else if (ev.key === "ArrowUp") {
       this.focusedIndex = Math.max(0, this.focusedIndex - 1);
       ev.preventDefault();
+    } else if (ev.key === "Home") {
+      this.focusedIndex = 0;
+      ev.preventDefault();
+    } else if (ev.key === "End") {
+      this.focusedIndex = last;
+      ev.preventDefault();
     } else if (ev.key === "ArrowRight") {
       const item = this._items[this.focusedIndex];
-      if (this.type === "arrow" && item?.submenu?.length) {
-        // keyboard-open locks (no hover-out to close it)
-        this.lockedIndex = this.focusedIndex;
-        this._items = this._items.map((i, idx) => ({
-          ...i,
-          open: idx === this.focusedIndex ? true : i.open,
-        }));
+      if (this.type === "arrow" && item?.submenu?.length && !item.disabled) {
+        this.openSubmenuAt(this.focusedIndex);
+        ev.preventDefault();
       }
     } else if (ev.key === "ArrowLeft" || ev.key === "Escape") {
-      this.lockedIndex = -1;
-      this._items = this._items.map(i => ({ ...i, open: false }));
+      const anyOpen = this._items.some(i => i.open);
+      if (anyOpen) {
+        this.closeSubmenus();
+        ev.preventDefault();
+        if (ev.key === "Escape") ev.stopPropagation();
+      }
     } else if (ev.key === "Enter" || ev.key === " ") {
       const item = this._items[this.focusedIndex];
-      this.onItemClick(item, this.focusedIndex);
+      if (this.type === "arrow" && item?.submenu?.length && !item.disabled) {
+        this.openSubmenuAt(this.focusedIndex);
+      } else {
+        this.onItemClick(item, this.focusedIndex);
+      }
       ev.preventDefault();
     }
   }
 
   private renderMenuItem(item: MenuItem, index: number) {
-    const isFocused = this.focusedIndex === index;
+    const isFocused = this.focusedIndex === index && this.subFocusedIndex < 0;
     const hasSubmenu = this.type === "arrow" && !!item.submenu?.length;
+    const role =
+      this.type === "checkbox"
+        ? "menuitemcheckbox"
+        : this.type === "select-option"
+        ? "menuitemradio"
+        : "menuitem";
+    const ariaChecked =
+      this.type === "checkbox"
+        ? String(!!item.checked)
+        : this.type === "select-option"
+        ? String(!!item.active)
+        : nothing;
 
     // Checkbox / select-option rows delegate their control to the real
     // rel-checkbox / rel-radio components (pointer-events:none so the whole ROW
@@ -381,8 +471,13 @@ export class RelMenu extends LitElement {
 
     return html`
       <div
+        id="${this.menuId}-item-${index}"
         class="rel-menu-item ${item.active ? "active" : ""} ${item.disabled ? "disabled" : ""}"
-        role="menuitem"
+        role="${role}"
+        aria-checked="${ariaChecked}"
+        aria-disabled="${item.disabled ? "true" : nothing}"
+        aria-haspopup="${hasSubmenu ? "menu" : nothing}"
+        aria-expanded="${hasSubmenu ? String(!!item.open) : nothing}"
         ?data-focused="${isFocused}"
         @mouseenter="${() => this.onItemEnter(item, index)}"
         @mouseleave="${() => this.onItemLeave(item, index)}"
@@ -392,12 +487,16 @@ export class RelMenu extends LitElement {
           ? html`
               <div
                 part="panel" class="rel-submenu ${item.open ? "visible" : ""}"
+                role="menu"
                 @click="${(e: Event) => e.stopPropagation()}">
                 ${item.submenu!.map(
                   (sub, subIndex) => html`
                     <div
-                      class="rel-menu-item ${sub.active ? "active" : ""}"
+                      id="${this.menuId}-item-${index}-sub-${subIndex}"
+                      class="rel-menu-item ${sub.active ? "active" : ""} ${sub.disabled ? "disabled" : ""}"
                       role="menuitem"
+                      aria-disabled="${sub.disabled ? "true" : nothing}"
+                      ?data-focused="${this.focusedIndex === index && this.subFocusedIndex === subIndex}"
                       @click="${(e: Event) => this.onSubClick(index, subIndex, e)}">
                       <span class="menu-label">${sub.label}</span>
                     </div>
@@ -411,12 +510,22 @@ export class RelMenu extends LitElement {
   }
 
   render() {
+    // DOM focus stays on the container; this tells AT which item virtual
+    // focus is on as the user arrows around (main list or open submenu).
+    const activeDescendant =
+      this._items.length === 0
+        ? nothing
+        : this.subFocusedIndex >= 0
+        ? `${this.menuId}-item-${this.focusedIndex}-sub-${this.subFocusedIndex}`
+        : `${this.menuId}-item-${this.focusedIndex}`;
+
     return html`
       <style>${RelMenu._css}</style>
       <div
         part="list" class="rel-menu ${this.type === "fixed" || this.type === "fit" ? this.type : ""}"
         role="menu"
         tabindex="0"
+        aria-activedescendant="${activeDescendant}"
         @keydown="${this.onKeydown}"
         @click="${(e: Event) => e.stopPropagation()}">
         ${this._items.map((item, index) => this.renderMenuItem(item, index))}