diff --git a/menu/internal/controllers/menuItemController.ts b/menu/internal/controllers/menuItemController.ts index baa412e772c..9449c2f597d 100644 --- a/menu/internal/controllers/menuItemController.ts +++ b/menu/internal/controllers/menuItemController.ts @@ -67,6 +67,13 @@ export interface MenuItemControllerConfig { * A function that returns the headline element of the menu item. */ getHeadlineElements: () => HTMLElement[]; + + /** + * The HTML Element that accepts user interactions like click. Used for + * occasions like programmatically clicking anchor tags when `Enter` is + * pressed. + */ + getInteractiveElement: () => HTMLElement | null; } /** @@ -77,6 +84,8 @@ export class MenuItemController implements ReactiveController { private internalTypeaheadText: string|null = null; private readonly getHeadlineElements: MenuItemControllerConfig['getHeadlineElements']; + private readonly getInteractiveElement: + MenuItemControllerConfig['getInteractiveElement']; /** * @param host The MenuItem in which to attach this controller to. @@ -87,8 +96,10 @@ export class MenuItemController implements ReactiveController { config: MenuItemControllerConfig) { const { getHeadlineElements, + getInteractiveElement, } = config; this.getHeadlineElements = getHeadlineElements; + this.getInteractiveElement = getInteractiveElement; this.host.addController(this); } @@ -164,6 +175,14 @@ export class MenuItemController implements ReactiveController { * menu. */ onKeydown = (event: KeyboardEvent) => { + // Check if the interactive element is an anchor tag. If so, click it. + if (this.host.href && event.code === 'Enter') { + const interactiveElement = this.getInteractiveElement(); + if (interactiveElement instanceof HTMLAnchorElement) { + interactiveElement.click(); + } + } + if (this.host.keepOpen || event.defaultPrevented) return; const keyCode = event.code; diff --git a/menu/internal/menuitem/menu-item.ts b/menu/internal/menuitem/menu-item.ts index 107f1a3d1e4..6c5e49702d0 100644 --- a/menu/internal/menuitem/menu-item.ts +++ b/menu/internal/menuitem/menu-item.ts @@ -83,7 +83,8 @@ export class MenuItemEl extends LitElement implements MenuItem { private readonly menuItemController = new MenuItemController(this, { getHeadlineElements: () => { return this.headlineElements; - } + }, + getInteractiveElement: () => this.listItemRoot, }); protected override render() { diff --git a/select/internal/selectoption/select-option.ts b/select/internal/selectoption/select-option.ts index 2ee4b316f3f..7a1299b91f3 100644 --- a/select/internal/selectoption/select-option.ts +++ b/select/internal/selectoption/select-option.ts @@ -91,7 +91,8 @@ export class SelectOptionEl extends LitElement implements SelectOption { private readonly selectOptionController = new SelectOptionController(this, { getHeadlineElements: () => { return this.headlineElements; - } + }, + getInteractiveElement: () => this.listItemRoot, }); protected override render() {