@tedi-design-system/angular 8.1.0-rc.11 → 8.1.0-rc.12

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tedi-design-system/angular",
-  "version": "8.1.0-rc.11",
+  "version": "8.1.0-rc.12",
   "type": "module",
   "main": "community.mjs",
   "module": "fesm2022/tedi-design-system-angular.mjs",

package/tedi/index.d.ts

@@ -5268,10 +5268,17 @@ declare class TruncateComponent {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<TruncateComponent, "tedi-truncate", never, { "text": { "alias": "text"; "required": true; "isSignal": true; }; "maxLength": { "alias": "maxLength"; "required": false; "isSignal": true; }; "ellipsis": { "alias": "ellipsis"; "required": false; "isSignal": true; }; "expandable": { "alias": "expandable"; "required": false; "isSignal": true; }; "expanded": { "alias": "expanded"; "required": false; "isSignal": true; }; }, { "expanded": "expandedChange"; }, never, never, true, never>;
 }
 
-type DropdownTriggerAriaHasPopup = "menu" | "listbox" | "dialog" | "true";
+type DropdownTriggerAriaHasPopup = "menu" | "listbox" | "dialog" | "true" | "false";
 declare class DropdownTriggerDirective implements AfterViewInit {
-    /** Defines the aria-haspopup attribute for the trigger, informing assistive technologies whether it opens a menu or listbox. Improves accessibility by describing the type of popup. */
-    readonly ariaHaspopup: _angular_core.InputSignal<DropdownTriggerAriaHasPopup>;
+    /**
+     * The `aria-haspopup` value for the trigger, telling assistive technology
+     * what kind of popup it opens.
+     *
+     * Defaults to the content's `dropdownRole`: `menu` for a menu, `listbox` for
+     * a listbox, and no attribute for a plain `list`, which ARIA has no
+     * `aria-haspopup` token for. `false` also omits the attribute.
+     */
+    readonly ariaHaspopup: _angular_core.InputSignal<DropdownTriggerAriaHasPopup | undefined>;
     readonly host: ElementRef<HTMLElement>;
     readonly dropdown: DropdownComponent;
     readonly overlayOrigin: CdkOverlayOrigin;
@@ -5284,6 +5291,7 @@ declare class DropdownTriggerDirective implements AfterViewInit {
      * would both be tab stops, and the ARIA state would land on the wrong element.
      */
     private readonly triggerElement;
+    private readonly hasPopup;
     constructor();
     ngAfterViewInit(): void;
     focus(): void;
@@ -5292,6 +5300,7 @@ declare class DropdownTriggerDirective implements AfterViewInit {
     get focusableElement(): HTMLElement;
     onClick(): void;
     onKeydown(event: KeyboardEvent): void;
+    private isWidgetContent;
     private resolveTriggerElement;
     private isNativelyFocusable;
     private openAndFocusFirst;
@@ -5300,6 +5309,18 @@ declare class DropdownTriggerDirective implements AfterViewInit {
     static ɵdir: _angular_core.ɵɵDirectiveDeclaration<DropdownTriggerDirective, "[tedi-dropdown-trigger]", never, { "ariaHaspopup": { "alias": "ariaHaspopup"; "required": false; "isSignal": true; }; }, {}, never, never, true, [{ directive: typeof _angular_cdk_overlay.CdkOverlayOrigin; inputs: {}; outputs: {}; }]>;
 }
 
+/**
+ * How the dropdown panel is exposed to assistive technology.
+ *
+ * - `menu`: a menu of actions. Composite widget, so it is a single tab stop
+ *   with arrow-key navigation and its items are `menuitem`s.
+ * - `listbox`: a list of options, one of which can be selected. Composite
+ *   widget, like `menu`, and its items are `option`s.
+ * - `list`: a plain list, not a widget. Items keep their own semantics, so
+ *   navigation links stay links and each is its own tab stop. Use this
+ *   whenever the panel is a set of links.
+ */
+type DropdownRole = "menu" | "listbox" | "list";
 interface DropdownApi {
     /** Current value of the dropdown. Used to track the selected option in listbox mode. */
     value: WritableSignal<string | undefined>;
@@ -5329,7 +5350,9 @@ interface DropdownApi {
 declare const DROPDOWN_API: InjectionToken<DropdownApi>;
 interface DropdownContentApi {
     /** The ARIA role of the dropdown content. Determines keyboard interaction and accessibility semantics. */
-    dropdownRole: Signal<"menu" | "listbox">;
+    dropdownRole: Signal<DropdownRole>;
+    /** Whether the content is a composite widget (`menu`, `listbox`) rather than a plain `list`. Widgets own focus management and key handling; a plain list leaves both to the items' own controls. */
+    isWidget: Signal<boolean>;
 }
 declare const DROPDOWN_CONTENT_API: InjectionToken<DropdownContentApi>;
 
@@ -5381,6 +5404,20 @@ declare class DropdownItemComponent {
     readonly value: _angular_core.InputSignal<string | undefined>;
     /** Is item disabled? */
     readonly disabled: _angular_core.InputSignal<boolean>;
+    /**
+     * Whether the projected content is itself the interactive control, e.g. a
+     * button. In a `menu` or `listbox` the item role and the roving tabindex then
+     * move onto that element instead of the host `li`, so assistive technology
+     * reports one control per item and the control keeps its own activation
+     * behaviour.
+     *
+     * A widget role replaces the control's own role, so a projected link stops
+     * being announced as a link. For navigation links use
+     * `dropdownRole="list"` instead, where this input is not needed: a plain list
+     * adds no roles, and the links stay links and stay in the tab order.
+     * @default false
+     */
+    readonly interactiveContent: _angular_core.InputSignal<boolean>;
     /**
      * Whether the item's label clips overflowing content (for text ellipsis).
      * Set `false` when projecting content with decorations that intentionally
@@ -5406,20 +5443,58 @@ declare class DropdownItemComponent {
     readonly dropdownContent: DropdownContentApi;
     /** Check if custom dropdown-item-value is provided */
     readonly customItemValue: _angular_core.Signal<DropdownItemValueComponent | undefined>;
+    private readonly renderer;
+    private readonly destroyRef;
+    private control;
+    constructor();
+    /** The widget role for this item, or `null` in a plain `list`. */
+    itemRole(): "menuitem" | "option" | null;
+    hostRole(): "option" | "menuitem" | "none" | null;
+    hostAriaSelected(): boolean | null;
+    hostAriaDisabled(): "true" | null;
+    hostTabindex(): "-1" | null;
+    /**
+     * Whether the item's ARIA state and focus belong on the projected control
+     * rather than the host `li`. Always true in a plain `list`, where the
+     * projected control is what the item is.
+     */
+    private controlOwnsSemantics;
     isSelected(): boolean;
+    /**
+     * The element that carries the item's role, roving tabindex and focus: the
+     * projected control when it owns the item's semantics, the host `li`
+     * otherwise.
+     */
+    focusTarget(): HTMLElement;
     focus(): void;
+    setTabindex(value: string | null): void;
+    private controlElement;
     onClick(): void;
     onMousedown(event: MouseEvent): void;
     onKeydown(event: KeyboardEvent): void;
+    /** Returns whether the key was an activation key and has been dealt with. */
+    private handleActivationKey;
     private onItemSelect;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<DropdownItemComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DropdownItemComponent, "li[tedi-dropdown-item]", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "clipContent": { "alias": "clipContent"; "required": false; "isSignal": true; }; "closeOnSelect": { "alias": "closeOnSelect"; "required": false; "isSignal": true; }; }, { "itemSelect": "itemSelect"; }, ["customItemValue"], ["tedi-dropdown-item-value", "*"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DropdownItemComponent, "li[tedi-dropdown-item]", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "interactiveContent": { "alias": "interactiveContent"; "required": false; "isSignal": true; }; "clipContent": { "alias": "clipContent"; "required": false; "isSignal": true; }; "closeOnSelect": { "alias": "closeOnSelect"; "required": false; "isSignal": true; }; }, { "itemSelect": "itemSelect"; }, ["customItemValue"], ["tedi-dropdown-item-value", "*"], true, never>;
 }
 
-type DropdownRole = "menu" | "listbox";
 declare class DropdownContentComponent {
     /**
-     * Role for content, use listbox for list and menu for actions
+     * How the panel is exposed to assistive technology: `menu` for actions,
+     * `listbox` for selectable options, `list` for a plain list of links.
+     *
+     * `menu` and `listbox` are composite widgets, so the panel is a single tab
+     * stop with arrow-key navigation and the items carry `menuitem` / `option`.
+     * `list` is not a widget: it adds no item roles and no key handling, so
+     * projected links keep the link role and each one is its own tab stop. A
+     * panel of navigation links belongs in `list`, because a widget role would
+     * replace the link role and screen readers would stop announcing them as
+     * links. The `role="list"` it puts on the `ul` is redundant on paper but not
+     * in Safari, which drops list semantics from a list with no marker. A `list`
+     * panel also renders in the dropdown's own place in the DOM rather than at the
+     * end of `<body>`, so it keeps its place in reading order for the screen
+     * readers that navigate by DOM order instead of by `Tab`.
      * @default menu
      */
     readonly dropdownRole: _angular_core.InputSignal<DropdownRole>;
@@ -5427,6 +5502,7 @@ declare class DropdownContentComponent {
     private readonly dropdownApi;
     readonly containerId: _angular_core.Signal<string>;
     readonly items: _angular_core.Signal<readonly DropdownItemComponent[]>;
+    readonly isWidget: _angular_core.Signal<boolean>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<DropdownContentComponent, never>;
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<DropdownContentComponent, "tedi-dropdown-content", never, { "dropdownRole": { "alias": "dropdownRole"; "required": false; "isSignal": true; }; }, {}, ["items"], ["*", "li[tedi-dropdown-item]"], true, never>;
 }
@@ -5476,6 +5552,7 @@ declare class DropdownComponent implements OnDestroy {
     private readonly platformId;
     private readonly document;
     private readonly renderer;
+    private readonly overlayContainer;
     private scrollListener?;
     private skipNextGestureOutsideClick;
     constructor();
@@ -5486,6 +5563,12 @@ declare class DropdownComponent implements OnDestroy {
     onOutsideClick(event?: MouseEvent): void;
     handleFocusOut: (event: FocusEvent) => void;
     tabOutOfDropdown(shiftKey: boolean): void;
+    /**
+     * Focuses `target` and only then tears the panel down, so focus is never on a
+     * detached element. `handleFocusOut` already closes on the resulting
+     * `focusin`; the explicit call covers a target that refuses focus.
+     */
+    private moveFocusOut;
     focusFirstItem(): void;
     focusLastItem(): void;
     setActiveToSelectedOrFirst(): void;
@@ -5493,6 +5576,11 @@ declare class DropdownComponent implements OnDestroy {
     focusNextItem(fromEl: HTMLLIElement): void;
     focusPrevItem(fromEl: HTMLLIElement): void;
     updateTabindexes(): void;
+    /** Moves focus to the first focusable element in the panel. */
+    focusPanelStart(): void;
+    onPanelKeydown(event: KeyboardEvent): void;
+    private panelFocusables;
+    private closeAndFocusTrigger;
     private setupScrollListener;
     private cleanupScrollListener;
     private findIndexByElement;
@@ -10054,9 +10142,19 @@ type RenderToken = {
  * the current page — add `aria-current="page"` to it yourself.
  *
  * Crumb links are underlined by default. Set `[underline]="false"` on the
- * `tedi-link` for non-underlined crumbs — recommended for the `short` back-link.
- * Crumbs collapsed into the ellipsis dropdown are always rendered without an
- * underline, regardless of their `[underline]` setting.
+ * `tedi-link` for non-underlined crumbs, which is recommended for the `short`
+ * back-link. A collapsed crumb keeps its own `[underline]` setting, so it looks
+ * the same in the ellipsis dropdown as it does in the trail. To restyle the
+ * collapsed rows, target `.tedi-breadcrumbs__dropdown-item`, which travels with
+ * them into the overlay.
+ *
+ * The ellipsis dropdown is a plain list (`dropdownRole="list"`), not a menu, so
+ * the collapsed crumbs stay links: screen readers announce them as links and
+ * each one is its own tab stop. Its panel renders inside the crumb it belongs
+ * to, so the collapsed crumbs come between the ellipsis button and the next
+ * crumb both in the tab order and for a screen reader that swipes through the
+ * DOM. Opening it moves focus to the first collapsed crumb; Escape closes it
+ * and returns focus to the button.
  */
 declare class BreadcrumbsComponent implements BreakpointInputs<BreadcrumbsInputs> {
     private readonly breakpointService;