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> I'm seeking to ensure that screen readers can properly announce a list with its heading. However, when using mat-menu, the screen reader only reads the mat-menu-list and not the associated heading. How can I ensure that both the list and its heading are read by the screen reader as expected? Continue reading...
