@reliability-design/web 1.4.4 → 1.4.6

package/dist/components/rel-resizable/rel-resizable-group.ts

@@ -94,6 +94,16 @@ export class RelResizableGroup extends LitElement {
     // Calculate initial sizes
     const sizes = this.calculateInitialSizes();
     this.applySizes(sizes);
+
+    // Initialize each handle's aria-valuenow — before this, AT had no value
+    // to announce until the first drag/keypress.
+    this.handles.forEach((handle, idx) => {
+      const left = sizes[idx];
+      const right = sizes[idx + 1];
+      if (left !== undefined && right !== undefined && left + right > 0) {
+        handle.updateAriaValue((left / (left + right)) * 100);
+      }
+    });
   }
 
   private calculateInitialSizes(): number[] {
@@ -275,6 +285,16 @@ export class RelResizableGroup extends LitElement {
       const delta = e.key === "ArrowUp" ? -step : step;
       this.applyKeyboardResize(handleIndex, delta);
       applied = true;
+    } else if (e.key === "Home" || e.key === "End") {
+      // APG window-splitter: Home collapses the leading panel to its min,
+      // End grows it to its max (both still clamped by the neighbor).
+      const leftPanel = this.panels[handleIndex];
+      if (leftPanel && handleIndex + 1 < this.panels.length) {
+        e.preventDefault();
+        const target = e.key === "Home" ? leftPanel.minSize : leftPanel.maxSize;
+        this.applyKeyboardResize(handleIndex, target - leftPanel.currentSize);
+        applied = true;
+      }
     }
 
     if (applied) {

package/dist/components/rel-segmented-button/rel-segmented-button.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 SegmentSize = "small" | "medium";
@@ -20,6 +20,9 @@ export class RelSegmentedButton extends LitElement {
 
   @property({ type: String }) align: SegmentAlign = "left";
 
+  /** Accessible name for the radiogroup (it renders no visible group label). */
+  @property({ type: String, attribute: "field-aria-label" }) fieldAriaLabel?: string;
+
   static styles = css`
     :host {
       color: var(--rel-text-default);
@@ -108,21 +111,21 @@ export class RelSegmentedButton extends LitElement {
 
     /* Sizes */
     .segmented-buttons.small .segment {
-      padding: var(--rel-spacing-3xs) var(--rel-spacing-xs);
-      font-family: var(--rel-body-xs-regular-font-family);
+      padding: var(--rel-spacing-3xs) var(--rel-spacing-xs);
+      font-family: var(--rel-body-xs-regular-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);
+      letter-spacing: var(--rel-body-xs-semibold-letter-spacing);
     }
 
     .segmented-buttons.medium .segment {
-      padding: var(--rel-spacing-2xs) var(--rel-spacing-md);
-      font-family: var(--rel-body-sm-regular-font-family);
-      font-weight: var(--rel-body-sm-regular-font-weight);
-      font-size: var(--rel-body-sm-regular-font-size);
-      line-height: var(--rel-body-sm-regular-line-height);
-      letter-spacing: var(--rel-body-sm-regular-letter-spacing);
+      padding: var(--rel-spacing-2xs) var(--rel-spacing-md);
+      font-family: var(--rel-body-sm-regular-font-family);
+      font-weight: var(--rel-body-sm-regular-font-weight);
+      font-size: var(--rel-body-sm-regular-font-size);
+      line-height: var(--rel-body-sm-regular-line-height);
+      letter-spacing: var(--rel-body-sm-regular-letter-spacing);
     }
   `;
 
@@ -139,7 +142,33 @@ export class RelSegmentedButton extends LitElement {
     }
   }
 
-  private renderSegment(option: SegmentOption) {
+  /** APG radio-group navigation: arrows move focus AND select, the group is
+   *  one Tab stop (roving tabindex on the selected segment). */
+  private onKeyDown = (e: KeyboardEvent) => {
+    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 enabled = this.options.filter((o) => !o.disabled);
+    if (enabled.length === 0) return;
+    e.preventDefault();
+
+    const currentIdx = enabled.findIndex((o) => o.value === this.active);
+    let target: number;
+    if (e.key === "Home") target = 0;
+    else if (e.key === "End") target = enabled.length - 1;
+    else if (prevKey) target = currentIdx <= 0 ? enabled.length - 1 : currentIdx - 1;
+    else target = (currentIdx + 1) % enabled.length;
+
+    this.setActive(enabled[target]);
+    this.updateComplete.then(() => {
+      this.shadowRoot
+        ?.querySelector<HTMLElement>('button[tabindex="0"]')
+        ?.focus();
+    });
+  };
+
+  private renderSegment(option: SegmentOption, rovingValue: string | null) {
     const isActive = this.active === option.value;
     const classes = [
       "segment",
@@ -152,6 +181,9 @@ export class RelSegmentedButton extends LitElement {
     return html`
       <button
         part="option" class="${classes}"
+        role="radio"
+        aria-checked="${isActive}"
+        tabindex="${!option.disabled && option.value === rovingValue ? 0 : -1}"
         ?disabled="${option.disabled}"
         @click="${() => this.setActive(option)}">
         ${option.label}
@@ -166,9 +198,19 @@ export class RelSegmentedButton extends LitElement {
       `align-${this.align}`,
     ].join(" ");
 
+    const enabled = this.options.filter((o) => !o.disabled);
+    const rovingValue = enabled.some((o) => o.value === this.active)
+      ? this.active
+      : enabled[0]?.value ?? null;
+
     return html`
-      <div part="base" class="${containerClasses}">
-        ${this.options.map((option) => this.renderSegment(option))}
+      <div
+        part="base" class="${containerClasses}"
+        role="radiogroup"
+        aria-label="${this.fieldAriaLabel ?? nothing}"
+        @keydown="${this.onKeyDown}"
+      >
+        ${this.options.map((option) => this.renderSegment(option, rovingValue))}
       </div>
     `;
   }

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

@@ -5,6 +5,7 @@ import "@reliability-design/icons/rel-icon";
 import "../rel-chip/rel-chip.js";
 import "../rel-checkbox/rel-checkbox.js";
 import type { FieldLabelStyle } from "../rel-textfield/rel-textfield.js";
+import { announce } from "../../utils/announce";
 
 export type SelectState = "default" | "error" | "disabled";
 export type SelectSize = "small" | "medium" | "large";
@@ -103,6 +104,11 @@ export class RelSelect extends LitElement {
 
   @state() private open = false;
   @state() private highlightedIndex = -1;
+  /** Virtual highlight on the Select-All header row (multi mode). */
+  @state() private selectAllHighlighted = false;
+
+  private typeaheadBuffer = "";
+  private typeaheadTimer: number | undefined;
   @state() private panelStyle = "";
   @state() private searchValue = "";
   @state() private internalState: "default" | "focused" = "default";
@@ -571,6 +577,10 @@ export class RelSelect extends LitElement {
       padding: 12px;
     }
 
+    .select-all-row.highlighted {
+      background: var(--rel-select-option-hover, var(--rel-bg-neutral-elevated-1));
+    }
+
     .select-empty {
       padding: var(--rel-spacing-xs) 12px;
       color: var(--rel-select-placeholder-color, var(--rel-text-body));
@@ -722,13 +732,15 @@ export class RelSelect extends LitElement {
   }
 
   private addGlobalListeners() {
-    document.addEventListener("pointerdown", this.onOutsidePointerDown);
+    // Capture phase so a pointerdown that another component stops in its own
+    // capture listener (e.g. a rel-popover trigger) still closes this listbox.
+    document.addEventListener("pointerdown", this.onOutsidePointerDown, true);
     window.addEventListener("resize", this.updatePosition);
     window.addEventListener("scroll", this.onPageScroll, true);
   }
 
   private removeGlobalListeners() {
-    document.removeEventListener("pointerdown", this.onOutsidePointerDown);
+    document.removeEventListener("pointerdown", this.onOutsidePointerDown, true);
     window.removeEventListener("resize", this.updatePosition);
     window.removeEventListener("scroll", this.onPageScroll, true);
   }
@@ -769,6 +781,7 @@ export class RelSelect extends LitElement {
     // before the user has touched anything reads as an unintended default.
     // Highlight only kicks in once they actually hover or press an arrow key.
     this.highlightedIndex = -1;
+    this.selectAllHighlighted = false;
     this.addGlobalListeners();
     requestAnimationFrame(() => {
       this.showNativePopover();
@@ -872,6 +885,7 @@ export class RelSelect extends LitElement {
       idx >= 0
         ? this.selectedValues.filter((v) => v !== option.value)
         : [...this.selectedValues, option.value];
+    announce(`${option.label} ${idx >= 0 ? "deselected" : "selected"}`);
     if (this.state === "error") this.state = "default";
     this.emitChange();
   }
@@ -886,6 +900,7 @@ export class RelSelect extends LitElement {
       const toAdd = filtered.map((o) => o.value).filter((v) => !this.selectedValues.includes(v));
       this.selectedValues = [...this.selectedValues, ...toAdd];
     }
+    announce(status === "checked" ? "All options deselected" : "All options selected");
     if (this.state === "error") this.state = "default";
     this.emitChange();
   }
@@ -893,6 +908,8 @@ export class RelSelect extends LitElement {
   private removeChip(value: string) {
     if (this.state === "disabled") return;
     this.selectedValues = this.selectedValues.filter((v) => v !== value);
+    const opt = this.normalizedOptions.find((o) => o.value === value);
+    announce(`${opt?.label ?? value} removed`);
     this.emitChange();
   }
 
@@ -903,6 +920,20 @@ export class RelSelect extends LitElement {
 
   private onTriggerKeyDown(e: KeyboardEvent) {
     if (this.state === "disabled") return;
+
+    // Chips render inside the trigger <button>, so their remove buttons can
+    // never be tab stops — Backspace/Delete is the keyboard path for
+    // removing the most recent selection (standard multi-combobox behavior).
+    if (
+      this.multiple &&
+      (e.key === "Backspace" || e.key === "Delete") &&
+      this.selectedValues.length > 0
+    ) {
+      e.preventDefault();
+      this.removeChip(this.selectedValues[this.selectedValues.length - 1]);
+      return;
+    }
+
     if (!this.open) {
       if (["ArrowDown", "ArrowUp", "Enter", " "].includes(e.key)) {
         e.preventDefault();
@@ -917,32 +948,86 @@ export class RelSelect extends LitElement {
 
   private onSearchInput = (e: InputEvent) => {
     this.searchValue = (e.target as HTMLInputElement).value;
-    this.highlightedIndex = this.filteredOptions.length > 0 ? 0 : -1;
+    const count = this.filteredOptions.length;
+    this.highlightedIndex = count > 0 ? 0 : -1;
+    this.selectAllHighlighted = false;
+    if (count === 0) {
+      announce(this.options.length === 0 ? "No options available" : "No matches found");
+    } else {
+      announce(`${count} option${count === 1 ? "" : "s"} available`);
+    }
     requestAnimationFrame(() => this.updatePosition());
   };
 
   private onSearchKeyDown(e: KeyboardEvent) {
+    // Backspace in an empty search field removes the last chip (see
+    // onTriggerKeyDown for the rationale).
+    if (
+      this.multiple &&
+      e.key === "Backspace" &&
+      this.searchValue === "" &&
+      this.selectedValues.length > 0
+    ) {
+      this.removeChip(this.selectedValues[this.selectedValues.length - 1]);
+      return;
+    }
     this.handleListNavigation(e);
   }
 
   private handleListNavigation(e: KeyboardEvent) {
     const filtered = this.filteredOptions;
+    // The Select-All row participates in arrow navigation as a virtual row
+    // above the first option — it lives in the panel header, outside the
+    // option list, and would otherwise be keyboard-unreachable.
+    const hasSelectAll = this.multiple && filtered.length > 0;
+
     switch (e.key) {
       case "ArrowDown":
         e.preventDefault();
-        this.highlightedIndex = Math.min(filtered.length - 1, this.highlightedIndex + 1);
+        if (this.selectAllHighlighted) {
+          this.selectAllHighlighted = false;
+          this.highlightedIndex = filtered.length > 0 ? 0 : -1;
+        } else if (this.highlightedIndex === -1 && hasSelectAll) {
+          this.selectAllHighlighted = true;
+        } else {
+          this.highlightedIndex = Math.min(filtered.length - 1, this.highlightedIndex + 1);
+        }
+        this.scrollHighlightedIntoView();
         break;
       case "ArrowUp":
         e.preventDefault();
-        this.highlightedIndex = Math.max(0, this.highlightedIndex - 1);
+        if (!this.selectAllHighlighted && this.highlightedIndex <= 0 && hasSelectAll) {
+          this.highlightedIndex = -1;
+          this.selectAllHighlighted = true;
+        } else {
+          this.highlightedIndex = Math.max(0, this.highlightedIndex - 1);
+        }
+        this.scrollHighlightedIntoView();
+        break;
+      case "Home":
+        if (filtered.length === 0) break;
+        e.preventDefault();
+        this.selectAllHighlighted = false;
+        this.highlightedIndex = 0;
+        this.scrollHighlightedIntoView();
+        break;
+      case "End":
+        if (filtered.length === 0) break;
+        e.preventDefault();
+        this.selectAllHighlighted = false;
+        this.highlightedIndex = filtered.length - 1;
+        this.scrollHighlightedIntoView();
+        break;
+      case " ":
+        // With a search field, Space types into it; only the no-search mode
+        // (trigger holds focus) treats Space as toggle/select.
+        if (!this.noSearch) return;
+        e.preventDefault();
+        this.activateHighlighted();
         break;
       case "Enter":
         e.preventDefault();
-        if (this.highlightedIndex >= 0 && filtered[this.highlightedIndex]) {
-          const opt = filtered[this.highlightedIndex];
-          if (this.multiple) this.toggleMultiOption(opt);
-          else this.selectSingleOption(opt);
-        }
+        this.activateHighlighted();
         break;
       case "Escape":
         e.preventDefault();
@@ -951,9 +1036,67 @@ export class RelSelect extends LitElement {
       case "Tab":
         this.closeListbox();
         break;
+      default:
+        this.handleTypeahead(e);
+        break;
     }
   }
 
+  /** APG typeahead for the no-search mode (with a search field, typing
+   *  filters instead). Accumulates printable keys for 500 ms and jumps the
+   *  highlight to the next option whose label starts with the buffer. */
+  private handleTypeahead(e: KeyboardEvent) {
+    if (!this.noSearch) return;
+    if (e.key.length !== 1 || e.ctrlKey || e.metaKey || e.altKey) return;
+
+    e.preventDefault();
+    const isNewQuery = this.typeaheadBuffer === "";
+    this.typeaheadBuffer += e.key.toLowerCase();
+    clearTimeout(this.typeaheadTimer);
+    this.typeaheadTimer = window.setTimeout(() => {
+      this.typeaheadBuffer = "";
+    }, 500);
+
+    const filtered = this.filteredOptions;
+    if (filtered.length === 0) return;
+
+    // A fresh single-letter query starts searching AFTER the highlight (so
+    // repeated presses cycle through matches); a growing buffer re-tests the
+    // current one first.
+    const start = Math.max(0, this.highlightedIndex) + (isNewQuery ? 1 : 0);
+    for (let offset = 0; offset < filtered.length; offset++) {
+      const idx = (start + offset) % filtered.length;
+      if (filtered[idx].label.toLowerCase().startsWith(this.typeaheadBuffer)) {
+        this.selectAllHighlighted = false;
+        this.highlightedIndex = idx;
+        this.scrollHighlightedIntoView();
+        return;
+      }
+    }
+  }
+
+  private activateHighlighted() {
+    if (this.selectAllHighlighted) {
+      this.toggleSelectAll();
+      return;
+    }
+    const filtered = this.filteredOptions;
+    if (this.highlightedIndex >= 0 && filtered[this.highlightedIndex]) {
+      const opt = filtered[this.highlightedIndex];
+      if (this.multiple) this.toggleMultiOption(opt);
+      else this.selectSingleOption(opt);
+    }
+  }
+
+  private scrollHighlightedIntoView() {
+    if (this.highlightedIndex < 0) return;
+    requestAnimationFrame(() => {
+      this.renderRoot
+        .querySelector<HTMLElement>(`#${this.uniqueId}-option-${this.highlightedIndex}`)
+        ?.scrollIntoView({ block: "nearest" });
+    });
+  }
+
   private renderChips() {
     const values = this.selectedValues;
     const visible = values.slice(0, Math.min(this.visibleChipCount, this.maxVisibleChips));
@@ -1046,11 +1189,27 @@ export class RelSelect extends LitElement {
       .join(" ");
 
     const listboxId = `${this.uniqueId}-listbox`;
-    const activeOptionId =
-      this.open && this.highlightedIndex >= 0 ? `${this.uniqueId}-option-${this.highlightedIndex}` : "";
+    const activeOptionId = !this.open
+      ? ""
+      : this.selectAllHighlighted
+      ? `${this.uniqueId}-select-all`
+      : this.highlightedIndex >= 0
+      ? `${this.uniqueId}-option-${this.highlightedIndex}`
+      : "";
 
     const selectedSingle = opts.find((o) => o.value === this.selected);
 
+    const baseName = accessibleName || this.placeholder;
+    let triggerLabel = baseName;
+    if (this.multiple && this.selectedValues.length > 0) {
+      const labels = this.selectedValues.map((v) => opts.find((o) => o.value === v)?.label ?? v);
+      const shown = labels.slice(0, 3);
+      const more = labels.length - shown.length;
+      triggerLabel = `${baseName}, ${shown.join(", ")}${more > 0 ? `, plus ${more} more` : ""}`;
+    } else if (!this.multiple && selectedSingle) {
+      triggerLabel = `${baseName}, ${selectedSingle.label}`;
+    }
+
     return html`
       <div class="${wrapperClasses}">
         ${labelHidden
@@ -1074,9 +1233,9 @@ export class RelSelect extends LitElement {
             aria-haspopup="listbox"
             aria-expanded="${this.open}"
             aria-controls="${listboxId}"
-            aria-activedescendant="${activeOptionId}"
+            aria-activedescendant="${this.noSearch ? activeOptionId : nothing}"
             aria-invalid="${this.state === "error"}"
-            aria-label="${this.fieldAriaLabelledby ? nothing : accessibleName || this.placeholder}"
+            aria-label="${this.fieldAriaLabelledby ? nothing : triggerLabel}"
             aria-labelledby="${this.fieldAriaLabelledby ?? nothing}"
             ?disabled="${isDisabled}"
             @click="${this.onTriggerClick}"
@@ -1136,6 +1295,11 @@ export class RelSelect extends LitElement {
                       <input
                         part="input" class="search-input"
                         type="text"
+                        role="combobox"
+                        aria-expanded="${this.open}"
+                        aria-controls="${listboxId}"
+                        aria-activedescendant="${activeOptionId}"
+                        aria-label="${accessibleName || this.placeholder}"
                         placeholder="${this.searchPlaceholder}"
                         .value="${this.searchValue}"
                         @input="${this.onSearchInput}"
@@ -1145,14 +1309,25 @@ export class RelSelect extends LitElement {
                   </div>`
                 : ""}
               ${this.multiple && filtered.length > 0
-                ? html`<div class="select-all-row">
+                ? html`<div
+                    id="${this.uniqueId}-select-all"
+                    class="select-all-row ${this.selectAllHighlighted ? "highlighted" : ""}"
+                    role="option"
+                    aria-selected="${this.selectAllStatus === "checked"}"
+                    aria-label="${this.selectAllLabel}"
+                    @pointerenter="${() => {
+                      this.selectAllHighlighted = true;
+                      this.highlightedIndex = -1;
+                    }}"
+                    @pointerleave="${() => (this.selectAllHighlighted = false)}"
+                    @mousedown="${(e: Event) => e.preventDefault()}"
+                    @click="${() => this.toggleSelectAll()}"
+                  >
                     <rel-checkbox
+                      inert
+                      aria-hidden="true"
                       label="${this.selectAllLabel}"
                       status="${this.selectAllStatus}"
-                      @rel-change=${(e: Event) => {
-                        e.stopPropagation();
-                        this.toggleSelectAll();
-                      }}
                     ></rel-checkbox>
                   </div>`
                 : ""}
@@ -1175,17 +1350,21 @@ export class RelSelect extends LitElement {
                       class="checkbox-option ${index === this.highlightedIndex ? "highlighted" : ""}"
                       role="option"
                       aria-selected="${this.selectedValues.includes(option.value)}"
-                      @pointerenter="${() => (this.highlightedIndex = index)}"
+                      aria-label="${option.label}"
+                      @pointerenter="${() => {
+                        this.highlightedIndex = index;
+                        this.selectAllHighlighted = false;
+                      }}"
+                      @mousedown="${(e: Event) => e.preventDefault()}"
+                      @click="${() => this.toggleMultiOption(option)}"
                     >
                       <rel-checkbox
+                        inert
+                        aria-hidden="true"
                         label="${option.label}"
                         icon="${option.icon}"
                         supportingtext="${option.supportingText}"
                         status="${this.selectedValues.includes(option.value) ? "checked" : "unchecked"}"
-                        @rel-change=${(e: Event) => {
-                          e.stopPropagation();
-                          this.toggleMultiOption(option);
-                        }}
                       ></rel-checkbox>
                     </div>
                   `