@jupyterlab/filebrowser 4.6.0-alpha.4 → 4.6.0-alpha.5

package/lib/crumbs.js

@@ -5,6 +5,7 @@ import { PageConfig, PathExt } from '@jupyterlab/coreutils';
 import { renameFile } from '@jupyterlab/docmanager';
 import { nullTranslator } from '@jupyterlab/translation';
 import { ellipsesIcon, homeIcon as preferredIcon, folderIcon as rootIcon } from '@jupyterlab/ui-components';
+import { PathNavigator } from './pathnavigator';
 import { JSONExt } from '@lumino/coreutils';
 import { Throttler } from '@lumino/polling';
 import { Widget } from '@lumino/widgets';
@@ -40,6 +41,18 @@ const CONTENTS_MIME = 'application/x-jupyter-icontents';
  * The class name added to drop targets.
  */
 const DROP_TARGET_CLASS = 'jp-mod-dropTarget';
+/**
+ * The class name for the container span that holds all breadcrumb items.
+ */
+const BREADCRUMB_CONTAINER_CLASS = 'jp-BreadCrumbs-container';
+/**
+ * The class name for the inner wrapper that hugs breadcrumb content.
+ */
+const BREADCRUMB_CONTENT_CLASS = 'jp-BreadCrumbs-content';
+/**
+ * The class name added to the breadcrumb node when in edit mode.
+ */
+const BREADCRUMB_EDIT_MODE_CLASS = 'jp-mod-editMode';
 /**
  * A class which hosts folder breadcrumbs.
  */
@@ -55,21 +68,31 @@ export class BreadCrumbs extends Widget {
         this._previousState = null;
         this._cachedWidths = null;
         this._lastRenderedWidth = 0;
+        this._isEditMode = false;
+        this._lastPath = '';
+        /**
+         * After `cd()` rebuilds the trail, restore focus to the current-directory segment.
+         */
+        this._restoreBreadcrumbFocusAfterUpdate = false;
         this.translator = options.translator || nullTranslator;
         this._trans = this.translator.load('jupyterlab');
         this._model = options.model;
         this._fullPath = options.fullPath || false;
         this._minimumLeftItems = (_a = options.minimumLeftItems) !== null && _a !== void 0 ? _a : 0;
         this._minimumRightItems = (_b = options.minimumRightItems) !== null && _b !== void 0 ? _b : 2;
+        this._onPathEdited = options.onPathEdited;
+        this._onPathActivated = options.onPathActivated;
         this.addClass(BREADCRUMB_CLASS);
         this._crumbs = Private.createCrumbs();
         const hasPreferred = PageConfig.getOption('preferredPath');
         this._hasPreferred = hasPreferred && hasPreferred !== '/' ? true : false;
-        if (this._hasPreferred) {
-            this.node.appendChild(this._crumbs[Private.Crumb.Preferred]);
-        }
-        this.node.appendChild(this._crumbs[Private.Crumb.Home]);
-        this._model.refreshed.connect(this.update, this);
+        this._crumbContainer = document.createElement('span');
+        this._crumbContainer.className = BREADCRUMB_CONTAINER_CLASS;
+        this._crumbContent = document.createElement('span');
+        this._crumbContent.className = BREADCRUMB_CONTENT_CLASS;
+        this._crumbContainer.appendChild(this._crumbContent);
+        this.node.appendChild(this._crumbContainer);
+        this._model.refreshed.connect(this._onModelRefreshed, this);
         this._resizeThrottler = new Throttler(() => this._onResize(), 50);
         this._resizeObserver = new ResizeObserver(entries => {
             const entry = entries[0];
@@ -84,6 +107,11 @@ export class BreadCrumbs extends Widget {
                 void this._resizeThrottler.invoke();
             }
         });
+        this._pathNavigator = new PathNavigator({
+            model: this._model,
+            translator: options.translator
+        });
+        this._pathNavigator.closed.connect(this._exitEditMode, this);
     }
     /**
      * Handle the DOM events for the bread crumbs.
@@ -97,6 +125,9 @@ export class BreadCrumbs extends Widget {
      */
     handleEvent(event) {
         switch (event.type) {
+            case 'keydown':
+                this._evtKeyDown(event);
+                break;
             case 'click':
                 this._evtClick(event);
                 break;
@@ -150,6 +181,9 @@ export class BreadCrumbs extends Widget {
         if (this.isDisposed) {
             return;
         }
+        this._model.refreshed.disconnect(this._onModelRefreshed, this);
+        this._pathNavigator.closed.disconnect(this._exitEditMode, this);
+        this._pathNavigator.dispose();
         this._resizeObserver.disconnect();
         this._resizeThrottler.dispose();
         super.dispose();
@@ -161,19 +195,23 @@ export class BreadCrumbs extends Widget {
         super.onAfterAttach(msg);
         this.update();
         const node = this.node;
+        node.addEventListener('keydown', this);
         node.addEventListener('click', this);
         node.addEventListener('lm-dragenter', this);
         node.addEventListener('lm-dragleave', this);
         node.addEventListener('lm-dragover', this);
         this._resizeObserver.observe(node);
         node.addEventListener('lm-drop', this);
+        Widget.attach(this._pathNavigator, this.node);
     }
     /**
      * A message handler invoked on a `'before-detach'` message.
      */
     onBeforeDetach(msg) {
+        Widget.detach(this._pathNavigator);
         super.onBeforeDetach(msg);
         const node = this.node;
+        node.removeEventListener('keydown', this);
         node.removeEventListener('click', this);
         node.removeEventListener('lm-dragenter', this);
         node.removeEventListener('lm-dragleave', this);
@@ -185,9 +223,18 @@ export class BreadCrumbs extends Widget {
      * A handler invoked on an `'update-request'` message.
      */
     onUpdateRequest(msg) {
+        if (this._isEditMode) {
+            // In edit mode the CSS class hides breadcrumb content,
+            // we do not need to refresh, as only the pathnavigator is visible.
+            return;
+        }
         // Update the breadcrumb list.
         const contents = this._model.manager.services.contents;
         const localPath = contents.localPath(this._model.path);
+        // We track the path on which we are;
+        // this is to make sure we don't exit edit mode on model refresh if
+        // the path has not changed.
+        this._lastPath = localPath;
         // Invalidate cached widths if the path changed
         if (this._previousState && this._previousState.path !== localPath) {
             this._cachedWidths = null;
@@ -196,16 +243,191 @@ export class BreadCrumbs extends Widget {
         const adaptiveItems = this._calculateAdaptiveItems(localPath);
         const state = {
             path: localPath,
+            root: this._model.root,
             hasPreferred: this._hasPreferred,
             fullPath: this._fullPath,
             minimumLeftItems: adaptiveItems.left,
             minimumRightItems: adaptiveItems.right
         };
-        if (this._previousState && JSONExt.deepEqual(state, this._previousState)) {
+        const stateUnchanged = this._previousState !== null &&
+            JSONExt.deepEqual(state, this._previousState);
+        if (!stateUnchanged) {
+            this._previousState = state;
+            Private.updateCrumbs(this._crumbContent, this._crumbs, state);
+            this._syncCrumbTabIndices();
+        }
+        this._runPostActivationFocus();
+    }
+    /**
+     * Restore crumb focus after breadcrumb activation and invoke activation callback.
+     */
+    _runPostActivationFocus() {
+        if (!this._restoreBreadcrumbFocusAfterUpdate) {
+            return;
+        }
+        this._restoreBreadcrumbFocusAfterUpdate = false;
+        requestAnimationFrame(() => {
+            var _a;
+            if (this.isDisposed || this._isEditMode) {
+                return;
+            }
+            (_a = this._onPathActivated) === null || _a === void 0 ? void 0 : _a.call(this);
+        });
+    }
+    /**
+     * Return breadcrumb segments in DOM order that participate in arrow-key focus.
+     */
+    _getFocusableCrumbElements() {
+        const result = [];
+        const children = this._crumbContent.children;
+        for (let i = 0; i < children.length; i++) {
+            const el = children[i];
+            if (el.classList.contains(BREADCRUMB_PREFERRED_CLASS) ||
+                el.classList.contains(BREADCRUMB_ROOT_CLASS) ||
+                el.classList.contains(BREADCRUMB_ITEM_CLASS)) {
+                result.push(el);
+            }
+        }
+        return result;
+    }
+    /**
+     * Roving tabindex: one segment is in tab order (`tabIndex` 0), the rest -1.
+     */
+    _syncCrumbTabIndices() {
+        const items = this._getFocusableCrumbElements();
+        for (let i = 0; i < items.length; i++) {
+            items[i].tabIndex = i === 0 ? 0 : -1;
+        }
+    }
+    /**
+     * Focus a crumb segment and make it the sole tab stop within the trail.
+     */
+    _focusCrumb(crumb) {
+        const items = this._getFocusableCrumbElements();
+        const idx = items.indexOf(crumb);
+        if (idx === -1) {
+            return;
+        }
+        for (let i = 0; i < items.length; i++) {
+            items[i].tabIndex = i === idx ? 0 : -1;
+        }
+        crumb.focus();
+    }
+    /**
+     * Focus the last segment in the trail (the current directory), for keyboard UX after navigation.
+     */
+    _focusTrailingCrumb() {
+        const items = this._getFocusableCrumbElements();
+        if (items.length === 0) {
+            // If there is no focusable crumb segment (e.g. root-restricted path),
+            // keep focus inside the breadcrumb widget itself.
+            this.node.tabIndex = -1;
+            this.node.focus();
+            return;
+        }
+        this._focusCrumb(items[items.length - 1]);
+    }
+    /**
+     * Walk from an event target to the nearest breadcrumb segment host, if any.
+     */
+    _resolveCrumbFromEventTarget(target) {
+        let node = target;
+        while (node && node !== this.node) {
+            if (node.classList.contains(BREADCRUMB_PREFERRED_CLASS) ||
+                node.classList.contains(BREADCRUMB_ROOT_CLASS) ||
+                node.classList.contains(BREADCRUMB_ITEM_CLASS)) {
+                return node;
+            }
+            node = node.parentElement;
+        }
+        return null;
+    }
+    /**
+     * Whether a crumb corresponds to the current directory segment.
+     */
+    _isCurrentDirectoryCrumb(crumb) {
+        if (!crumb.classList.contains(BREADCRUMB_ITEM_CLASS) ||
+            crumb.classList.contains(BREADCRUMB_ELLIPSIS_CLASS)) {
+            return false;
+        }
+        const contents = this._model.manager.services.contents;
+        const localPath = contents.localPath(this._model.path);
+        return crumb.dataset.path === localPath;
+    }
+    /**
+     * Navigate to the directory represented by a breadcrumb segment.
+     */
+    _activateCrumbSegment(crumb) {
+        this._focusCrumb(crumb);
+        const destination = this._destinationForCrumb(crumb);
+        if (!destination) {
+            return;
+        }
+        this._restoreBreadcrumbFocusAfterUpdate = true;
+        this._model.cd(destination).catch(error => {
+            this._restoreBreadcrumbFocusAfterUpdate = false;
+            void showErrorMessage(this._trans.__('Open Error'), error);
+        });
+    }
+    /**
+     * Resolve the destination path for an activated breadcrumb segment.
+     */
+    _destinationForCrumb(crumb) {
+        if (crumb.classList.contains(BREADCRUMB_PREFERRED_CLASS)) {
+            const preferredPath = PageConfig.getOption('preferredPath');
+            return preferredPath ? '/' + preferredPath : '/';
+        }
+        if (crumb.classList.contains(BREADCRUMB_ROOT_CLASS)) {
+            return '/';
+        }
+        if (crumb.classList.contains(BREADCRUMB_ITEM_CLASS)) {
+            return `/${crumb.dataset.path}`;
+        }
+        return null;
+    }
+    /**
+     * Handle the `'keydown'` event for the widget.
+     */
+    _evtKeyDown(event) {
+        if (this._isEditMode) {
             return;
         }
-        this._previousState = state;
-        Private.updateCrumbs(this._crumbs, state);
+        const isActivateKey = event.key === 'Enter' || event.key === ' ';
+        const crumb = this._resolveCrumbFromEventTarget(event.target);
+        const localPath = this._model.manager.services.contents.localPath(this._model.path);
+        if (isActivateKey && crumb && this._crumbContent.contains(crumb)) {
+            const enterEditModeFromRoot = event.key === ' ' &&
+                crumb.classList.contains(BREADCRUMB_ROOT_CLASS) &&
+                localPath === '';
+            if (this._isCurrentDirectoryCrumb(crumb) || enterEditModeFromRoot) {
+                this.enterEditMode();
+            }
+            else {
+                this._activateCrumbSegment(crumb);
+            }
+            event.preventDefault();
+            event.stopPropagation();
+            return;
+        }
+        if (event.key !== 'ArrowLeft' && event.key !== 'ArrowRight') {
+            return;
+        }
+        if (!crumb || !this._crumbContent.contains(crumb)) {
+            return;
+        }
+        const items = this._getFocusableCrumbElements();
+        const idx = items.indexOf(crumb);
+        if (idx === -1) {
+            return;
+        }
+        const delta = event.key === 'ArrowLeft' ? -1 : 1;
+        const nextIdx = idx + delta;
+        if (nextIdx < 0 || nextIdx >= items.length) {
+            return;
+        }
+        this._focusCrumb(items[nextIdx]);
+        event.preventDefault();
+        event.stopPropagation();
     }
     /**
      * Handle the `'click'` event for the widget.
@@ -215,34 +437,17 @@ export class BreadCrumbs extends Widget {
         if (event.button !== 0) {
             return;
         }
+        // In edit mode the PathNavigator owns all interaction.
+        if (this._isEditMode) {
+            return;
+        }
         // Find a valid click target.
         let node = event.target;
         while (node && node !== this.node) {
-            if (node.classList.contains(BREADCRUMB_PREFERRED_CLASS)) {
-                const preferredPath = PageConfig.getOption('preferredPath');
-                const path = preferredPath ? '/' + preferredPath : preferredPath;
-                this._model
-                    .cd(path)
-                    .catch(error => showErrorMessage(this._trans.__('Open Error'), error));
-                // Stop the event propagation.
-                event.preventDefault();
-                event.stopPropagation();
-                return;
-            }
-            if (node.classList.contains(BREADCRUMB_ITEM_CLASS) ||
+            if (node.classList.contains(BREADCRUMB_PREFERRED_CLASS) ||
+                node.classList.contains(BREADCRUMB_ITEM_CLASS) ||
                 node.classList.contains(BREADCRUMB_ROOT_CLASS)) {
-                let destination;
-                if (node.classList.contains(BREADCRUMB_ROOT_CLASS)) {
-                    destination = '/';
-                }
-                else {
-                    destination = `/${node.dataset.path}`;
-                }
-                if (destination) {
-                    this._model
-                        .cd(destination)
-                        .catch(error => showErrorMessage(this._trans.__('Open Error'), error));
-                }
+                this._activateCrumbSegment(node);
                 // Stop the event propagation.
                 event.preventDefault();
                 event.stopPropagation();
@@ -250,6 +455,10 @@ export class BreadCrumbs extends Widget {
             }
             node = node.parentElement;
         }
+        // Click landed on the breadcrumb background (including separators
+        // between crumb items) — enter edit mode.  This is intentional: the
+        // entire breadcrumb bar acts as a click target for the path editor.
+        this.enterEditMode();
     }
     /**
      * Handle the `'lm-dragenter'` event for the widget.
@@ -369,7 +578,7 @@ export class BreadCrumbs extends Widget {
      */
     _getBreadcrumbElements() {
         const elements = [];
-        const children = this.node.children;
+        const children = this._crumbContent.children;
         for (let i = 0; i < children.length; i++) {
             const child = children[i];
             if ((child.classList.contains(BREADCRUMB_ITEM_CLASS) ||
@@ -398,7 +607,7 @@ export class BreadCrumbs extends Widget {
      * including those currently hidden behind the ellipsis.
      */
     _measureAllItemWidths(parts) {
-        const node = this.node;
+        const node = this._crumbContent;
         // Measure fixed elements that are already in the DOM
         const home = this._crumbs[Private.Crumb.Home];
         const ellipsis = this._crumbs[Private.Crumb.Ellipsis];
@@ -472,7 +681,7 @@ export class BreadCrumbs extends Widget {
         // Calculate available space for items
         let fixedOverhead = homeWidth + separatorWidth;
         if (this._hasPreferred) {
-            fixedOverhead += preferredWidth + separatorWidth;
+            fixedOverhead += preferredWidth;
         }
         const availableForItems = containerWidth - fixedOverhead;
         // Check if all parts can fit without ellipsis
@@ -524,6 +733,63 @@ export class BreadCrumbs extends Widget {
             right: finalRight
         };
     }
+    /**
+     * Enter edit mode: show the path input and hide the breadcrumb content.
+     */
+    enterEditMode() {
+        this._isEditMode = true;
+        // Snapshot the current path so _onModelRefreshed can reliably detect
+        // whether the path actually changed while in edit mode.
+        const contents = this._model.manager.services.contents;
+        this._lastPath = contents.localPath(this._model.path);
+        this.node.classList.add(BREADCRUMB_EDIT_MODE_CLASS);
+        // Clear cached state so that when we exit edit mode, onUpdateRequest
+        // will unconditionally re-render the breadcrumbs (the path may have
+        // changed while we were editing).  _exitEditMode also clears this for
+        // the same reason — the double-null is intentional even if technically
+        // unnecessary.
+        this._previousState = null;
+        this._pathNavigator.open();
+    }
+    /**
+     * Move focus to the trailing breadcrumb segment.
+     */
+    focusLastCrumb() {
+        // Defer to ensure any pending breadcrumb DOM updates are applied.
+        requestAnimationFrame(() => {
+            this._focusTrailingCrumb();
+        });
+    }
+    /**
+     * Exit edit mode and restore the breadcrumb display.
+     */
+    _exitEditMode() {
+        if (!this._isEditMode) {
+            return;
+        }
+        this._isEditMode = false;
+        this.node.classList.remove(BREADCRUMB_EDIT_MODE_CLASS);
+        this._previousState = null;
+        this.update();
+    }
+    /**
+     * Handle the model's `refreshed` signal.
+     * If we are in edit mode, dismiss it (the model path may have changed).
+     */
+    _onModelRefreshed() {
+        var _a;
+        const contents = this._model.manager.services.contents;
+        const localPath = contents.localPath(this._model.path);
+        if (this._isEditMode) {
+            if (this._pathNavigator.matchesSubmittedPath(localPath) ||
+                localPath !== this._lastPath) {
+                this._exitEditMode();
+                (_a = this._onPathEdited) === null || _a === void 0 ? void 0 : _a.call(this);
+            }
+            return;
+        }
+        this.update();
+    }
 }
 /**
  * The namespace for the crumbs private data.
@@ -540,73 +806,84 @@ var Private;
         Crumb[Crumb["Preferred"] = 2] = "Preferred";
     })(Crumb = Private.Crumb || (Private.Crumb = {}));
     /**
-     * Populate the breadcrumb node.
+     * Populate the breadcrumb container node.
+     *
+     * @param container - The container element that holds breadcrumb items.
+     * @param breadcrumbs - The reusable breadcrumb elements (Home, Ellipsis, Preferred).
+     * @param state - The current breadcrumb state.
      */
-    function updateCrumbs(breadcrumbs, state) {
-        const node = breadcrumbs[0].parentNode;
-        // Remove all but the home or preferred node.
-        const firstChild = node.firstChild;
-        while (firstChild && firstChild.nextSibling) {
-            node.removeChild(firstChild.nextSibling);
-        }
-        if (state.hasPreferred) {
-            node.appendChild(breadcrumbs[Crumb.Home]);
-            node.appendChild(createCrumbSeparator());
+    function updateCrumbs(container, breadcrumbs, state) {
+        const nodes = [];
+        // Calculate the starting index for breadcrumbs based on root restriction
+        const rootParts = state.root
+            ? state.root.split('/').filter(part => part !== '')
+            : [];
+        const rootDepth = rootParts.length;
+        // Only show home/preferred if there's no root restriction
+        if (!state.root) {
+            if (state.hasPreferred) {
+                nodes.push(breadcrumbs[Private.Crumb.Preferred]);
+            }
+            nodes.push(breadcrumbs[Crumb.Home], createCrumbSeparator());
         }
         else {
-            node.appendChild(createCrumbSeparator());
+            // With root restriction, just add an initial separator
+            nodes.push(createCrumbSeparator());
         }
         const parts = state.path.split('/').filter(part => part !== '');
-        if (!state.fullPath && parts.length > 0) {
+        // Filter parts to only show those at or below the root
+        const visibleParts = state.root ? parts.slice(rootDepth) : parts;
+        const visibleStartIndex = rootDepth;
+        if (!state.fullPath && visibleParts.length > 0) {
             const minimumLeftItems = state.minimumLeftItems;
             const minimumRightItems = state.minimumRightItems;
-            // Check if we need ellipsis
-            if (parts.length > minimumLeftItems + minimumRightItems) {
+            // Check if we need ellipsis (based on visible parts)
+            if (visibleParts.length > minimumLeftItems + minimumRightItems) {
                 // Add left items
                 for (let i = 0; i < minimumLeftItems; i++) {
-                    const elemPath = parts.slice(0, i + 1).join('/');
-                    const elem = createBreadcrumbElement(parts[i], elemPath);
-                    node.appendChild(elem);
-                    node.appendChild(createCrumbSeparator());
+                    const fullIndex = visibleStartIndex + i;
+                    const elemPath = parts.slice(0, fullIndex + 1).join('/');
+                    nodes.push(createBreadcrumbElement(visibleParts[i], elemPath));
+                    nodes.push(createCrumbSeparator());
                 }
                 // Add ellipsis
-                node.appendChild(breadcrumbs[Crumb.Ellipsis]);
                 const hiddenStartIndex = minimumLeftItems;
-                const hiddenEndIndex = parts.length - minimumRightItems;
-                const hiddenParts = parts.slice(hiddenStartIndex, hiddenEndIndex);
-                const hiddenFolders = hiddenParts.join('/');
-                const hiddenPath = hiddenParts.length > 0
-                    ? parts.slice(0, hiddenEndIndex).join('/')
-                    : parts.slice(0, minimumLeftItems).join('/');
-                breadcrumbs[Crumb.Ellipsis].title = hiddenFolders;
-                breadcrumbs[Crumb.Ellipsis].dataset.path = hiddenPath;
-                node.appendChild(createCrumbSeparator());
+                const hiddenEndIndex = visibleParts.length - minimumRightItems;
+                const hiddenVisibleParts = visibleParts.slice(hiddenStartIndex, hiddenEndIndex);
+                const ellipsis = breadcrumbs[Crumb.Ellipsis];
+                ellipsis.title = hiddenVisibleParts.join('/');
+                ellipsis.dataset.path =
+                    hiddenVisibleParts.length > 0
+                        ? parts.slice(0, visibleStartIndex + hiddenEndIndex).join('/')
+                        : parts.slice(0, visibleStartIndex + minimumLeftItems).join('/');
+                nodes.push(ellipsis, createCrumbSeparator());
                 // Add right items
-                const rightStartIndex = parts.length - minimumRightItems;
-                for (let i = rightStartIndex; i < parts.length; i++) {
-                    const elemPath = parts.slice(0, i + 1).join('/');
-                    const elem = createBreadcrumbElement(parts[i], elemPath);
-                    node.appendChild(elem);
-                    node.appendChild(createCrumbSeparator());
+                const rightStartIndex = visibleParts.length - minimumRightItems;
+                for (let i = rightStartIndex; i < visibleParts.length; i++) {
+                    const fullIndex = visibleStartIndex + i;
+                    const elemPath = parts.slice(0, fullIndex + 1).join('/');
+                    nodes.push(createBreadcrumbElement(visibleParts[i], elemPath));
+                    nodes.push(createCrumbSeparator());
                 }
             }
             else {
-                for (let i = 0; i < parts.length; i++) {
-                    const elemPath = parts.slice(0, i + 1).join('/');
-                    const elem = createBreadcrumbElement(parts[i], elemPath);
-                    node.appendChild(elem);
-                    node.appendChild(createCrumbSeparator());
+                for (let i = 0; i < visibleParts.length; i++) {
+                    const fullIndex = visibleStartIndex + i;
+                    const elemPath = parts.slice(0, fullIndex + 1).join('/');
+                    nodes.push(createBreadcrumbElement(visibleParts[i], elemPath));
+                    nodes.push(createCrumbSeparator());
                 }
             }
         }
-        else if (state.fullPath && parts.length > 0) {
-            for (let i = 0; i < parts.length; i++) {
-                const elemPath = parts.slice(0, i + 1).join('/');
-                const elem = createBreadcrumbElement(parts[i], elemPath);
-                node.appendChild(elem);
-                node.appendChild(createCrumbSeparator());
+        else if (state.fullPath && visibleParts.length > 0) {
+            for (let i = 0; i < visibleParts.length; i++) {
+                const fullIndex = visibleStartIndex + i;
+                const elemPath = parts.slice(0, fullIndex + 1).join('/');
+                nodes.push(createBreadcrumbElement(visibleParts[i], elemPath));
+                nodes.push(createCrumbSeparator());
             }
         }
+        container.replaceChildren(...nodes);
     }
     Private.updateCrumbs = updateCrumbs;
     /**
@@ -618,6 +895,7 @@ var Private;
         elem.textContent = pathPart;
         elem.title = fullPath;
         elem.dataset.path = fullPath;
+        elem.tabIndex = -1;
         return elem;
     }
     /**
@@ -631,11 +909,13 @@ var Private;
             stylesheet: 'breadCrumb'
         });
         home.dataset.path = '/';
+        home.tabIndex = -1;
         const ellipsis = ellipsesIcon.element({
             className: `${BREADCRUMB_ITEM_CLASS} ${BREADCRUMB_ELLIPSIS_CLASS}`,
             tag: 'span',
             stylesheet: 'breadCrumb'
         });
+        ellipsis.tabIndex = -1;
         const preferredPath = PageConfig.getOption('preferredPath');
         const path = preferredPath ? '/' + preferredPath : preferredPath;
         const preferred = preferredIcon.element({
@@ -645,6 +925,7 @@ var Private;
             stylesheet: 'breadCrumb'
         });
         preferred.dataset.path = path || '/';
+        preferred.tabIndex = -1;
         return [home, ellipsis, preferred];
     }
     Private.createCrumbs = createCrumbs;