mat-menu with heading accessibility issue

[Chetan Kumar]

I'm looking to include a heading within a mat-menu using <ul> and <li> tags. However, the screen reader fails to announce the heading. Is there an option to add a header or category within a mat-menu while ensuring screen reader accessibility? It seems that because the focus initially goes to the first mat-menu-item, the screen reader might not announce the header associated with the <ul> and <li> tags. Does anyone have any insights on how to address this issue, particularly with JAWS/NVDA screen reader?

Here is my HTML

<button mat-button [matMenuTriggerFor]="A">Link list</button>

<mat-menu #A="matMenu">

  <h2 role="heading">Heading</h2>

  <ul role="menu">

    <li mat-menu-item><a href="#">Link 1</a></li>

    <li mat-menu-item><a href="#">Link 2</a></li>

    <li mat-menu-item><a href="#">Link 3</a></li>

  </ul>

</mat-menu>

[Aein Bagheri]

Hi

chetan...@gmail.com در تاریخ دوشنبه ۱ آوریل ۲۰۲۴ ساعت ۱۵:۳۳:۰۰ (UTC+3:30) نوشت: