@lifecorner/angular-ui-kit 3.11.3 → 3.11.5

package/types/lifecorner-angular-ui-kit-file-upload.d.ts

@@ -40,13 +40,23 @@ export declare class FileUploadComponent {
    */
   disabled: import("@angular/core").InputSignal<boolean>;
   /**
-   * Hint text shown in the dropzone.
+   * Hint text shown in the dropzone. The drop zone's accessible name is
+   * `hint`, then the shown accepted and max lines, comma-separated (WCAG 2.5.3
+   * Label in Name).
    * @default 'Drag & drop files here, or click to browse'
    */
   hint: import("@angular/core").InputSignal<string>;
-  /** Prefix of the accepted file types line (`accept`). */
+  /**
+   * Prefix of the accepted file types line (`accept`). The shown line is part
+   * of the drop zone's accessible name, after `hint`.
+   * @default 'Accepted:'
+   */
   acceptedLabel: import("@angular/core").InputSignal<string>;
-  /** Prefix of the maximum file size line (`maxSizeBytes`). */
+  /**
+   * Prefix of the maximum file size line (`maxSizeBytes`). The shown line is
+   * part of the drop zone's accessible name, after `hint`.
+   * @default 'Max:'
+   */
   maxSizeLabel: import("@angular/core").InputSignal<string>;
   /** Accessible name of a selected file's remove button. */
   removeFileAriaLabel: import("@angular/core").InputSignal<string>;
@@ -65,6 +75,11 @@ export declare class FileUploadComponent {
   protected selectedFiles: import("@angular/core").WritableSignal<FileUploadFile[]>;
   protected readonly fileInputRef: import("@angular/core").Signal<ElementRef<HTMLInputElement> | undefined>;
   protected dropzoneClasses: import("@angular/core").Signal<string>;
+  /**
+   * Name of the drop zone (AS-33, WCAG 2.5.3 Label in Name): `hint`, then the
+   * accepted and max lines it shows, comma-separated.
+   */
+  protected readonly dropzoneAriaLabel: import("@angular/core").Signal<string>;
   protected onDragOver(event: DragEvent): void;
   protected onDragLeave(event: DragEvent): void;
   protected onDrop(event: DragEvent): void;

package/types/lifecorner-angular-ui-kit-gallery.d.ts

@@ -48,7 +48,12 @@ export declare class GalleryComponent implements OnDestroy {
   readonly size: import("@angular/core").InputSignal<GallerySize>;
   /** Custom column count (overrides size preset) */
   readonly columns: import("@angular/core").InputSignal<number | null>;
-  /** Whether to show captions below thumbnails */
+  /**
+   * Whether to show captions below thumbnails. A shown caption is part of the
+   * item's accessible name: `alt` (or `imageFallbackLabel` and its number),
+   * then the caption (WCAG 2.5.3 Label in Name).
+   * @default false
+   */
   readonly showCaptions: import("@angular/core").InputSignal<boolean>;
   /** Whether clicking a thumbnail opens the lightbox */
   readonly enableLightbox: import("@angular/core").InputSignal<boolean>;
@@ -74,7 +79,11 @@ export declare class GalleryComponent implements OnDestroy {
   readonly previousAriaLabel: import("@angular/core").InputSignal<string>;
   /** Accessible name of the next-image button. */
   readonly nextAriaLabel: import("@angular/core").InputSignal<string>;
-  /** Accessible name of a thumbnail without `alt`, followed by its number. */
+  /**
+   * Accessible name of a thumbnail without `alt`, followed by its number. A
+   * shown caption follows (`Bild 3, Sonnenuntergang am See`).
+   * @default 'Image'
+   */
   readonly imageFallbackLabel: import("@angular/core").InputSignal<string>;
   /** Emitted when lightbox opens with item index */
   readonly lightboxOpen: import("@angular/core").OutputEmitterRef<number>;
@@ -134,6 +143,12 @@ export declare class GalleryComponent implements OnDestroy {
   protected onImageLoad(index: number): void;
   protected isLoaded(index: number): boolean;
   protected getThumbnail(item: GalleryItem): string;
+  /**
+   * Name of a thumbnail (AS-33, WCAG 2.5.3 Label in Name): `alt` (or
+   * `imageFallbackLabel` and its number), then the shown caption unless one
+   * contains the other.
+   */
+  protected itemAriaLabel(item: GalleryItem, index: number): string;
   protected trackByIndex(index: number): number;
   /**
    * Keyboard handling while the lightbox is open. Bound on the lightbox itself

package/types/lifecorner-angular-ui-kit-header.d.ts

@@ -165,7 +165,9 @@ export declare class HeaderComponent {
   readonly userName: import("@angular/core").InputSignal<string>;
   /**
    * What the account-menu button shows: `icon` (user icon and chevron) or
-   * `avatar` (the initials of `userName` in a 48 px round button).
+   * `avatar` (the initials of `userName` in a 48 px round button; the button
+   * is named `userMenuAriaLabel`, a comma and the initials).
+   * @default 'icon'
    */
   readonly userMenuTrigger: import("@angular/core").InputSignal<HeaderUserMenuTrigger>;
   /** Photo for the account avatar (trigger and menu header); initials when empty or broken. */
@@ -213,7 +215,15 @@ export declare class HeaderComponent {
   readonly homeAriaLabel: import("@angular/core").InputSignal<string>;
   /** Accessible name of the hamburger button. */
   readonly hamburgerAriaLabel: import("@angular/core").InputSignal<string>;
-  /** Accessible name of the account menu trigger. */
+  /**
+   * Accessible name of the account menu trigger. With `userMenuTrigger="avatar"`
+   * the button is named this text, a comma and the initials it shows
+   * (`Menü für Johanna Müller, JM`), so a voice-control user can say what they
+   * see (WCAG 2.5.3). Nothing is added when `userName` gives no initials, or
+   * when the text already contains them as a word. The name is the same with a
+   * photo.
+   * @default 'Open user menu'
+   */
   readonly userMenuAriaLabel: import("@angular/core").InputSignal<string>;
   /** Accessible name of the `<nav>` around `navItems`. */
   readonly navAriaLabel: import("@angular/core").InputSignal<string>;
@@ -221,7 +231,12 @@ export declare class HeaderComponent {
   readonly themeToDarkAriaLabel: import("@angular/core").InputSignal<string>;
   /** Label of the theme button while the dark theme is active. */
   readonly themeToLightAriaLabel: import("@angular/core").InputSignal<string>;
-  /** Accessible name of the context button (`contextName`). */
+  /**
+   * Start of the context button's accessible name. The visible `contextLabel`
+   * and `contextName` follow it (WCAG 2.5.3 Label in Name), unless the label
+   * already contains them: `Context info, Tenant Acme Corp`.
+   * @default 'Context info'
+   */
   readonly contextAriaLabel: import("@angular/core").InputSignal<string>;
   /** Label of the Profile entry in the account menu. */
   readonly profileLabel: import("@angular/core").InputSignal<string>;
@@ -242,6 +257,22 @@ export declare class HeaderComponent {
   protected get themeService(): ThemeService;
   private readonly hamburger;
   constructor();
+  /**
+   * Name of the avatar trigger (AS-33, WCAG 2.5.3 Label in Name):
+   * `userMenuAriaLabel`, a comma and the initials the avatar shows, so the
+   * visible text is a word of the name. Built from the same function as the
+   * avatar's initials and independent of the photo, so the prerendered name
+   * and the page's agree. Nothing is added for the `?` placeholder or when
+   * the label already holds the initials as a word (parentheticals dropped,
+   * as axe-core 4.14 does); an empty label becomes the initials alone.
+   */
+  protected readonly avatarTriggerAriaLabel: import("@angular/core").Signal<string>;
+  /**
+   * Name of the context button (AS-33, WCAG 2.5.3 Label in Name):
+   * `contextAriaLabel`, a comma and the visible `contextLabel` and
+   * `contextName`, so a voice-control user can say what they see.
+   */
+  protected readonly contextButtonAriaLabel: import("@angular/core").Signal<string>;
   /**
    * Get menu items for profile dropdown
    */

package/types/lifecorner-angular-ui-kit-internal-a11y.d.ts

@@ -0,0 +1,27 @@
+/**
+ * Accessible names that contain the visible text (WCAG 2.5.3 Label in Name,
+ * AS-33). The containment test follows axe-core 4.14's
+ * `label-content-name-mismatch`: both strings are compatibility-decomposed,
+ * parentheticals are dropped, the rest is lower-cased and split into words of
+ * letters and digits, and the visible text's words must occur as one
+ * contiguous run in the name's words.
+ */
+/**
+ * The words of `s` as axe-core 4.14 compares them for Label in Name.
+ * `toLowerCase`, not `toLocaleLowerCase`: server and browser must agree.
+ */
+export declare function labelWords(s: string): string[];
+/** Whether `needle` occurs in `haystack` as one contiguous run of words. */
+export declare function containsWords(haystack: readonly string[], needle: readonly string[]): boolean;
+/**
+ * Accessible name that contains the visible `text` (WCAG 2.5.3): `label`,
+ * then `, text`, unless one already contains the other.
+ *
+ * - Text without letters or digits, or one non-digit character (a symbol or
+ *   an icon glyph, which axe reports as "incomplete"): `label`.
+ * - The label already contains the text: `label`, unchanged.
+ * - An empty label: `text`.
+ * - The text contains the label: `text`, so nothing is read twice.
+ * - Otherwise `label, text`.
+ */
+export declare function nameWithText(label: string, text: string): string;

package/types/lifecorner-angular-ui-kit-pagination.d.ts

@@ -35,9 +35,18 @@ export declare class PaginationComponent {
   readonly previousLabel: import("@angular/core").InputSignal<string>;
   /** Visible text of the next button */
   readonly nextLabel: import("@angular/core").InputSignal<string>;
-  /** Accessible name of the previous button (the visible text is hidden on small screens) */
+  /**
+   * Accessible name of the previous button (the visible text is hidden on
+   * small screens). `previousLabel` is appended when this doesn't contain it
+   * (WCAG 2.5.3 Label in Name), e.g. `Vorherige Seite, Zurück`.
+   * @default 'Previous page'
+   */
   readonly previousAriaLabel: import("@angular/core").InputSignal<string>;
-  /** Accessible name of the next button */
+  /**
+   * Accessible name of the next button. `nextLabel` is appended when this
+   * doesn't contain it (WCAG 2.5.3 Label in Name), e.g. `Nächste Seite, Weiter`.
+   * @default 'Next page'
+   */
   readonly nextAriaLabel: import("@angular/core").InputSignal<string>;
   /** Accessible name of a page button; `{page}` is replaced with the page number */
   readonly pageAriaLabel: import("@angular/core").InputSignal<string>;
@@ -47,6 +56,10 @@ export declare class PaginationComponent {
    */
   readonly infoText: import("@angular/core").InputSignal<string>;
   readonly pageChange: import("@angular/core").OutputEmitterRef<number>;
+  /** Name of the previous button: its label, then the visible text unless contained (AS-33). */
+  protected readonly previousButtonAriaLabel: import("@angular/core").Signal<string>;
+  /** Name of the next button: its label, then the visible text unless contained (AS-33). */
+  protected readonly nextButtonAriaLabel: import("@angular/core").Signal<string>;
   totalPages: import("@angular/core").Signal<number>;
   firstItemIndex: import("@angular/core").Signal<number>;
   lastItemIndex: import("@angular/core").Signal<number>;

package/types/lifecorner-angular-ui-kit-rich-text-editor.d.ts

@@ -47,7 +47,13 @@ export declare class RichTextEditorComponent implements ControlValueAccessor {
   toolbar: import("@angular/core").InputSignal<ToolbarConfig>;
   /** Whether to show word count */
   showWordCount: import("@angular/core").InputSignal<boolean>;
-  /** Tooltips and accessible names of the toolbar actions, by action (`{ bold: 'Fett' }`); missing ones keep the English default. */
+  /**
+   * Tooltips and accessible names of the toolbar actions, by action
+   * (`{ bold: 'Fett' }`); missing ones keep the English default. A visible
+   * button label with letters or digits that the title doesn't contain is
+   * appended (`Heading 1, H1`, WCAG 2.5.3 Label in Name).
+   * @default {}
+   */
   actionTitles: import("@angular/core").InputSignal<Partial<Record<ToolbarAction, string>>>;
   /** Label of the rich-text mode button. */
   richModeLabel: import("@angular/core").InputSignal<string>;
@@ -118,6 +124,12 @@ export declare class RichTextEditorComponent implements ControlValueAccessor {
   private getSelection;
   protected getActionLabel(action: ToolbarAction): string;
   protected getActionTitle(action: ToolbarAction): string;
+  /**
+   * Tooltip and accessible name of a toolbar button (AS-33, WCAG 2.5.3 Label
+   * in Name): the title, then the visible label when it has letters or digits
+   * the title doesn't contain (`Heading 1, H1`). Symbol labels keep the title.
+   */
+  protected getActionName(action: ToolbarAction): string;
   /**
    * Converts the editor's markdown subset to HTML. The source is HTML-escaped
    * *first*, so nothing in it can open a tag or an attribute; the conversions

package/types/lifecorner-angular-ui-kit-stepper.d.ts

@@ -35,12 +35,18 @@ export declare class StepperComponent {
   readonly linear: import("@angular/core").InputSignal<boolean>;
   /** Orientation */
   readonly orientation: import("@angular/core").InputSignal<"horizontal" | "vertical">;
-  /** Text shown under optional steps */
+  /**
+   * Text shown under optional steps; it also ends the step's accessible name.
+   * @default 'Optional'
+   */
   readonly optionalLabel: import("@angular/core").InputSignal<string>;
   /**
    * Accessible name template for each step button. Placeholders: `{n}`
-   * (1-based step number), `{m}` (step count), `{label}`. Optional steps get
-   * `optionalLabel` appended.
+   * (1-based step number), `{m}` (step count), `{label}`. The step's visible
+   * description and `optionalLabel` follow the filled template,
+   * comma-separated (`Step 2 of 3: Profile, Set up your profile`). Keep
+   * `{label}` last, so that the name contains the visible text (WCAG 2.5.3).
+   * @default 'Step {n} of {m}: {label}'
    */
   readonly stepAriaLabel: import("@angular/core").InputSignal<string>;
   /** Emitted when active step changes */
@@ -60,9 +66,14 @@ export declare class StepperComponent {
    * only completed steps (and the active one) are reachable.
    */
   isStepNavigable(index: number): boolean;
-  /** Accessible name for the step button at `index` */
+  /**
+   * Accessible name for the step button at `index` (AS-33, WCAG 2.5.3 Label
+   * in Name): the filled `stepAriaLabel`, then the visible description and
+   * `optionalLabel`, comma-separated, so the name contains the visible text.
+   * A template that doesn't end with `{label}` gets the label after it.
+   */
   getStepAriaLabel(index: number): string;
-  /** Id of the description element for `aria-describedby` (or null) */
+  /** Id of the description element (or null); the description is part of the step's name. */
   getDescriptionId(index: number): string | null;
   /** Navigate to a specific step (only if navigable, see `isStepNavigable`) */
   goToStep(index: number): void;