diff --git a/packages/breadcrumbs/src/BreadcrumbItem.ts b/packages/breadcrumbs/src/BreadcrumbItem.ts index c4d979d04a..1850931135 100644 --- 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` 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(html` + { + changeSpy(event.detail.value); + }} + > + ${getBreadcrumbs(4)} + + `); + + 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'); + }); });