fix(breadcrumbs): trigger change event on breadcrumbs via keyboard (#…

…4769) * fix(breadcrumbs): trigger change event on breadcrumbs via keyboard --------- Co-authored-by: rmanole <[email protected]> Co-authored-by: Rajdeep Chandra <[email protected]>
adobe · Sep 25, 2024 · e14d082 · e14d082
1 parent a2b6bea
commit e14d082
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 0 deletions.
diff --git a/packages/breadcrumbs/src/BreadcrumbItem.ts b/packages/breadcrumbs/src/BreadcrumbItem.ts
@@ -82,6 +82,12 @@ 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
@@ -91,6 +97,7 @@ export class BreadcrumbItem extends LikeAnchor(Focusable) {
                 aria-current=${ifDefined(
                     this.isLastOfType ? 'page' : undefined
                 )}
+                @keydown=${this.handleKeyDown}
                 @click=${this.handleClick}
             >
                 <slot></slot>

diff --git 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');
+    });
 });