@reliability-design/web 1.4.4 → 1.4.5

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