@pine-ds/core 4.10.0 → 4.12.0

package/dist/collection/components/pds-sortable/pds-sortable.js

@@ -1,6 +1,11 @@
-import { Host, h } from "@stencil/core";
+import { forceUpdate, Host, h } from "@stencil/core";
+import { sortableItemLabel } from "./sortable-label";
 import { HostStylingKeeper } from "../../utils/attributes";
+import { formatMessage } from "../../i18n";
 import Sortable from "sortablejs";
+const LIVE_REGION_CLASS = 'pds-sortable__live-region';
+const GRABBED_CLASS = 'pds-sortable-item--grabbed';
+const HANDLE_SELECTOR = '.pds-sortable-item__handle';
 /**
  * @lightDom host-only
  */
@@ -24,11 +29,155 @@ export class PdsSortable {
          * Determines the grabbable area for the `pds-sortable-item`.
          */
         this.handleType = 'row';
+        /**
+         * Accessible label for each item's reorder handle, the button the keyboard reorders with. Pass a translated string to localize it; `{item}` is interpolated.
+         * @defaultValue 'Reorder {item}'
+         */
+        this.handleLabel = 'Reorder {item}';
+        /**
+         * Screen-reader announcement when an item is picked up from the keyboard. Pass a translated string to localize it; `{item}`, `{position}` and `{total}` are interpolated.
+         * @defaultValue '{item}, picked up. Position {position} of {total}. Press the arrow keys to move, Space or Enter to drop, Escape to cancel.'
+         */
+        this.itemPickedUpLabel = '{item}, picked up. Position {position} of {total}. Press the arrow keys to move, Space or Enter to drop, Escape to cancel.';
+        /**
+         * Screen-reader announcement when a picked-up item is moved. Pass a translated string to localize it; `{item}`, `{position}` and `{total}` are interpolated.
+         * @defaultValue '{item}, moved to position {position} of {total}'
+         */
+        this.itemMovedLabel = '{item}, moved to position {position} of {total}';
+        /**
+         * Screen-reader announcement when a picked-up item is dropped. Pass a translated string to localize it; `{item}`, `{position}` and `{total}` are interpolated.
+         * @defaultValue '{item}, dropped at position {position} of {total}'
+         */
+        this.itemDroppedLabel = '{item}, dropped at position {position} of {total}';
+        /**
+         * Screen-reader announcement when a keyboard reorder is canceled and the item goes back. Pass a translated string to localize it; `{item}`, `{position}` and `{total}` are interpolated.
+         * @defaultValue 'Reorder canceled. {item} returned to position {position} of {total}'
+         */
+        this.reorderCanceledLabel = 'Reorder canceled. {item} returned to position {position} of {total}';
+        /** The item picked up from the keyboard, and where it started. */
+        this.grabbed = null;
+        this.liveRegion = null;
         this.hostKeeper = new HostStylingKeeper();
+        // Set only when a `pointerdown` here drops a picked-up item, and only until the `click` that
+        // follows it, if one does: a screen reader's browse-mode Enter or Space synthesizes both for
+        // the same press, and that click must not re-pick-up what its own pointerdown just dropped.
+        this.droppedByPointerDown = null;
+        this.handleFocusIn = () => {
+            this.ensureLiveRegion();
+        };
+        /**
+         * Focus leaving a picked-up item drops it where it is, unless the whole window lost focus (the user
+         * switched apps), when the item stays picked up for their return. A real window blur does not move
+         * `document.activeElement` away from the handle that's losing focus (some browsers reset it to `body`
+         * instead, but never to a different element), so it's told apart from focus moving into an iframe or
+         * another embedded document that way: an iframe becomes a genuinely different active element, while a
+         * window blur leaves `activeElement` as the handle itself, `null`, or `body`.
+         */
+        this.handleFocusOut = (ev) => {
+            var _a;
+            if (!this.isGrabbing() || ev.target !== this.focusTarget(this.grabbed.item))
+                return;
+            const nothingElseFocused = document.activeElement === null || document.activeElement === document.body || document.activeElement === ev.target;
+            if (ev.relatedTarget === null && ((_a = document.hasFocus) === null || _a === void 0 ? void 0 : _a.call(document)) === false && nothingElseFocused)
+                return;
+            this.drop(ev);
+        };
+        /**
+         * Screen readers in browse mode turn Enter and Space on a button into a click with no key events,
+         * so a click that isn't from a pointer (`detail` is 0) picks up or drops too.
+         */
+        this.handleClick = (ev) => {
+            if (this.disabled || ev.detail !== 0)
+                return;
+            const item = this.targetItem(ev.target);
+            if (!item)
+                return;
+            // NVDA and JAWS in Chromium fire this click's capture-phase `pointerdown` first, for the
+            // same Enter or Space press. If that pointerdown found the item already grabbed and dropped
+            // it, this click is that same press's drop, already handled -- picking the item back up here
+            // would leave it stuck grabbed, since Escape and the arrow keys don't reach the handle in
+            // browse mode.
+            if (this.droppedByPointerDown === item) {
+                this.droppedByPointerDown = null;
+                return;
+            }
+            if (!this.isGrabbing()) {
+                this.pickUp(item);
+            }
+            else if (this.grabbed.item === item) {
+                this.drop(ev);
+            }
+        };
+        this.handleKeyDown = (ev) => {
+            if (this.disabled || ev.altKey || ev.ctrlKey || ev.metaKey)
+                return;
+            const item = this.targetItem(ev.target);
+            if (!item)
+                return;
+            if (!this.isGrabbing()) {
+                if ((ev.key === ' ' || ev.key === 'Enter') && !ev.repeat) {
+                    ev.preventDefault();
+                    this.pickUp(item);
+                }
+                return;
+            }
+            if (this.grabbed.item !== item)
+                return;
+            const items = this.items();
+            const index = items.indexOf(item);
+            switch (ev.key) {
+                case 'ArrowUp':
+                    ev.preventDefault();
+                    this.moveTo(item, index - 1);
+                    break;
+                case 'ArrowDown':
+                    ev.preventDefault();
+                    this.moveTo(item, index + 1);
+                    break;
+                case 'Home':
+                    ev.preventDefault();
+                    this.moveTo(item, 0);
+                    break;
+                case 'End':
+                    ev.preventDefault();
+                    this.moveTo(item, items.length - 1);
+                    break;
+                case ' ':
+                case 'Enter':
+                    ev.preventDefault();
+                    if (!ev.repeat)
+                        this.drop(ev);
+                    break;
+                case 'Escape':
+                    // Keep an enclosing modal or drawer from closing too.
+                    ev.preventDefault();
+                    ev.stopPropagation();
+                    this.cancel();
+                    break;
+            }
+        };
     }
     handleDisabledChange() {
         var _a;
         (_a = this.sortableInstance) === null || _a === void 0 ? void 0 : _a.option('disabled', this.disabled);
+        if (this.disabled && this.isGrabbing())
+            this.cancel();
+        this.updateItems();
+    }
+    handleHandleTypeChange() {
+        var _a;
+        if (this.isGrabbing())
+            this.cancel();
+        // `null`, not `undefined`: SortableJS treats `option(name, undefined)` as a read, which would
+        // leave a previous handle restriction in place.
+        (_a = this.sortableInstance) === null || _a === void 0 ? void 0 : _a.option('handle', this.handleType === 'handle' ? HANDLE_SELECTOR : null);
+        this.updateItems();
+    }
+    updateItems() {
+        this.items().forEach((item) => {
+            if (item.tagName === 'PDS-SORTABLE-ITEM')
+                forceUpdate(item);
+        });
     }
     classNames() {
         const classNames = ['pds-sortable'];
@@ -50,11 +199,19 @@ export class PdsSortable {
         this.hostKeeper.connect(this.el);
     }
     disconnectedCallback() {
+        var _a;
         this.hostKeeper.disconnect();
+        // Put the order back: a move that was never dropped was never emitted.
+        if (this.isGrabbing())
+            this.cancel(false);
+        (_a = this.liveRegion) === null || _a === void 0 ? void 0 : _a.remove();
+        this.liveRegion = null;
     }
     componentDidLoad() {
+        var _a;
+        const reduceMotion = typeof window !== 'undefined' && ((_a = window.matchMedia) === null || _a === void 0 ? void 0 : _a.call(window, '(prefers-reduced-motion: reduce)').matches);
         let sortableOptions = {
-            animation: 150,
+            animation: reduceMotion ? 0 : 150,
             disabled: this.disabled,
             ghostClass: 'pds-sortable-item--ghost',
             dragClass: 'pds-sortable-item--drag',
@@ -63,14 +220,203 @@ export class PdsSortable {
             },
         };
         if (this.handleType === 'handle') {
-            sortableOptions = Object.assign(Object.assign({}, sortableOptions), { handle: '.pds-sortable-item__handle' });
+            sortableOptions = Object.assign(Object.assign({}, sortableOptions), { handle: HANDLE_SELECTOR });
         }
         this.sortableInstance = Sortable.create(this.el, sortableOptions);
+        // In place before the first announcement, as a region that's created with its text isn't read.
+        this.ensureLiveRegion();
+        // Items that rendered before this list was defined have no handle yet.
+        this.updateItems();
+    }
+    /** The children that can be reordered, counted as SortableJS counts them. */
+    items() {
+        return Array.from(this.el.children).filter((child) => child.tagName !== 'TEMPLATE');
+    }
+    /**
+     * The live region sits right after the list, not in it, so it's never counted as an item, by
+     * SortableJS or by a consumer reading the list's children, and it's still in the same modal. A
+     * morph that removes it gets it put back on the next focus.
+     */
+    ensureLiveRegion() {
+        if (!this.liveRegion) {
+            // A page-cache (bfcache, Turbo) restore brings back a DOM snapshot that can already have
+            // this list's own live region sitting right after it -- adopted here instead of making
+            // another, which would leave the stale one behind with its last message still in it.
+            const existing = this.el.nextElementSibling;
+            if (existing === null || existing === void 0 ? void 0 : existing.classList.contains(LIVE_REGION_CLASS)) {
+                this.liveRegion = existing;
+                return;
+            }
+            const region = document.createElement('span');
+            region.className = LIVE_REGION_CLASS;
+            region.setAttribute('role', 'status');
+            region.setAttribute('aria-live', 'polite');
+            region.setAttribute('aria-atomic', 'true');
+            // Created here, not rendered, so the scoped stylesheet can't reach it. With no inset, an
+            // absolutely positioned element sits at its static position -- the end of the list, here --
+            // rather than collapsing to (0, 0), which can grow a scrollable ancestor's scroll area.
+            Object.assign(region.style, {
+                position: 'absolute',
+                width: '1px',
+                height: '1px',
+                margin: '-1px',
+                padding: '0',
+                overflow: 'hidden',
+                clipPath: 'inset(50%)',
+                whiteSpace: 'nowrap',
+                border: '0',
+            });
+            this.liveRegion = region;
+        }
+        if (!this.liveRegion.isConnected && this.el.parentNode) {
+            // The host may itself be slotted into a named slot (e.g. inside a modal); stay in it rather
+            // than falling back to the default slot, which a consumer's template may not render.
+            const hostSlot = this.el.getAttribute('slot');
+            if (hostSlot !== null) {
+                this.liveRegion.setAttribute('slot', hostSlot);
+            }
+            else {
+                this.liveRegion.removeAttribute('slot');
+            }
+            this.el.parentNode.insertBefore(this.liveRegion, this.el.nextSibling);
+        }
+    }
+    announce(template, item) {
+        this.ensureLiveRegion();
+        const items = this.items();
+        const message = formatMessage(template, {
+            item: sortableItemLabel(item),
+            position: items.indexOf(item) + 1,
+            total: items.length,
+        });
+        // A repeat of the same text isn't announced again, so tell the two apart.
+        this.liveRegion.textContent = message === this.liveRegion.textContent ? `${message} ` : message;
+    }
+    handlePointerDown(ev) {
+        // A drag takes over from a keyboard reorder: keep the moves so far, so the drag starts from them.
+        // Only the primary button (or a touch/pen contact, same value) can start that drag -- a
+        // right-click or a secondary pointer does something else (a context menu, typically) and
+        // must not drop the item out from under it.
+        if (ev.button !== 0 || !this.isGrabbing())
+            return;
+        const item = this.grabbed.item;
+        this.drop(ev);
+        this.droppedByPointerDown = item;
+        window.setTimeout(() => {
+            if (this.droppedByPointerDown === item)
+                this.droppedByPointerDown = null;
+        }, 0);
+    }
+    /**
+     * Whether an item is picked up. One that's been taken out of the list meanwhile (a re-render, a
+     * stream update) is let go, as there's nothing left to move.
+     */
+    isGrabbing() {
+        if (this.grabbed && this.grabbed.item.parentElement !== this.el)
+            this.release();
+        return this.grabbed !== null;
+    }
+    /** The item whose handle `target` is, if it is one. */
+    targetItem(target) {
+        const item = this.items().find((candidate) => candidate.contains(target));
+        return item && this.focusTarget(item) === target ? item : undefined;
+    }
+    /** The item's handle, the button the keyboard reorders with. */
+    focusTarget(item) {
+        var _a;
+        return ((_a = Array.from(item.children).find((child) => child.matches(HANDLE_SELECTOR))) !== null && _a !== void 0 ? _a : null);
+    }
+    // SortableJS tells `index` (among all children) and `draggableIndex` (among draggable ones)
+    // apart for a list that also holds non-draggable children. This list doesn't -- the live
+    // region that once lived among `this.el`'s children now sits outside it as a sibling -- so
+    // `items()` already is every child, and the two counts are always the same.
+    indexes(item) {
+        const index = this.items().indexOf(item);
+        return { index, draggableIndex: index };
+    }
+    pickUp(item) {
+        var _a;
+        const { index, draggableIndex } = this.indexes(item);
+        this.grabbed = { item, oldIndex: index, oldDraggableIndex: draggableIndex };
+        item.classList.add(GRABBED_CLASS);
+        (_a = this.focusTarget(item)) === null || _a === void 0 ? void 0 : _a.setAttribute('aria-pressed', 'true');
+        this.announce(this.itemPickedUpLabel, item);
+    }
+    /**
+     * Moves the other items around `item` rather than `item` itself, so it never leaves the DOM and
+     * keeps focus.
+     */
+    moveTo(item, to, announce = true) {
+        var _a;
+        const items = this.items();
+        const from = items.indexOf(item);
+        if (to < 0 || to >= items.length || to === from) {
+            // At the first or last position, an out-of-range attempt (ArrowUp at the top, ArrowDown at
+            // the bottom) or a no-op one (Home already first, End already last) would otherwise leave
+            // a screen reader user with no sign the key landed at all. Repeating the current position
+            // confirms it without implying a move that didn't happen -- `cancel()`'s own call here
+            // passes `announce: false` and gets its own, different announcement instead.
+            if (announce)
+                this.announce(this.itemMovedLabel, item);
+            return;
+        }
+        if (to < from) {
+            const next = item.nextSibling;
+            items.slice(to, from).forEach((sibling) => this.el.insertBefore(sibling, next));
+        }
+        else {
+            items.slice(from + 1, to + 1).forEach((sibling) => this.el.insertBefore(sibling, item));
+        }
+        // Focus doesn't move, so the browser won't scroll the item into view itself.
+        (_a = item.scrollIntoView) === null || _a === void 0 ? void 0 : _a.call(item, { block: 'nearest' });
+        if (announce)
+            this.announce(this.itemMovedLabel, item);
+    }
+    drop(originalEvent) {
+        const { item, oldIndex, oldDraggableIndex } = this.grabbed;
+        this.release();
+        this.announce(this.itemDroppedLabel, item);
+        const { index, draggableIndex } = this.indexes(item);
+        // A keyboard drop happens more often than a drag: tabbing away from a picked-up row, a click
+        // elsewhere in the list, or the second press of a screen reader's browse-mode Enter all drop
+        // it too. Emitting unconditionally would have a consumer that saves on every event send a
+        // no-op request each time nothing actually moved.
+        if (draggableIndex === oldDraggableIndex)
+            return;
+        // The same shape SortableJS gives `onEnd`, with the event that ended the move as
+        // `originalEvent` -- not always a `KeyboardEvent`: a `FocusEvent` when focus leaves the row,
+        // a `PointerEvent` for a pointerdown, or a `MouseEvent` for a browse-mode click.
+        const detail = Object.assign(new CustomEvent('end', { bubbles: true, cancelable: true }), {
+            item,
+            from: this.el,
+            to: this.el,
+            oldIndex,
+            newIndex: index,
+            oldDraggableIndex,
+            newDraggableIndex: draggableIndex,
+            originalEvent,
+            pullMode: undefined,
+        });
+        this.pdsSortableItemMoved.emit(detail);
+    }
+    cancel(announce = true) {
+        const { item, oldDraggableIndex } = this.grabbed;
+        this.release();
+        // Items may have come or gone meanwhile, so go back as near the start as the list allows.
+        this.moveTo(item, Math.min(oldDraggableIndex, this.items().length - 1), false);
+        if (announce)
+            this.announce(this.reorderCanceledLabel, item);
+    }
+    release() {
+        var _a;
+        this.grabbed.item.classList.remove(GRABBED_CLASS);
+        (_a = this.focusTarget(this.grabbed.item)) === null || _a === void 0 ? void 0 : _a.setAttribute('aria-pressed', 'false');
+        this.grabbed = null;
     }
     render() {
         const classNames = this.classNames();
         this.hostKeeper.record(classNames);
-        return (h(Host, { key: '6e9e7b769f57ebfd81541fbecbe17b3fb4ad3e47', class: classNames, id: this.componentId }, h("slot", { key: 'c9466a216862c0a3e578f3fcfc1ac1e26146722b' })));
+        return (h(Host, { key: 'a1fb28574e3aa92a923c4baeecec690d4052601f', class: classNames, id: this.componentId, onFocusin: this.handleFocusIn, onFocusout: this.handleFocusOut, onKeyDown: this.handleKeyDown, onClick: this.handleClick }, h("slot", { key: 'b9a255d4f94a6b9976a4cac7e142e45210125828' })));
     }
     static get is() { return "pds-sortable"; }
     static get encapsulation() { return "scoped"; }
@@ -190,6 +536,121 @@ export class PdsSortable {
                 "reflect": false,
                 "attribute": "handle-type",
                 "defaultValue": "'row'"
+            },
+            "handleLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "defaultValue",
+                            "text": "'Reorder {item}'"
+                        }],
+                    "text": "Accessible label for each item's reorder handle, the button the keyboard reorders with. Pass a translated string to localize it; `{item}` is interpolated."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "handle-label",
+                "defaultValue": "'Reorder {item}'"
+            },
+            "itemPickedUpLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "defaultValue",
+                            "text": "'{item}, picked up. Position {position} of {total}. Press the arrow keys to move, Space or Enter to drop, Escape to cancel.'"
+                        }],
+                    "text": "Screen-reader announcement when an item is picked up from the keyboard. Pass a translated string to localize it; `{item}`, `{position}` and `{total}` are interpolated."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "item-picked-up-label",
+                "defaultValue": "'{item}, picked up. Position {position} of {total}. Press the arrow keys to move, Space or Enter to drop, Escape to cancel.'"
+            },
+            "itemMovedLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "defaultValue",
+                            "text": "'{item}, moved to position {position} of {total}'"
+                        }],
+                    "text": "Screen-reader announcement when a picked-up item is moved. Pass a translated string to localize it; `{item}`, `{position}` and `{total}` are interpolated."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "item-moved-label",
+                "defaultValue": "'{item}, moved to position {position} of {total}'"
+            },
+            "itemDroppedLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "defaultValue",
+                            "text": "'{item}, dropped at position {position} of {total}'"
+                        }],
+                    "text": "Screen-reader announcement when a picked-up item is dropped. Pass a translated string to localize it; `{item}`, `{position}` and `{total}` are interpolated."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "item-dropped-label",
+                "defaultValue": "'{item}, dropped at position {position} of {total}'"
+            },
+            "reorderCanceledLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "defaultValue",
+                            "text": "'Reorder canceled. {item} returned to position {position} of {total}'"
+                        }],
+                    "text": "Screen-reader announcement when a keyboard reorder is canceled and the item goes back. Pass a translated string to localize it; `{item}`, `{position}` and `{total}` are interpolated."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "reorder-canceled-label",
+                "defaultValue": "'Reorder canceled. {item} returned to position {position} of {total}'"
             }
         };
     }
@@ -202,7 +663,7 @@ export class PdsSortable {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": "Event emitted when a sortable item is moved."
+                    "text": "Event emitted when a sortable item is moved, by dragging or from the keyboard. A keyboard move\ncarries the same fields as a drag (`item`, `from`, `to`, `oldIndex`, `newIndex`,\n`oldDraggableIndex`, `newDraggableIndex`), with the event that ended the move as\n`originalEvent` -- a `KeyboardEvent` for Space or Enter, but a `FocusEvent`, `PointerEvent` or\n`MouseEvent` when the drop instead comes from focus leaving the row, a drag taking over, or a\nscreen reader's browse-mode click."
                 },
                 "complexType": {
                     "original": "SortableEvent",
@@ -223,6 +684,21 @@ export class PdsSortable {
         return [{
                 "propName": "disabled",
                 "methodName": "handleDisabledChange"
+            }, {
+                "propName": "handleType",
+                "methodName": "handleHandleTypeChange"
+            }, {
+                "propName": "handleLabel",
+                "methodName": "updateItems"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "pointerdown",
+                "method": "handlePointerDown",
+                "target": undefined,
+                "capture": true,
+                "passive": true
             }];
     }
 }

package/dist/collection/components/pds-sortable/sortable-label.js

@@ -0,0 +1,33 @@
+const ELEMENT_NODE = 1;
+const TEXT_NODE = 3;
+/**
+ * The name a sortable item goes by in its handle's label and in reorder announcements: its
+ * `item-label`, or else its own text, leaving out the handle and the actions.
+ * @param item - A `pds-sortable-item`
+ * @returns The item's name, with whitespace collapsed
+ */
+export const sortableItemLabel = (item) => {
+    var _a;
+    const { itemLabel } = item;
+    if (itemLabel)
+        return itemLabel;
+    // Only the first text-bearing child, not every one of them joined: a row with a status chip or
+    // an actions menu outside the `sortable-item-actions` slot would otherwise read that text into
+    // the name too (e.g. "Reorder Newsletter Default Edit Archive Duplicate"). The main content is
+    // conventionally the first child, so this still gets a real multi-line label (the first child
+    // can itself wrap several lines of text) without pulling in siblings meant to be set dressing.
+    for (const node of Array.from(item.childNodes)) {
+        // Comments (such as a server's template annotations) and script, style and template contents
+        // aren't part of the name.
+        if (node.nodeType === ELEMENT_NODE &&
+            node.matches('.pds-sortable-item__handle, .pds-sortable-item__actions, [slot="sortable-item-actions"], script, style, template')) {
+            continue;
+        }
+        if (node.nodeType !== TEXT_NODE && node.nodeType !== ELEMENT_NODE)
+            continue;
+        const text = ((_a = node.textContent) !== null && _a !== void 0 ? _a : '').replace(/\s+/g, ' ').trim();
+        if (text)
+            return text;
+    }
+    return '';
+};

package/dist/collection/components/pds-sortable/stories/pds-sortable.stories.js

@@ -75,6 +75,21 @@ const FullDemoTemplate = (args) => html`
   </pds-sortable-item>
 </pds-sortable>`;
 
+const LocalizedTemplate = (args) => html`
+<pds-sortable
+  component-id="${args.componentId}"
+  handle-type="${args.handleType}"
+  handle-label="${args.handleLabel}"
+  item-picked-up-label="${args.itemPickedUpLabel}"
+  item-moved-label="${args.itemMovedLabel}"
+  item-dropped-label="${args.itemDroppedLabel}"
+  reorder-canceled-label="${args.reorderCanceledLabel}"
+>
+  <pds-sortable-item item-label="Introduction">Introduction · 3 leçons</pds-sortable-item>
+  <pds-sortable-item item-label="Module 1">Module 1 · 5 leçons</pds-sortable-item>
+  <pds-sortable-item item-label="Module 2">Module 2 · 4 leçons</pds-sortable-item>
+</pds-sortable>`;
+
 export const Default = BaseTemplate.bind();
 Default.args = {
   componentId: 'default',
@@ -137,3 +152,15 @@ FullDemo.args = {
   dividers: true,
   handleType: 'row',
 };
+
+export const Localized = LocalizedTemplate.bind();
+Localized.args = {
+  componentId: 'localized',
+  handleType: 'handle',
+  handleLabel: 'Réorganiser {item}',
+  itemPickedUpLabel:
+    '{item} sélectionné. Position {position} sur {total}. Utilisez les flèches pour déplacer, Espace ou Entrée pour déposer, Échap pour annuler.',
+  itemMovedLabel: '{item} déplacé en position {position} sur {total}',
+  itemDroppedLabel: '{item} déposé en position {position} sur {total}',
+  reorderCanceledLabel: 'Réorganisation annulée. {item} revenu en position {position} sur {total}',
+};