@@ -67,6 +67,13 @@ export interface MenuItemControllerConfig {
67
67
* A function that returns the headline element of the menu item.
68
68
*/
69
69
getHeadlineElements : ( ) => HTMLElement [ ] ;
70
+
71
+ /**
72
+ * The HTML Element that accepts user interactions like click. Used for
73
+ * occasions like programmatically clicking anchor tags when `Enter` is
74
+ * pressed.
75
+ */
76
+ getInteractiveElement : ( ) => HTMLElement | null ;
70
77
}
71
78
72
79
/**
@@ -77,6 +84,8 @@ export class MenuItemController implements ReactiveController {
77
84
private internalTypeaheadText : string | null = null ;
78
85
private readonly getHeadlineElements :
79
86
MenuItemControllerConfig [ 'getHeadlineElements' ] ;
87
+ private readonly getInteractiveElement :
88
+ MenuItemControllerConfig [ 'getInteractiveElement' ] ;
80
89
81
90
/**
82
91
* @param host The MenuItem in which to attach this controller to.
@@ -87,8 +96,10 @@ export class MenuItemController implements ReactiveController {
87
96
config : MenuItemControllerConfig ) {
88
97
const {
89
98
getHeadlineElements,
99
+ getInteractiveElement,
90
100
} = config ;
91
101
this . getHeadlineElements = getHeadlineElements ;
102
+ this . getInteractiveElement = getInteractiveElement ;
92
103
this . host . addController ( this ) ;
93
104
}
94
105
@@ -164,6 +175,14 @@ export class MenuItemController implements ReactiveController {
164
175
* menu.
165
176
*/
166
177
onKeydown = ( event : KeyboardEvent ) => {
178
+ // Check if the interactive element is an anchor tag. If so, click it.
179
+ if ( this . host . href && event . code === 'Enter' ) {
180
+ const interactiveElement = this . getInteractiveElement ( ) ;
181
+ if ( interactiveElement instanceof HTMLAnchorElement ) {
182
+ interactiveElement . click ( ) ;
183
+ }
184
+ }
185
+
167
186
if ( this . host . keepOpen || event . defaultPrevented ) return ;
168
187
const keyCode = event . code ;
169
188
0 commit comments