The structure of the main navigation is not easily recognizable with a screen reader

[paskal98]

Problem:

• Since list elements are not used to structure the navigation menu, but only links are positioned one after the other, blind users cannot easily identify the beginning and end of the menu.
• Additionally, the hierarchy of menu items and sub-items is not recognizable, as there is no structural representation of the levels in the markup. This makes it difficult for blind users to understand the layout of the application.

Possible solution will be adding ul and li elements with aria attributes for semantic recognition and for more better ux adding information about counting of menu items and sub-items

Expected behaviour:

For example can be added this:
xc-list->xc-nav-list:
<mat-nav-list> <ul [attr.aria-label]="'Menü mit ' + items.length + ' Elementen'"> <li *ngFor="let item of items"> <xc-nav-list-item [item]="item" [size]="size" [depth]="0" [color]="color" [shrink]="shrink" [orientation]="orientation" (focusChange)="focusChange($event)" >{{item.name}} </xc-nav-list-item> </li> </ul> </mat-nav-list>

AND in xc-list->xc-nav-list->xc-nav-list-item:
`<div *ngIf="item.children && item.children.length; else leaf">
<a
mat-list-item
role="button"
[ngClass]="getItemClassList()"
[attr.aria-expanded]="!collapsed"
[attr.aria-controls]="uniquePanelId"
[attr.aria-disabled]="item.disabled"
[attr.aria-label]="item.name"
[attr.tabindex]="item.disabled ? '-1' : '0'"
(click)="toggleChildren()"
(keyup.enter)="toggleChildren()"
(keyup.space)="toggleChildren()"
(keyup.arrowright)="expandChildren()"
(keyup.arrowleft)="collapseChildren()"
(focus)="focusChange.emit(item)"
(blur)="focusChange.emit()"
>
<xc-icon *ngIf="!shrink"
class="toggle"
[ngClass]="['disabled']"
[class.rotated]="!item.collapsed"
xc-icon-name="accordion"
xc-icon-size="small"
>
<xc-icon [xc-icon-name]="item.icon" [xc-icon-style]="item.iconStyle" [xc-icon-size]="size">{{shrink ? '' :
item.name}}


<ul *ngIf="!shrink" [@toggleAnimation]="toggleAnimation" [attr.id]="uniquePanelId"
[attr.aria-label]="'Menü mit ' + item.children.length + ' Elementen'">
<li *ngFor="let child of item.children; let i = index">
<xc-nav-list-item
[attr.id]="'xc-nav-list-item-depth-' + (depth+1) + '-' + i"
[item]="child"
[size]="size"
[depth]="depth+1"
[orientation]="orientation"
[color]="color"
(focusChange)="focusChange.emit($event)"
>

`

After this updates screen reader can provide information about count of menu item and sub-item and role of this items

Xyna version: latest

Zeta version: latest