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',
template: `
<div class="layout-menu-container">
<ul class="layout-menu" (keydown)="onKeydown($event)">
<li app-menu class="layout-menuitem-category" *ngFor="let item of model; let i = index;" [item]="item" [index]="i" [root]="true">
<div class="layout-menuitem-root-text">{{item.label}}</div>
<ul>
<li app-menuitem *ngFor="let child of item.items" [item]="child" [index]="i"></li>
<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" role="none">
<div class="layout-menuitem-root-text" [attr.aria-label]="item.label">{{item.label}}</div>
<ul role="menu">
<li app-menuitem *ngFor="let child of item.items" [item]="child" [index]="i" role="none"></li>
</ul>
</li>
<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>
<a [attr.href]="item.url" (click)="itemClick($event)" [ngClass]="item.class"
*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>
<span>{{item.label}}</span>
<span class="menuitem-badge" *ngIf="item.badge">{{item.badge}}</span>
@ -22,15 +22,15 @@ import { AppMainComponent } from './app.main.component';
</a>
<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"
[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>
<span>{{item.label}}</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>
</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">
<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>
</ul>
</ng-container>