From 0ca68859c126b3b2d7159b0eb770dca7e0453396 Mon Sep 17 00:00:00 2001
From: rmanole <rmanole@adobe.com>
Date: Wed, 18 Sep 2024 18:09:19 +0300
Subject: [PATCH 1/2] fix(breadcrumbs): trigger change event on breadcrumbs via
 keyboard

---
 packages/breadcrumbs/src/BreadcrumbItem.ts    |  4 ++-
 packages/breadcrumbs/test/breadcrumbs.test.ts | 28 +++++++++++++++++++
 2 files changed, 31 insertions(+), 1 deletion(-)

diff --git a/packages/breadcrumbs/src/BreadcrumbItem.ts b/packages/breadcrumbs/src/BreadcrumbItem.ts
index c4d979d04a..9b01095101 100644
--- a/packages/breadcrumbs/src/BreadcrumbItem.ts
+++ b/packages/breadcrumbs/src/BreadcrumbItem.ts
@@ -86,7 +86,9 @@ export class BreadcrumbItem extends LikeAnchor(Focusable) {
         return html`
             <a
                 id="item-link"
-                href=${ifDefined(!this.isLastOfType ? this.href : undefined)}
+                href=${ifDefined(
+                    !this.isLastOfType ? this.href || '#' : undefined
+                )}
                 tabindex=${0}
                 aria-current=${ifDefined(
                     this.isLastOfType ? 'page' : undefined
diff --git a/packages/breadcrumbs/test/breadcrumbs.test.ts b/packages/breadcrumbs/test/breadcrumbs.test.ts
index 854a863954..1db307c936 100644
--- a/packages/breadcrumbs/test/breadcrumbs.test.ts
+++ b/packages/breadcrumbs/test/breadcrumbs.test.ts
@@ -28,6 +28,7 @@ import { testForLitDevWarnings } from '../../../test/testing-helpers.js';
 
 import '@spectrum-web-components/breadcrumbs/sp-breadcrumbs.js';
 import '@spectrum-web-components/breadcrumbs/sp-breadcrumb-item.js';
+import { sendKeys } from '@web/test-runner-commands';
 
 describe('Breadcrumbs', () => {
     testForLitDevWarnings(
@@ -166,4 +167,31 @@ describe('Breadcrumbs', () => {
         expect(changeSpy).to.have.been.calledOnce;
         expect(changeSpy).to.have.been.calledWith('0');
     });
+
+    it('should emit a change event on Enter keypress', async () => {
+        const changeSpy = spy();
+
+        const el = await fixture<Breadcrumbs>(html`
+            <sp-breadcrumbs
+                @change=${(
+                    event: Event & { detail: BreadcrumbSelectDetail }
+                ) => {
+                    changeSpy(event.detail.value);
+                }}
+            >
+                ${getBreadcrumbs(4)}
+            </sp-breadcrumbs>
+        `);
+
+        await elementUpdated(el);
+
+        // Simulate a click from the visible breadcrumb.
+        const breadcrumbs = el.querySelectorAll('sp-breadcrumb-item');
+
+        breadcrumbs[1].focus();
+        await sendKeys({ press: 'Enter' });
+
+        expect(changeSpy).to.have.been.calledOnce;
+        expect(changeSpy).to.have.been.calledWith('1');
+    });
 });

From 2b01ee75f8e73b2a6c2a2e332a6e744f8c05c365 Mon Sep 17 00:00:00 2001
From: Rajdeep Chandra <rajdeepchandra@Rajdeeps-MacBook-Pro-2.local>
Date: Tue, 24 Sep 2024 21:10:45 +0530
Subject: [PATCH 2/2] chore(breadcrumbs): attached keydown event to the
 breadcrumb link

---
 packages/breadcrumbs/src/BreadcrumbItem.ts | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/packages/breadcrumbs/src/BreadcrumbItem.ts b/packages/breadcrumbs/src/BreadcrumbItem.ts
index 9b01095101..1850931135 100644
--- a/packages/breadcrumbs/src/BreadcrumbItem.ts
+++ b/packages/breadcrumbs/src/BreadcrumbItem.ts
@@ -82,17 +82,22 @@ export class BreadcrumbItem extends LikeAnchor(Focusable) {
         }
     }
 
+    protected handleKeyDown(event: KeyboardEvent): void {
+        if (event.key === 'Enter' || event.keyCode === 13) {
+            this.handleClick(event);
+        }
+    }
+
     protected renderLink(): TemplateResult {
         return html`
             <a
                 id="item-link"
-                href=${ifDefined(
-                    !this.isLastOfType ? this.href || '#' : undefined
-                )}
+                href=${ifDefined(!this.isLastOfType ? this.href : undefined)}
                 tabindex=${0}
                 aria-current=${ifDefined(
                     this.isLastOfType ? 'page' : undefined
                 )}
+                @keydown=${this.handleKeyDown}
                 @click=${this.handleClick}
             >
                 <slot></slot>