@truenas/ui-components 0.4.11 → 0.4.12

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@truenas/ui-components",
-  "version": "0.4.11",
+  "version": "0.4.12",
   "publishConfig": {
     "registry": "https://registry.npmjs.org",
     "access": "public"

package/types/truenas-ui-components.d.ts

@@ -1,6 +1,6 @@
 import * as _truenas_ui_components from '@truenas/ui-components';
 import * as _angular_core from '@angular/core';
-import { Signal, InjectionToken, Renderer2, OnDestroy, ElementRef, AfterViewInit, OnInit, TemplateRef, AfterContentInit, Provider, ChangeDetectorRef, TrackByFunction, OnChanges, DoCheck, SimpleChanges, PipeTransform, ViewContainerRef, AfterViewChecked, ComponentRef } from '@angular/core';
+import { Signal, InjectionToken, Renderer2, OnDestroy, ElementRef, AfterViewInit, TemplateRef, AfterContentInit, Provider, ChangeDetectorRef, OnInit, TrackByFunction, OnChanges, DoCheck, SimpleChanges, PipeTransform, ViewContainerRef, AfterViewChecked, ComponentRef } from '@angular/core';
 import { ControlValueAccessor, NgControl, AbstractControl } from '@angular/forms';
 import { ComponentHarness, BaseHarnessFilters, HarnessPredicate, TestKey, HarnessLoader, ModifierKeys as ModifierKeys$1 } from '@angular/cdk/testing';
 import { SafeHtml, SafeResourceUrl, DomSanitizer } from '@angular/platform-browser';
@@ -1300,6 +1300,7 @@ declare class TnButtonComponent implements AfterViewInit {
     classes: _angular_core.Signal<string[]>;
     handleAnchorClick(event: MouseEvent): void;
     private hostRef;
+    constructor();
     private innerRef;
     ngAfterViewInit(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<TnButtonComponent, never>;
@@ -1506,7 +1507,7 @@ declare class TnIconComponent {
 }
 
 type TooltipPosition = 'above' | 'below' | 'left' | 'right' | 'before' | 'after';
-declare class TnTooltipDirective implements OnInit, OnDestroy {
+declare class TnTooltipDirective implements AfterViewInit, OnDestroy {
     message: _angular_core.InputSignal<string>;
     position: _angular_core.InputSignal<TooltipPosition>;
     disabled: _angular_core.InputSignal<boolean>;
@@ -1520,22 +1521,44 @@ declare class TnTooltipDirective implements OnInit, OnDestroy {
     private _isTooltipVisible;
     private _positionSub;
     private _tooltipId;
-    /**
-     * Only point `aria-describedby` at the tooltip when there is actually a message to
-     * describe. Otherwise every host (e.g. an icon button with no tooltip) would carry a
-     * dangling reference to a tooltip element that is never rendered.
-     */
-    protected get _ariaDescribedBy(): string | null;
     private _overlay;
     private _elementRef;
     private _viewContainerRef;
     private _overlayPositionBuilder;
-    ngOnInit(): void;
+    private _ariaDescriber;
+    private _viewInitialized;
+    private _describedTarget;
+    private _describedMessage;
+    private _innerObserver;
+    /**
+     * Re-sync the description (see ngAfterViewInit) when the inputs change. The initial
+     * write cannot happen here: on the first run the host's child components (e.g.
+     * tn-button's inner `<button>`) have not rendered yet.
+     */
+    private readonly _syncDescriptionOnInputChange;
+    /**
+     * Expose the message to assistive tech via CDK's AriaDescriber: it keeps the text in
+     * a persistent visually-hidden element (so `aria-describedby` never dangles — the
+     * overlay tooltip only exists while shown) and adds/removes only its own id token,
+     * leaving descriptions the control already carries (form hints, error ids) intact.
+     * The description goes on the interactive element itself: the host when it is one,
+     * otherwise the first interactive descendant (e.g. `<tn-button>`'s inner `<button>`),
+     * because screen readers read descriptions off the focused control, not wrappers.
+     */
+    ngAfterViewInit(): void;
+    private _syncAriaDescription;
+    /**
+     * The overlay tooltip renders its message as HTML (`[innerHTML]`), but AriaDescriber
+     * writes the description as plain text — strip any markup so screen readers never
+     * announce literal tags. DOMParser parses inert markup (no script execution).
+     */
+    private _plainTextMessage;
+    private _removeAriaDescription;
     ngOnDestroy(): void;
     _onMouseEnter(): void;
     _onMouseLeave(): void;
-    _onFocus(): void;
-    _onBlur(): void;
+    _onFocusIn(): void;
+    _onFocusOut(event: FocusEvent): void;
     _onKeydown(event: KeyboardEvent): void;
     /** Shows the tooltip */
     show(delay?: number): void;
@@ -2977,6 +3000,15 @@ interface TnCardAction {
     handler: () => void;
     disabled?: boolean;
     icon?: string;
+    /**
+     * Tooltip for the action button — useful for explaining why an action is unavailable.
+     * Shows on pointer hover (including while the action is disabled, since hover
+     * retargets to the button's host element) and on keyboard focus while enabled. A
+     * disabled native button is not focusable, so keyboard-only users cannot reach the
+     * reason; screen reader users can still read it when browsing the button via its
+     * persistent `aria-describedby` description.
+     */
+    tooltip?: string;
     /**
      * Test-id applied to the rendered action button. Rendered under whichever attribute name
      * is configured via `TN_TEST_ATTR` (default `data-testid`).