tabindex on button within MatMenu in angular not working

Question

I am using material in my angular 17 project. I want to add ADA compliance in my project and for that adding tabindex wherever necessary.

Problem i am facing is, i have button in mat menu and tabindex="0" is not putting focus on button within MatMenu. Below is my code. Please let me know how can i add focus on button within MatMenu.

.ts

import { MatMenuTrigger } from '@angular/material/menu';

@ViewChild(MatMenuTrigger) menuTrigger!: MatMenuTrigger;

openMenu(event:Event):void{
    event.preventDefault();
    this.menuTrigger.openMenu();
  }

.html

<div tabindex="0" [matMenuTriggerFor]="menu" (keydown.enter)="openMenu($event)">OPEN DIV</div>

<mat-menu #menu="matMenu" class="menu-popover">    
    <div class="popover-text">Are you sure you want to edit this?</div>
    Test Menu
    <button tabindex="0">Close</button>
  </mat-menu>

Answer 1

I think we are missing the directive for the button mat-menu-item, working example below!

<button
  mat-button
  [matMenuTriggerFor]="menu"
  (keydown.enter)="openMenu($event);button.focus();"
  (keydown.tab)="$event.stopPropagation();"
  (menuOpened)="button.focus();"
>
  Menu
</button>
<!-- #enddocregion mat-menu-trigger-for -->
<mat-menu #menu="matMenu" tabindex="0">
  <button mat-menu-item tabindex="0" #button (keydown)="buttonKeyDown($event)">
    Item 1
  </button>
  <button mat-menu-item tabindex="0" (keydown)="buttonKeyDown($event)">
    Item 2
  </button>
</mat-menu>

Stackblitz Demo