fix: skip items without path in breadcrumbs overlay keyboard navigation (#11925)

Author: web-padawan

packages/breadcrumbs/spec/web-component-spec.md

@@ -196,8 +196,8 @@ Internal behavior:
 - **Light-DOM projection via `slot="overlay"`.** Rather than an `OverlayMixin` `.renderer` callback or a `_rendererRoot` override, collapsed items are projected through the overlay's default slot while staying in the breadcrumbs' light DOM (see "Overlay management" above). This keeps `<vaadin-breadcrumbs-overlay>` free of rendering plumbing and lets global page CSS reach the links.
 - **Inherited overlay behavior.** Top-layer rendering, outside-click and Escape closing, focus restoration, and stacking all come from `OverlayMixin`; positioning relative to the overflow button is driven by the `positionTarget` property from `PositionMixin`, matching `<vaadin-combo-box-overlay>` and `<vaadin-avatar-group-overlay>`. None of these are re-implemented here.
 - **Keyboard interaction within the open overlay.**
-  - **Focus on open** — focus stays on the overflow button when the overlay opens (via overflow-button click, Enter, or Space). The first ArrowDown / ArrowUp keypress while the overlay is open moves focus into the overlay: ArrowDown lands on the first non-disabled overlay item, ArrowUp lands on the last non-disabled overlay item.
-  - **Arrow keys** — once focus is inside the overlay, Up/Down arrows move focus between adjacent links (Home/End jump to first/last). Disabled items are skipped — arrow keys, Home, and End land on the nearest non-disabled item in the requested direction. The overlay reads as a menu visually, so menu-style keyboard navigation is the primary way to traverse its items.
+  - **Focus on open** — focus stays on the overflow button when the overlay opens (via overflow-button click, Enter, or Space). The first ArrowDown / ArrowUp keypress while the overlay is open moves focus into the overlay: ArrowDown lands on the first focusable overlay item, ArrowUp lands on the last focusable overlay item. Disabled items and items without a `path` are not focusable.
+  - **Arrow keys** — once focus is inside the overlay, Up/Down arrows move focus between adjacent links (Home/End jump to first/last). Non-focusable items — disabled items and items without a `path` — are skipped: arrow keys, Home, and End land on the nearest focusable item in the requested direction. The overlay reads as a menu visually, so menu-style keyboard navigation is the primary way to traverse its items.
   - **Tab / Shift+Tab** — closes the overlay. `restore-focus-on-close` returns focus to the overflow button, from which the native Tab / Shift+Tab traversal then moves focus to the next / previous focusable trail item in document order.
   - **Escape** — closes the overlay and returns focus to the overflow button.
 
@@ -275,6 +275,10 @@ For consistency with the other Vaadin overlay-with-overflow component, `<vaadin-
 
 Arrow / Home / End navigation in the overflow overlay is implemented via `KeyboardDirectionMixin` from `@vaadin/a11y-base`, the same primitive that powers `<vaadin-context-menu-list-box>`, `<vaadin-menu-bar>`, and `<vaadin-accordion>`. The mixin's `_isItemFocusable(item)` defaults to `!item.hasAttribute('disabled')` and is honored by every focus-moving keystroke, so disabled items are skipped uniformly. The alternative — letting focus land on a disabled item — would conflict with the inner link's `tabindex="-1"`, the host's `aria-disabled="true"`, and the suppressed click contract, and would diverge from the menu-style navigation users encounter everywhere else in the library.
 
+**Q: Why does arrow-key navigation also skip overlay items without a `path`?**
+
+An item without a `path` renders as a `<span part="nolink">` rather than an `<a part="link">` — there is no focusable element inside it. Letting the arrow keys land on such an item would either trap focus on a non-interactive node or silently no-op the keystroke, both of which break the menu-style navigation contract. `<vaadin-breadcrumbs>` therefore overrides `_isItemFocusable` to treat items where `path == null` as non-focusable, so arrow / Home / End navigation skips them the same way it skips disabled items.
+
 **Q: Why does the overflow overlay not move focus to the first item when it opens?**
 
 To keep pointer-driven opens from showing a focus outline on an overlay item the user did not request. Auto-focusing the first item on open meant a click on the overflow button immediately drew a focus ring around the first overlay link, then forced ArrowDown to land on the *second* item rather than the first — both surprising. The chosen behavior matches `<vaadin-menu-bar>`: clicking the trigger opens the overlay with focus still on the trigger button, and the first ArrowDown / ArrowUp keystroke is what hands focus to an item (ArrowDown to the first focusable, ArrowUp to the last). Keyboard users press Enter/Space to open and then their first arrow key reaches the expected item; pointer users see no premature focus ring; assistive tech still associates the open overlay with the trigger via `aria-expanded` and `aria-haspopup`.

packages/breadcrumbs/src/vaadin-breadcrumbs.js

@@ -355,6 +355,20 @@ class Breadcrumbs extends KeyboardDirectionMixin(
     return [...this.querySelectorAll('vaadin-breadcrumbs-item[slot="overlay"]')];
   }
 
+  /**
+   * Override the method inherited from `KeyboardDirectionMixin` to also
+   * skip overlay items that have no `path` and therefore render as a
+   * non-interactive `<span>` instead of a focusable link.
+   *
+   * @param {Element} item
+   * @return {boolean}
+   * @protected
+   * @override
+   */
+  _isItemFocusable(item) {
+    return super._isItemFocusable(item) && item.path != null;
+  }
+
   /**
    * Override the method inherited from `KeyboardDirectionMixin` to make
    * `breadcrumbs.focus()` lands on the root item. When the root item is

packages/breadcrumbs/test/overflow.test.js

@@ -429,6 +429,101 @@ describe('overflow', () => {
     });
   });
 
+  describe('non-link items', () => {
+    beforeEach(async () => {
+      // Collapse all items to the overlay
+      breadcrumbs.style.maxWidth = '200px';
+      await nextResize(breadcrumbs);
+    });
+
+    it('should skip the first item without path on first ArrowDown', async () => {
+      items[0].path = null;
+
+      button.focus();
+      button.click();
+      await oneEvent(overlay, 'vaadin-overlay-open');
+
+      await sendKeys({ press: 'ArrowDown' });
+      await nextRender();
+
+      expectFocusedItem(items[1]);
+    });
+
+    it('should skip the last item without path on first ArrowUp', async () => {
+      items[4].path = null;
+
+      button.focus();
+      button.click();
+      await oneEvent(overlay, 'vaadin-overlay-open');
+
+      await sendKeys({ press: 'ArrowUp' });
+      await nextRender();
+
+      expectFocusedItem(items[3]);
+    });
+
+    it('should skip item without path on subsequent ArrowDown', async () => {
+      items[1].path = null;
+
+      button.focus();
+      button.click();
+      await oneEvent(overlay, 'vaadin-overlay-open');
+
+      await sendKeys({ press: 'ArrowDown' });
+      await nextRender();
+
+      await sendKeys({ press: 'ArrowDown' });
+      await nextRender();
+
+      expectFocusedItem(items[2]);
+    });
+
+    it('should skip item without path on subsequent ArrowUp', async () => {
+      items[3].path = null;
+
+      button.focus();
+      button.click();
+      await oneEvent(overlay, 'vaadin-overlay-open');
+
+      await sendKeys({ press: 'End' });
+      await nextRender();
+
+      await sendKeys({ press: 'ArrowUp' });
+      await nextRender();
+
+      expectFocusedItem(items[2]);
+    });
+
+    it('should focus the previous focusable item on End when last has no path', async () => {
+      items[4].path = null;
+
+      button.focus();
+      button.click();
+      await oneEvent(overlay, 'vaadin-overlay-open');
+
+      await sendKeys({ press: 'End' });
+      await nextRender();
+
+      expectFocusedItem(items[3]);
+    });
+
+    it('should focus the next focusable item on Home when first has no path', async () => {
+      items[0].path = null;
+
+      button.focus();
+      button.click();
+      await oneEvent(overlay, 'vaadin-overlay-open');
+
+      await sendKeys({ press: 'End' });
+      await nextRender();
+
+      await sendKeys({ press: 'Home' });
+      await nextRender();
+
+      expectFocusedItem(items[1]);
+    });
+  });
+
   describe('focus()', () => {
     it('should focus the overflow button when the root item is disabled', async () => {
       breadcrumbs.style.maxWidth = '600px';