f.spilla/nx-primeng-sakai-v17
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Menu accessibility

Browse Source
This commit is contained in:
Yiğit FINDIKLI 2021-12-31 14:58:49 +03:00
parent 8b04b2ebfc
commit 6c161a69ba
2 changed files with 9 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/app/app.menu.component.ts
View File

@ -5,11 +5,11 @@ import { AppComponent } from './app.component';
selector: 'app-menu', selector: 'app-menu',
template: ` template: `
<div class="layout-menu-container"> <div class="layout-menu-container">
<ul class="layout-menu" (keydown)="onKeydown($event)"> <ul class="layout-menu" role="menu">
<li app-menu class="layout-menuitem-category" *ngFor="let item of model; let i = index;" [item]="item" [index]="i" [root]="true"> <li app-menu class="layout-menuitem-category" *ngFor="let item of model; let i = index;" [item]="item" [index]="i" [root]="true" role="none">
<div class="layout-menuitem-root-text">{{item.label}}</div> <div class="layout-menuitem-root-text" [attr.aria-label]="item.label">{{item.label}}</div>
<ul> <ul role="menu">
<li app-menuitem *ngFor="let child of item.items" [item]="child" [index]="i"></li> <li app-menuitem *ngFor="let child of item.items" [item]="child" [index]="i" role="none"></li>
</ul> </ul>
</li> </li>
<a href="https://www.primefaces.org/primeblocks-ng/#/"> <a href="https://www.primefaces.org/primeblocks-ng/#/">

8
src/app/app.menuitem.component.ts
View File

@ -14,7 +14,7 @@ import { AppMainComponent } from './app.main.component';
<ng-container> <ng-container>
<a [attr.href]="item.url" (click)="itemClick($event)" [ngClass]="item.class" <a [attr.href]="item.url" (click)="itemClick($event)" [ngClass]="item.class"
*ngIf="(!item.routerLink || item.items) && item.visible !== false" *ngIf="(!item.routerLink || item.items) && item.visible !== false"
[attr.target]="item.target" [attr.tabindex]="0" pRipple> [attr.target]="item.target" [attr.tabindex]="0" [attr.aria-label]="item.label" role="menuitem" pRipple>
<i [ngClass]="item.icon" class="layout-menuitem-icon"></i> <i [ngClass]="item.icon" class="layout-menuitem-icon"></i>
<span>{{item.label}}</span> <span>{{item.label}}</span>
<span class="menuitem-badge" *ngIf="item.badge">{{item.badge}}</span> <span class="menuitem-badge" *ngIf="item.badge">{{item.badge}}</span>
@ -22,15 +22,15 @@ import { AppMainComponent } from './app.main.component';
</a> </a>
<a (click)="itemClick($event)" *ngIf="(item.routerLink && !item.items) && item.visible !== false" [ngClass]="item.class" <a (click)="itemClick($event)" *ngIf="(item.routerLink && !item.items) && item.visible !== false" [ngClass]="item.class"
[routerLink]="item.routerLink" routerLinkActive="active-menuitem-routerlink router-link-exact-active" [routerLink]="item.routerLink" routerLinkActive="active-menuitem-routerlink router-link-exact-active"
[routerLinkActiveOptions]="{exact: true}" [attr.target]="item.target" [attr.tabindex]="0" pRipple> [routerLinkActiveOptions]="{exact: true}" [attr.target]="item.target" [attr.tabindex]="0" [attr.aria-label]="item.label" role="menuitem" pRipple>
<i [ngClass]="item.icon" class="layout-menuitem-icon"></i> <i [ngClass]="item.icon" class="layout-menuitem-icon"></i>
<span>{{item.label}}</span> <span>{{item.label}}</span>
<span class="p-tag p-badge ml-auto" *ngIf="item.badge">{{item.badge}}</span> <span class="p-tag p-badge ml-auto" *ngIf="item.badge">{{item.badge}}</span>
<i class="pi pi-fw {{active ? 'pi-angle-up' : 'pi-angle-down'}} ml-auto" *ngIf="item.items"></i> <i class="pi pi-fw {{active ? 'pi-angle-up' : 'pi-angle-down'}} ml-auto" *ngIf="item.items"></i>
</a> </a>
<ul *ngIf="(item.items && active) && item.visible !== false" [@children]="(active ? 'visibleAnimated' : 'hiddenAnimated')"> <ul *ngIf="(item.items && active) && item.visible !== false" [@children]="(active ? 'visibleAnimated' : 'hiddenAnimated')" role="menu">
<ng-template ngFor let-child let-i="index" [ngForOf]="item.items"> <ng-template ngFor let-child let-i="index" [ngForOf]="item.items">
<li app-menuitem [item]="child" [index]="i" [parentKey]="key" [class]="child.badgeClass"></li> <li app-menuitem [item]="child" [index]="i" [parentKey]="key" [class]="child.badgeClass" role="none"></li>
</ng-template> </ng-template>
</ul> </ul>
</ng-container> </ng-container>