mat-menu with heading accessibility issue

50 views
Skip to first unread message

Chetan Kumar

unread,
Apr 1, 2024, 8:03:00 AMApr 1
to angular-material2
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>
Reply all
Reply to author
Forward
0 new messages