@mk-kit/ui 0.40.0 → 0.42.0

package/fesm2022/mk-kit-ui-dnd.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { Injectable, inject, ElementRef, Directive, input, booleanAttribute, numberAttribute, contentChildren, computed, signal, ChangeDetectionStrategy, Component, output, effect, model, contentChild, TemplateRef } from '@angular/core';
+import { Injectable, inject, ElementRef, Directive, input, booleanAttribute, numberAttribute, contentChildren, computed, signal, effect, ChangeDetectionStrategy, Component, output, model, contentChild, TemplateRef } from '@angular/core';
 import { MkLiveAnnouncer, MK_I18N, mkUniqueId } from '@mk-kit/ui/core';
 import { DOCUMENT, NgTemplateOutlet } from '@angular/common';
 
@@ -102,6 +102,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
             args: [{ providedIn: 'root' }]
         }] });
 
+/** Elements that take keyboard focus natively (no `tabindex` needed). */
+const NATIVELY_FOCUSABLE = /^(BUTTON|INPUT|SELECT|TEXTAREA)$/;
 /**
  * Optional grip that restricts where a pointer drag of the enclosing
  * `[mkDrag]` may begin. Place it on the element the user should press to drag;
@@ -112,16 +114,44 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
  * Its look (grab cursor, muted colour, `touch-action: none`) ships as the
  * global `.mk-drag-handle` class in the theme stylesheet.
  *
+ * **Decorative grip** — a non-focusable element (`<span>`, `<mk-icon>`): the
+ * item itself stays the keyboard target (`role="button"`, focusable), so the
+ * grip should be `aria-hidden`:
+ *
  * ```html
  * <div mkDrag [mkDragData]="row">
  *   <span mkDragHandle aria-hidden="true">⠿</span>
  *   {{ row.name }}
  * </div>
  * ```
+ *
+ * **Focusable grip** — a `<button>` (or any element with `tabindex`): the
+ * handle becomes the keyboard target instead. The item is then a plain
+ * container (no role, not focusable), so rows may hold inputs, links and
+ * other buttons without nesting interactive controls, and `<li>` items keep
+ * valid list semantics. Give it an accessible name:
+ *
+ * ```html
+ * <li mkDrag [mkDragData]="row">
+ *   <button type="button" mkDragHandle [attr.aria-label]="'Reorder ' + row.name">⠿</button>
+ *   <input mkInput [(ngModel)]="row.name" />
+ * </li>
+ * ```
  */
 class MkDragHandle {
     /** The handle's host element. */
     element = inject(ElementRef).nativeElement;
+    /**
+     * Whether the handle can take keyboard focus itself — a native control
+     * (`<button>`, …), a link with `href`, or any element with a `tabindex`.
+     * A focusable handle carries the keyboard drag for its `[mkDrag]`.
+     */
+    isFocusable() {
+        const el = this.element;
+        return (NATIVELY_FOCUSABLE.test(el.tagName) ||
+            (el.tagName === 'A' && el.hasAttribute('href')) ||
+            el.hasAttribute('tabindex'));
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkDragHandle, deps: [], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.7", type: MkDragHandle, isStandalone: true, selector: "[mkDragHandle]", host: { classAttribute: "mk-drag-handle" }, exportAs: ["mkDragHandle"], ngImport: i0 });
 }
@@ -149,13 +179,25 @@ const TOUCH_SLOP = 10;
 const SETTLE_MS = 180;
 /**
  * Makes an item inside a `[mkDropList]` draggable — by pointer (mouse / touch /
- * pen) **and** by keyboard (WCAG 2.1.1). The item is focusable, exposes
- * `role="button"` + `aria-roledescription="Draggable item"`, and every move is
- * announced via {@link MkLiveAnnouncer}.
+ * pen) **and** by keyboard (WCAG 2.1.1). Every move is announced via
+ * {@link MkLiveAnnouncer}. Which element carries the keyboard interaction
+ * depends on the handle:
+ *
+ * - **No handle, or a decorative one** (`<span mkDragHandle aria-hidden>`):
+ *   the item itself is focusable and exposes `aria-roledescription="Draggable
+ *   item"` with `role="button"` — or `role="option"` when it is an `<li>` of a
+ *   `<ul mkDropList>`, which then becomes a labelled `listbox` (an `<li>` may
+ *   not take the `button` role).
+ * - **A focusable handle** (`<button mkDragHandle aria-label="…">`, or any
+ *   handle with `tabindex`): the handle is the keyboard target and receives
+ *   the `aria-roledescription` / `aria-pressed` / `aria-grabbed` state; the
+ *   item stays a plain container with no role and no `tabindex`, so it can hold
+ *   inputs, links and buttons of its own (no nested interactive controls) and
+ *   `<li>` items keep their list semantics.
  *
- * Keyboard: focus an item and press **Space/Enter** to pick it up, **Arrow**
- * keys to move it (crossing into connected lists at the ends / across the
- * perpendicular axis), **Space/Enter** to drop, **Escape** to cancel.
+ * Keyboard: focus the item (or its handle) and press **Space/Enter** to pick
+ * it up, **Arrow** keys to move it (crossing into connected lists at the ends /
+ * across the perpendicular axis), **Space/Enter** to drop, **Escape** to cancel.
  *
  * Touch: a swipe scrolls the page as usual — the drag only arms after a
  * long-press ({@link mkDragTouchDelay}, default 300 ms). While armed the item
@@ -168,9 +210,9 @@ const SETTLE_MS = 180;
  * synchronously on release so drops land exactly where the pointer ended.
  *
  * ```html
- * <li mkDrag [mkDragData]="row" [mkDragDisabled]="row.locked">
+ * <div mkDrag [mkDragData]="row" [mkDragDisabled]="row.locked">
  *   <span mkDragHandle aria-hidden="true">⠿</span> {{ row.title }}
- * </li>
+ * </div>
  * ```
  *
  * @typeParam T item data type.
@@ -206,6 +248,28 @@ class MkDrag {
      */
     ownHandles = computed(() => this.handles().filter((h) => h.element.closest('[mkDrag]') === this.element), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "ownHandles" }] : /* istanbul ignore next */ []));
+    /**
+     * The handle that carries the keyboard drag — the first of this item's
+     * handles that is focusable on its own (a `<button mkDragHandle>`, say).
+     * `null` when the item itself is the keyboard target.
+     */
+    keyboardHandle = computed(() => this.ownHandles().find((h) => h.isFocusable()) ?? null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "keyboardHandle" }] : /* istanbul ignore next */ []));
+    /**
+     * The role the item itself exposes: `null` when a focusable handle carries
+     * the interaction; `option` inside a list that resolved to a `listbox`
+     * (`<ul mkDropList>` / `<li mkDrag>`); `button` otherwise.
+     */
+    itemRole = computed(() => {
+        if (this.keyboardHandle())
+            return null;
+        return this.home?.role() === 'listbox' ? 'option' : 'button';
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "itemRole" }] : /* istanbul ignore next */ []));
+    /** The element keyboard events act on: the focusable handle, else the item. */
+    keyboardTarget() {
+        return this.keyboardHandle()?.element ?? this.element;
+    }
     /** True while a pointer drag is in progress. */
     dragging = signal(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "dragging" }] : /* istanbul ignore next */ []));
@@ -236,6 +300,29 @@ class MkDrag {
     originLeft = 0;
     originTop = 0;
     preview = null;
+    constructor() {
+        // Mirror the button state onto a focusable handle. Host bindings cannot
+        // reach a projected element, so the attributes are written directly; the
+        // effect re-runs whenever the handle or the lift/drag state changes.
+        effect(() => {
+            const handle = this.keyboardHandle();
+            if (!handle)
+                return;
+            const el = handle.element;
+            if (el.tagName !== 'BUTTON')
+                el.setAttribute('role', 'button');
+            el.setAttribute('aria-roledescription', 'Draggable item');
+            el.setAttribute('aria-grabbed', String(this.dragging() || this.lifted()));
+            this.toggleAttr(el, 'aria-pressed', this.lifted() ? 'true' : null);
+            this.toggleAttr(el, 'aria-disabled', this.disabled() ? 'true' : null);
+        });
+    }
+    toggleAttr(el, name, value) {
+        if (value === null)
+            el.removeAttribute(name);
+        else
+            el.setAttribute(name, value);
+    }
     moveHandler = (e) => this.onPointerMove(e);
     upHandler = (e) => this.onPointerUp(e);
     cancelHandler = () => this.finishPointer(true);
@@ -564,9 +651,10 @@ class MkDrag {
     onKeyDown(event) {
         const e = event;
         const key = e.key;
-        // Keys act on the focused item only — a nested item's keydown bubbles up
-        // through outer items, which must not pick themselves up.
-        if (e.target !== this.element)
+        // Keys act on the focused item (or its focusable handle) only — a nested
+        // item's keydown bubbles up through outer items, which must not pick
+        // themselves up, and keys typed into a row's inputs are not drag keys.
+        if (e.target !== this.keyboardTarget())
             return;
         if (!this.lifted()) {
             if ((key === ' ' || key === 'Enter') && !this.disabled() && this.home && !this.dragging()) {
@@ -607,8 +695,12 @@ class MkDrag {
                 break;
         }
     }
-    onBlur() {
+    onFocusOut(event) {
         // Losing focus mid-lift cancels the keyboard drag to avoid a stuck state.
+        // `focusout` bubbles, so only the keyboard target's own blur counts — a
+        // nested control losing focus must not cancel the outer item's lift.
+        if (event.target !== this.keyboardTarget())
+            return;
         if (this.lifted())
             this.cancelKeyboard();
     }
@@ -903,19 +995,22 @@ class MkDrag {
             .matches ?? false);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkDrag, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.7", type: MkDrag, isStandalone: true, selector: "[mkDrag]", inputs: { mkDragData: { classPropertyName: "mkDragData", publicName: "mkDragData", isSignal: true, isRequired: false, transformFunction: null }, mkDragDisabled: { classPropertyName: "mkDragDisabled", publicName: "mkDragDisabled", isSignal: true, isRequired: false, transformFunction: null }, mkDragTouchDelay: { classPropertyName: "mkDragTouchDelay", publicName: "mkDragTouchDelay", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "button", "aria-roledescription": "Draggable item", "draggable": "false" }, listeners: { "pointerdown": "onPointerDown($event)", "keydown": "onKeyDown($event)", "blur": "onBlur()" }, properties: { "attr.tabindex": "disabled() ? -1 : 0", "attr.aria-disabled": "disabled() || null", "attr.aria-pressed": "lifted() || null", "attr.aria-grabbed": "dragging() || lifted()", "class.mk-drag--disabled": "disabled()", "class.mk-drag--dragging": "dragging()", "class.mk-drag--lifted": "lifted()", "class.mk-drag--armed": "armed()", "class.mk-drag--has-handle": "ownHandles().length > 0", "class.mk-drag--horizontal": "inHorizontalList()" }, classAttribute: "mk-drag" }, queries: [{ propertyName: "handles", predicate: MkDragHandle, descendants: true, isSignal: true }], exportAs: ["mkDrag"], ngImport: i0, template: "<ng-content />\n", styles: ["@charset \"UTF-8\";:host{position:relative;cursor:grab;touch-action:pan-y;user-select:none;-webkit-user-select:none}:host(.mk-drag--horizontal){touch-action:manipulation}:host(.mk-drag--has-handle){cursor:default;touch-action:auto}:host(.mk-drag--dragging){cursor:grabbing}:host(.mk-drag--armed){cursor:grabbing;border-radius:var(--mk-radius-md);box-shadow:var(--mk-shadow-md)}:host(.mk-drag--lifted){outline:var(--mk-border-width-strong) solid var(--mk-primary);outline-offset:var(--mk-focus-ring-offset);border-radius:var(--mk-radius-md);background-color:var(--mk-surface-2);box-shadow:var(--mk-shadow-lg);z-index:var(--mk-z-sticky)}:host(.mk-drag--disabled){cursor:not-allowed;opacity:.55;touch-action:auto}:host(:focus-visible){outline:var(--mk-focus-ring-width) solid var(--mk-focus-ring);outline-offset:var(--mk-focus-ring-offset)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.7", type: MkDrag, isStandalone: true, selector: "[mkDrag]", inputs: { mkDragData: { classPropertyName: "mkDragData", publicName: "mkDragData", isSignal: true, isRequired: false, transformFunction: null }, mkDragDisabled: { classPropertyName: "mkDragDisabled", publicName: "mkDragDisabled", isSignal: true, isRequired: false, transformFunction: null }, mkDragTouchDelay: { classPropertyName: "mkDragTouchDelay", publicName: "mkDragTouchDelay", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "draggable": "false" }, listeners: { "pointerdown": "onPointerDown($event)", "keydown": "onKeyDown($event)", "focusout": "onFocusOut($event)" }, properties: { "attr.role": "itemRole()", "attr.aria-roledescription": "itemRole() ? 'Draggable item' : null", "attr.tabindex": "itemRole() ? (disabled() ? -1 : 0) : null", "attr.aria-disabled": "itemRole() ? disabled() || null : null", "attr.aria-pressed": "itemRole() === 'button' ? lifted() || null : null", "attr.aria-selected": "itemRole() === 'option' ? lifted() : null", "attr.aria-grabbed": "itemRole() ? dragging() || lifted() : null", "class.mk-drag--disabled": "disabled()", "class.mk-drag--dragging": "dragging()", "class.mk-drag--lifted": "lifted()", "class.mk-drag--armed": "armed()", "class.mk-drag--has-handle": "ownHandles().length > 0", "class.mk-drag--horizontal": "inHorizontalList()" }, classAttribute: "mk-drag" }, queries: [{ propertyName: "handles", predicate: MkDragHandle, descendants: true, isSignal: true }], exportAs: ["mkDrag"], ngImport: i0, template: "<ng-content />\n", styles: ["@charset \"UTF-8\";:host{position:relative;cursor:grab;touch-action:pan-y;user-select:none;-webkit-user-select:none}:host(.mk-drag--horizontal){touch-action:manipulation}:host(.mk-drag--has-handle){cursor:default;touch-action:auto}:host(.mk-drag--dragging){cursor:grabbing}:host(.mk-drag--armed){cursor:grabbing;border-radius:var(--mk-radius-md);box-shadow:var(--mk-shadow-md)}:host(.mk-drag--lifted){outline:var(--mk-border-width-strong) solid var(--mk-primary);outline-offset:var(--mk-focus-ring-offset);border-radius:var(--mk-radius-md);background-color:var(--mk-surface-2);box-shadow:var(--mk-shadow-lg);z-index:var(--mk-z-sticky)}:host(.mk-drag--disabled){cursor:not-allowed;opacity:.55;touch-action:auto}:host(:focus-visible){outline:var(--mk-focus-ring-width) solid var(--mk-focus-ring);outline-offset:var(--mk-focus-ring-offset)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkDrag, decorators: [{
             type: Component,
             args: [{ selector: '[mkDrag]', exportAs: 'mkDrag', changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         class: 'mk-drag',
-                        role: 'button',
-                        'aria-roledescription': 'Draggable item',
                         draggable: 'false',
-                        '[attr.tabindex]': 'disabled() ? -1 : 0',
-                        '[attr.aria-disabled]': 'disabled() || null',
-                        '[attr.aria-pressed]': 'lifted() || null',
-                        '[attr.aria-grabbed]': 'dragging() || lifted()',
+                        // Widget semantics live on the item only while no focusable handle takes
+                        // them over (see `keyboardHandle`); otherwise the item is a plain container.
+                        '[attr.role]': 'itemRole()',
+                        '[attr.aria-roledescription]': "itemRole() ? 'Draggable item' : null",
+                        '[attr.tabindex]': 'itemRole() ? (disabled() ? -1 : 0) : null',
+                        '[attr.aria-disabled]': 'itemRole() ? disabled() || null : null',
+                        '[attr.aria-pressed]': "itemRole() === 'button' ? lifted() || null : null",
+                        '[attr.aria-selected]': "itemRole() === 'option' ? lifted() : null",
+                        '[attr.aria-grabbed]': 'itemRole() ? dragging() || lifted() : null',
                         '[class.mk-drag--disabled]': 'disabled()',
                         '[class.mk-drag--dragging]': 'dragging()',
                         '[class.mk-drag--lifted]': 'lifted()',
@@ -924,12 +1019,29 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
                         '[class.mk-drag--horizontal]': 'inHorizontalList()',
                         '(pointerdown)': 'onPointerDown($event)',
                         '(keydown)': 'onKeyDown($event)',
-                        '(blur)': 'onBlur()',
+                        '(focusout)': 'onFocusOut($event)',
                     }, template: "<ng-content />\n", styles: ["@charset \"UTF-8\";:host{position:relative;cursor:grab;touch-action:pan-y;user-select:none;-webkit-user-select:none}:host(.mk-drag--horizontal){touch-action:manipulation}:host(.mk-drag--has-handle){cursor:default;touch-action:auto}:host(.mk-drag--dragging){cursor:grabbing}:host(.mk-drag--armed){cursor:grabbing;border-radius:var(--mk-radius-md);box-shadow:var(--mk-shadow-md)}:host(.mk-drag--lifted){outline:var(--mk-border-width-strong) solid var(--mk-primary);outline-offset:var(--mk-focus-ring-offset);border-radius:var(--mk-radius-md);background-color:var(--mk-surface-2);box-shadow:var(--mk-shadow-lg);z-index:var(--mk-z-sticky)}:host(.mk-drag--disabled){cursor:not-allowed;opacity:.55;touch-action:auto}:host(:focus-visible){outline:var(--mk-focus-ring-width) solid var(--mk-focus-ring);outline-offset:var(--mk-focus-ring-offset)}\n"] }]
-        }], propDecorators: { mkDragData: [{ type: i0.Input, args: [{ isSignal: true, alias: "mkDragData", required: false }] }], mkDragDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "mkDragDisabled", required: false }] }], mkDragTouchDelay: [{ type: i0.Input, args: [{ isSignal: true, alias: "mkDragTouchDelay", required: false }] }], handles: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => MkDragHandle), { ...{ descendants: true }, isSignal: true }] }] } });
+        }], ctorParameters: () => [], propDecorators: { mkDragData: [{ type: i0.Input, args: [{ isSignal: true, alias: "mkDragData", required: false }] }], mkDragDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "mkDragDisabled", required: false }] }], mkDragTouchDelay: [{ type: i0.Input, args: [{ isSignal: true, alias: "mkDragTouchDelay", required: false }] }], handles: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => MkDragHandle), { ...{ descendants: true }, isSignal: true }] }] } });
 
 /* eslint-disable @typescript-eslint/no-explicit-any -- item-type params use
    `any` to accept drags of any data type without generic-variance friction. */
+/**
+ * Roles on which `aria-orientation` is permitted (WAI-ARIA 1.2). On any other
+ * role the attribute is invalid, so the list only exposes it for these.
+ */
+const ORIENTATION_ROLES = new Set([
+    'listbox',
+    'menu',
+    'radiogroup',
+    'scrollbar',
+    'select',
+    'separator',
+    'slider',
+    'tablist',
+    'toolbar',
+    'tree',
+    'treegrid',
+]);
 /**
  * A drop container for reorderable `[mkDrag]` items.
  *
@@ -941,14 +1053,29 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
  * The array bound to `mkDropListData` is **not** mutated for you — handle
  * `mkDropListDropped` and call {@link mkMoveItemInArray} / {@link mkTransferArrayItem}.
  *
+ * Semantics follow the host element and its items, so the tree is always
+ * valid ARIA:
+ *
+ * - any host other than `<ul>`/`<ol>` is a `role="group"` (named by
+ *   `mkDropListLabel`) of `role="button"` items;
+ * - a `<ul>`/`<ol>` whose `<li mkDrag>` items all carry a *focusable*
+ *   `[mkDragHandle]` stays a plain list — the handles are the controls;
+ * - a `<ul>`/`<ol>` whose items are themselves the keyboard targets becomes a
+ *   `listbox` of `option`s (an `<li>` may not be a `button`); give it a
+ *   `mkDropListLabel`, listboxes need a name.
+ *
+ * A `role` you set in the template is kept, and `aria-orientation` is only
+ * exposed on roles that allow it (`listbox`, `toolbar`, `tree`, …) — the
+ * keyboard model handles both axes regardless.
+ *
  * ```html
- * <ul mkDropList [mkDropListData]="todo()"
- *     mkDropListId="todo" [mkDropListConnectedTo]="['done']"
- *     (mkDropListDropped)="drop($event)">
+ * <div mkDropList [mkDropListData]="todo()" mkDropListLabel="To do"
+ *      mkDropListId="todo" [mkDropListConnectedTo]="['done']"
+ *      (mkDropListDropped)="drop($event)">
  *   @for (t of todo(); track t.id) {
- *     <li mkDrag [mkDragData]="t">{{ t.title }}</li>
+ *     <div mkDrag [mkDragData]="t">{{ t.title }}</div>
  *   }
- * </ul>
+ * </div>
  * ```
  *
  * @typeParam T item data type.
@@ -988,6 +1115,31 @@ class MkDropList {
     /** Announceable name: the label when set, otherwise the resolved id. */
     label = computed(() => this.mkDropListLabel() || this.id(), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    /** A `role` written in the template — always kept. */
+    explicitRole = this.element.getAttribute('role');
+    isNativeList = /^(UL|OL)$/.test(this.element.tagName);
+    /**
+     * The role the host exposes. One set in the template wins. A `<ul>`/`<ol>`
+     * keeps its implicit `list` role (`null` — nothing is written) while every
+     * item hands the keyboard drag to a focusable handle, and becomes a
+     * `listbox` (its items `option`s) otherwise. Any other element is a `group`.
+     */
+    role = computed(() => {
+        if (this.explicitRole)
+            return this.explicitRole;
+        if (!this.isNativeList)
+            return 'group';
+        return this.drags().every((d) => d.keyboardHandle()) ? null : 'listbox';
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "role" }] : /* istanbul ignore next */ []));
+    /** Whether `aria-orientation` is valid on the effective role. */
+    orientationAllowed = computed(() => ORIENTATION_ROLES.has(this.role() ?? ''), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "orientationAllowed" }] : /* istanbul ignore next */ []));
+    /** A static `aria-label` written in the template, kept when no label input is set. */
+    staticAriaLabel = this.element.getAttribute('aria-label');
+    /** Accessible name of the list: `mkDropListLabel`, else the template's own. */
+    ariaLabel = computed(() => this.mkDropListLabel() || this.staticAriaLabel || null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
     /** Connected-list ids, normalised to a plain array. */
     connectedTo = computed(() => this.mkDropListConnectedTo() ?? [], /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "connectedTo" }] : /* istanbul ignore next */ []));
@@ -1027,13 +1179,15 @@ class MkDropList {
         this.mkDropListDropped.emit(event);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkDropList, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.7", type: MkDropList, isStandalone: true, selector: "[mkDropList]", inputs: { mkDropListData: { classPropertyName: "mkDropListData", publicName: "mkDropListData", isSignal: true, isRequired: false, transformFunction: null }, mkDropListId: { classPropertyName: "mkDropListId", publicName: "mkDropListId", isSignal: true, isRequired: false, transformFunction: null }, mkDropListConnectedTo: { classPropertyName: "mkDropListConnectedTo", publicName: "mkDropListConnectedTo", isSignal: true, isRequired: false, transformFunction: null }, mkDropListLabel: { classPropertyName: "mkDropListLabel", publicName: "mkDropListLabel", isSignal: true, isRequired: false, transformFunction: null }, mkDropListOrientation: { classPropertyName: "mkDropListOrientation", publicName: "mkDropListOrientation", isSignal: true, isRequired: false, transformFunction: null }, mkDropListDisabled: { classPropertyName: "mkDropListDisabled", publicName: "mkDropListDisabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { mkDropListDropped: "mkDropListDropped" }, host: { properties: { "attr.aria-orientation": "mkDropListOrientation()", "attr.aria-disabled": "mkDropListDisabled() || null", "class.mk-drop-list--horizontal": "mkDropListOrientation() === 'horizontal'", "class.mk-drop-list--disabled": "mkDropListDisabled()", "class.mk-drop-list--receiving": "_receiving()" }, classAttribute: "mk-drop-list" }, queries: [{ propertyName: "drags", predicate: MkDrag, isSignal: true }], exportAs: ["mkDropList"], ngImport: i0, template: "<ng-content />\n", styles: ["@charset \"UTF-8\";:host{display:block;position:relative}:host(.mk-drop-list--receiving){outline:var(--mk-border-width-strong) solid var(--mk-primary-subtle-text);outline-offset:calc(-1 * var(--mk-border-width-strong));border-radius:var(--mk-radius-md);background-color:color-mix(in srgb,var(--mk-primary) 6%,transparent)}:host(.mk-drop-list--disabled){cursor:not-allowed}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.7", type: MkDropList, isStandalone: true, selector: "[mkDropList]", inputs: { mkDropListData: { classPropertyName: "mkDropListData", publicName: "mkDropListData", isSignal: true, isRequired: false, transformFunction: null }, mkDropListId: { classPropertyName: "mkDropListId", publicName: "mkDropListId", isSignal: true, isRequired: false, transformFunction: null }, mkDropListConnectedTo: { classPropertyName: "mkDropListConnectedTo", publicName: "mkDropListConnectedTo", isSignal: true, isRequired: false, transformFunction: null }, mkDropListLabel: { classPropertyName: "mkDropListLabel", publicName: "mkDropListLabel", isSignal: true, isRequired: false, transformFunction: null }, mkDropListOrientation: { classPropertyName: "mkDropListOrientation", publicName: "mkDropListOrientation", isSignal: true, isRequired: false, transformFunction: null }, mkDropListDisabled: { classPropertyName: "mkDropListDisabled", publicName: "mkDropListDisabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { mkDropListDropped: "mkDropListDropped" }, host: { properties: { "attr.role": "role()", "attr.aria-label": "ariaLabel()", "attr.aria-orientation": "orientationAllowed() ? mkDropListOrientation() : null", "attr.aria-disabled": "mkDropListDisabled() || null", "class.mk-drop-list--horizontal": "mkDropListOrientation() === 'horizontal'", "class.mk-drop-list--disabled": "mkDropListDisabled()", "class.mk-drop-list--receiving": "_receiving()" }, classAttribute: "mk-drop-list" }, queries: [{ propertyName: "drags", predicate: MkDrag, isSignal: true }], exportAs: ["mkDropList"], ngImport: i0, template: "<ng-content />\n", styles: ["@charset \"UTF-8\";:host{display:block;position:relative}:host(.mk-drop-list--receiving){outline:var(--mk-border-width-strong) solid var(--mk-primary-subtle-text);outline-offset:calc(-1 * var(--mk-border-width-strong));border-radius:var(--mk-radius-md);background-color:color-mix(in srgb,var(--mk-primary) 6%,transparent)}:host(.mk-drop-list--disabled){cursor:not-allowed}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkDropList, decorators: [{
             type: Component,
             args: [{ selector: '[mkDropList]', exportAs: 'mkDropList', changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         class: 'mk-drop-list',
-                        '[attr.aria-orientation]': 'mkDropListOrientation()',
+                        '[attr.role]': 'role()',
+                        '[attr.aria-label]': 'ariaLabel()',
+                        '[attr.aria-orientation]': 'orientationAllowed() ? mkDropListOrientation() : null',
                         '[attr.aria-disabled]': 'mkDropListDisabled() || null',
                         '[class.mk-drop-list--horizontal]': "mkDropListOrientation() === 'horizontal'",
                         '[class.mk-drop-list--disabled]': 'mkDropListDisabled()',