@reliability-design/web 1.4.4 → 1.4.6

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

@@ -1,7 +1,8 @@
-import { LitElement, html, css } from "lit";
+import { LitElement, html, css, nothing } 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);
     }
   };
 
@@ -586,6 +550,9 @@ export class RelDrawer extends LitElement {
           style="${this.width ? `--drawer-width: ${this.width};` : ''}${this.maxHeight ? `--drawer-max-height: ${this.maxHeight};` : ''}${this.getPanelStyle()}"
           role="${this.modal ? "dialog" : "region"}"
           aria-modal="${this.modal}"
+          aria-labelledby="${hasTitle ? "drawer-title" : nothing}"
+          aria-describedby="${hasDescription ? "drawer-description" : nothing}"
+          aria-label="${hasTitle ? nothing : "Drawer"}"
           tabindex="-1">
           ${showHandleBar
             ? html`<div
@@ -600,10 +567,10 @@ export class RelDrawer extends LitElement {
                   <div class="header-top">
                     <div>
                       ${hasTitle
-                        ? html`<h2 class="title">${this.title}</h2>`
+                        ? html`<h2 class="title" id="drawer-title">${this.title}</h2>`
                         : ""}
                       ${hasDescription
-                        ? html`<p class="description">${this.description}</p>`
+                        ? html`<p class="description" id="drawer-description">${this.description}</p>`
                         : ""}
                     </div>
                     ${showCloseButton

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
@@ -360,6 +450,8 @@ export class RelMenu extends LitElement {
       this.type === "checkbox"
         ? html`<rel-checkbox
             class="menu-control"
+            inert
+            aria-hidden="true"
             label="${item.label}"
             status="${item.checked ? "checked" : "unchecked"}"
             state="${item.disabled ? "disabled" : "default"}"
@@ -367,6 +459,8 @@ export class RelMenu extends LitElement {
         : this.type === "select-option"
         ? html`<rel-radio
             class="menu-control"
+            inert
+            aria-hidden="true"
             .options="${[{ value: item.label, label: item.label, disabled: !!item.disabled }]}"
             .selectedValue="${item.active ? item.label : null}"
           ></rel-radio>`
@@ -381,8 +475,14 @@ 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-label="${this.type === "checkbox" || this.type === "select-option" ? item.label : nothing}"
+        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 +492,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 +515,23 @@ 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"
+        aria-label="Menu"
         tabindex="0"
+        aria-activedescendant="${activeDescendant}"
         @keydown="${this.onKeydown}"
         @click="${(e: Event) => e.stopPropagation()}">
         ${this._items.map((item, index) => this.renderMenuItem(item, index))}