Keyboard accessibility not working in Angular cdk overlay menu

Keyboard accessibility not working in Angular cdk overlay menu

Refs - https://material.angular.io/cdk/overlay/examples

I need to open menu on click a link or button and focus to 1st menu item and on key down or up focus should move to next or previous menu item. e.g. it's working in this example https://material.angular.io/cdk/menu/examples but here on click menu item, menu closed but need to keep menu open on click any menu item. that's why I am using cdk overlay.

Related question - Menu closed on click any menu item but requirement is, if clicked on item menu should open


import {Component} from '@angular/core';
import {OverlayModule} from '@angular/cdk/overlay';

/**
* @title Overlay basic example
*/
@Component({
selector: 'cdk-overlay-basic-example',
templateUrl: './cdk-overlay-basic-example.html',
styleUrl: './cdk-overlay-basic-example.css',
standalone: true,
imports: [OverlayModule],
})
export class CdkOverlayBasicExample {
isOpen = false;
}

.example-list {
width: 100px;
border: solid 1px #ccc;
border-radius: 5px;
background: #fff;
text-align: center;
padding: 10px;
margin: 0;
}

.example-list > li {
list-style-type: none;
border-bottom: solid 1px #8b8b8b;
padding: 8px 0;
}

.example-list > li:last-child {
border-bottom: none;
}

<!-- This button triggers the overlay and is it's origin -->
<button (click)="isOpen = !isOpen" type="button" cdkOverlayOrigin #trigger="cdkOverlayOrigin">
{{isOpen ? "Close" : "Open"}}
</button>

<!-- This template displays the overlay content and is connected to the button -->
<ng-template
cdkConnectedOverlay
[cdkConnectedOverlayOrigin]="trigger"
[cdkConnectedOverlayOpen]="isOpen"
>
<ul class="example-list">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</ng-template>

Continue reading...