@reliability-design/web 1.4.3 → 1.4.5

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

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

@@ -1,6 +1,8 @@
 import { LitElement, html, css, nothing } from "lit";
 import { customElement, property, state, query } from "lit/decorators.js";
 import "@reliability-design/icons/rel-icon";
+import { matchesShortcut, isEditableTarget } from "../../utils/shortcuts.js";
+import { getDeepActiveElement } from "../../utils/focus.js";
 
 export type SidebarVariant = "sidebar" | "floating" | "inset";
 export type SidebarSide = "left" | "right";
@@ -11,12 +13,12 @@ export type SidebarChangeReason = "trigger" | "rail" | "overlay" | "escape" | "s
 // ============================================================================
 // rel-sidebar-provider (Root State Manager)
 // ============================================================================
-/**
- * @deprecated The rel-sidebar family has no Figma design in RelDS 2.0 and is
- * excluded from the parity contract. Compose sidebars from rel-drawer,
- * rel-menu and rel-resizable instead. It remains exported for compatibility
- * but will be removed in a future major version.
- */
+/**
+ * @deprecated The rel-sidebar family has no Figma design in RelDS 2.0 and is
+ * excluded from the parity contract. Compose sidebars from rel-drawer,
+ * rel-menu and rel-resizable instead. It remains exported for compatibility
+ * but will be removed in a future major version.
+ */
 @customElement("rel-sidebar-provider")
 export class RelSidebarProvider extends LitElement {
   @property({ type: Boolean, reflect: true }) open?: boolean;
@@ -206,17 +208,19 @@ export class RelSidebarProvider extends LitElement {
   private handleKeyDown = (e: KeyboardEvent) => {
     if (!this.keyboardShortcut) return;
 
-    // Ctrl/Cmd + B
-    if ((e.ctrlKey || e.metaKey) && e.key === "b") {
-      e.preventDefault();
+    // Ctrl+B (Cmd+B on Apple) via the shared matcher — stricter than the old
+    // hand-rolled check, which also fired on Ctrl+Shift+B.
+    if (!matchesShortcut(e, "mod+b")) return;
+    // Leave the combo alone in text-editing contexts (bold in editors).
+    if (isEditableTarget(e)) return;
+    e.preventDefault();
 
-      if (this.isMobile || this.collapsible === "offcanvas") {
-        // Toggle open state
-        this.setOpen(!this.activeOpen, "shortcut");
-      } else if (this.collapsible === "icon") {
-        // Toggle collapsed state
-        this.setCollapsed(!this.activeCollapsed, "shortcut");
-      }
+    if (this.isMobile || this.collapsible === "offcanvas") {
+      // Toggle open state
+      this.setOpen(!this.activeOpen, "shortcut");
+    } else if (this.collapsible === "icon") {
+      // Toggle collapsed state
+      this.setCollapsed(!this.activeCollapsed, "shortcut");
     }
   };
 
@@ -529,7 +533,7 @@ export class RelSidebar extends LitElement {
   }
 
   private setupFocusTrap() {
-    this.triggerElement = document.activeElement as HTMLElement;
+    this.triggerElement = getDeepActiveElement();
     document.addEventListener("keydown", this.handleKeydown);
 
     // Focus first focusable element or container
@@ -888,26 +892,26 @@ export class RelSidebarGroup extends LitElement {
 export class RelSidebarGroupLabel extends LitElement {
   static styles = css`
     :host {
-      display: block;
+      display: block;
       color: var(--rel-text-placeholder);
-      text-transform: uppercase;
+      text-transform: uppercase;
       padding: var(--rel-spacing-xs, 8px) var(--rel-spacing-sm, 12px) var(--rel-spacing-2xs, 4px);
-      margin-bottom: var(--rel-spacing-2xs, 4px);
-      font-family: var(--rel-body-xs-semibold-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);
+      margin-bottom: var(--rel-spacing-2xs, 4px);
+      font-family: var(--rel-body-xs-semibold-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);
     }
 
     :host(.collapsed) {
-      text-align: center;
-      padding: var(--rel-spacing-xs, 8px) var(--rel-spacing-2xs, 4px) var(--rel-spacing-2xs, 4px);
-      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);
+      text-align: center;
+      padding: var(--rel-spacing-xs, 8px) var(--rel-spacing-2xs, 4px) var(--rel-spacing-2xs, 4px);
+      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);
     }
   `;
 
@@ -1023,16 +1027,16 @@ export class RelSidebarMenuButton extends LitElement {
       background: none;
       border: none;
       border-radius: var(--rel-border-radius-sm, 8px);
-      cursor: pointer;
+      cursor: pointer;
       color: var(--rel-text-default);
       transition: background 0.15s ease, color 0.15s ease;
       text-align: left;
-      position: relative;
-      font-family: var(--rel-body-md-medium-font-family);
-      font-weight: var(--rel-body-md-medium-font-weight);
-      font-size: var(--rel-body-md-medium-font-size);
-      line-height: var(--rel-body-md-medium-line-height);
-      letter-spacing: var(--rel-body-md-medium-letter-spacing);
+      position: relative;
+      font-family: var(--rel-body-md-medium-font-family);
+      font-weight: var(--rel-body-md-medium-font-weight);
+      font-size: var(--rel-body-md-medium-font-size);
+      line-height: var(--rel-body-md-medium-line-height);
+      letter-spacing: var(--rel-body-md-medium-letter-spacing);
     }
 
     button:hover:not([disabled]) {

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

@@ -1,4 +1,4 @@
-import { LitElement, html, css } from "lit";
+import { LitElement, html, css, nothing } from "lit";
 import { customElement, property } from "lit/decorators.js";
 
 export type StepStatus = "done" | "progress" | "disabled";
@@ -79,6 +79,17 @@ export class RelStepper extends LitElement {
     .rel-step {
       display: flex;
       position: relative;
+      cursor: pointer;
+    }
+
+    .rel-step.disabled {
+      cursor: not-allowed;
+    }
+
+    .rel-step:focus-visible {
+      outline: 2px solid var(--rel-border-focus);
+      outline-offset: 2px;
+      border-radius: var(--rel-border-radius-xs);
     }
 
     .rel-stepper.horizontal.text-below .rel-step {
@@ -402,6 +413,33 @@ export class RelStepper extends LitElement {
     return classes.join(" ");
   }
 
+  private onStepKeyDown(e: KeyboardEvent, step: Step, index: number) {
+    if (e.key === "Enter" || e.key === " ") {
+      e.preventDefault();
+      this.onStepClick(step, index);
+      return;
+    }
+
+    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 steps = Array.from(
+      this.renderRoot.querySelectorAll<HTMLElement>(".rel-step:not(.disabled)")
+    );
+    if (steps.length === 0) return;
+
+    e.preventDefault();
+    const current = steps.indexOf(e.currentTarget as HTMLElement);
+    let target: number;
+    if (e.key === "Home") target = 0;
+    else if (e.key === "End") target = steps.length - 1;
+    else if (prevKey) target = (current - 1 + steps.length) % steps.length;
+    else target = (current + 1) % steps.length;
+
+    steps[target]?.focus();
+  }
+
   private onStepClick(step: Step, index: number) {
     if (step.status === "disabled") return;
 
@@ -465,7 +503,12 @@ export class RelStepper extends LitElement {
           (step, idx) => html`
             <div
               class="${this.getStepClasses(step)}"
+              role="button"
+              tabindex="${this.isDisabled(step) ? -1 : 0}"
+              aria-disabled="${this.isDisabled(step) ? "true" : nothing}"
+              aria-current="${this.isProgress(step) ? "step" : nothing}"
               @click="${() => this.onStepClick(step, idx)}"
+              @keydown="${(e: KeyboardEvent) => this.onStepKeyDown(e, step, idx)}"
             >
               ${isVertical && isTextRight
                 ? html`

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

@@ -33,6 +33,9 @@ export class RelTab extends LitElement {
   size: "sm" | "md" | "lg" = "md";
   @state() private _tabItems: RelTabItem[] = [];
 
+  /** Stable id prefix linking tabs to the shared tabpanel. */
+  private tabsId = `rel-tab-${Math.random().toString(36).slice(2)}`;
+
   static styles = css`
     :host {
       color: var(--rel-text-default);
@@ -57,7 +60,7 @@ export class RelTab extends LitElement {
       position: relative;
       padding: var(--rel-spacing-sm) var(--rel-spacing-md);
       cursor: pointer;
-      color: var(--rel-text-body);
+      color: var(--rel-text-body);
       transition: color 0.2s ease;
       display: flex;
       align-items: center;
@@ -194,14 +197,28 @@ export class RelTab extends LitElement {
         next = (next + dir + tabs.length) % tabs.length;
         if (!tabs[next]?.disabled) break;
       }
-      this.selectTab(next);
-      this.updateComplete.then(() => {
-        const tabEls = this.shadowRoot?.querySelectorAll("[role=tab]");
-        (tabEls?.[next] as HTMLElement)?.focus();
-      });
+      this.selectAndFocusTab(next);
+      return;
+    }
+
+    if (event.key === "Home" || event.key === "End") {
+      event.preventDefault();
+      const tabs = this._effectiveTabs;
+      const order = [...tabs.keys()];
+      if (event.key === "End") order.reverse();
+      const next = order.find((i) => !tabs[i]?.disabled);
+      if (next !== undefined) this.selectAndFocusTab(next);
     }
   }
 
+  private selectAndFocusTab(index: number) {
+    this.selectTab(index);
+    this.updateComplete.then(() => {
+      const tabEls = this.shadowRoot?.querySelectorAll("[role=tab]");
+      (tabEls?.[index] as HTMLElement)?.focus();
+    });
+  }
+
   render() {
     const tabs = this._effectiveTabs;
     return html`
@@ -213,9 +230,11 @@ export class RelTab extends LitElement {
               part="item" class="tab ${i === this.activeIndex
                 ? "active"
                 : ""} ${tab.disabled ? "disabled" : ""}"
+              id="${this.tabsId}-tab-${i}"
               role="tab"
               aria-selected="${i === this.activeIndex}"
               aria-disabled="${tab.disabled ?? false}"
+              aria-controls="${this.tabsId}-panel"
               tabindex="${tab.disabled ? -1 : i === this.activeIndex ? 0 : -1}"
               @click="${() => this.selectTab(i)}"
               @keydown="${(e: KeyboardEvent) => this.onKeyDown(e, i)}"
@@ -231,7 +250,13 @@ export class RelTab extends LitElement {
           `
         )}
       </div>
-      <div class="tab-content">
+      <div
+        class="tab-content"
+        id="${this.tabsId}-panel"
+        role="tabpanel"
+        aria-labelledby="${this.tabsId}-tab-${this.activeIndex}"
+        tabindex="0"
+      >
         <slot></slot>
       </div>
     `;