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

Update menu keyboard accessibility

Browse Source
This commit is contained in:
Çetin 2021-12-31 12:41:47 +03:00
parent 08cd26047f
commit 8b04b2ebfc
2 changed files with 14 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -5,7 +5,7 @@ import { AppComponent } from './app.component';
selector: 'app-menu',
template: `
<div class="layout-menu-container">
<ul class="layout-menu">
<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>
@ -59,7 +59,7 @@ export class AppMenuComponent implements OnInit {
label:'UI Blocks',
items:[
{label: 'Free Blocks', icon: 'pi pi-fw pi-eye', routerLink: ['/blocks'], badge: 'NEW'},
{label: 'All Blocks', icon: 'pi pi-fw pi-globe', url: ['https://www.primefaces.org/primeblocks-ng']},
{label: 'All Blocks', icon: 'pi pi-fw pi-globe', url: ['https://www.primefaces.org/primeblocks-ng'], target: '_blank'},
]
},
{label:'Icons',
@ -124,10 +124,20 @@ export class AppMenuComponent implements OnInit {
label: 'Documentation', icon: 'pi pi-fw pi-question', routerLink: ['/documentation']
},
{
label: 'View Source', icon: 'pi pi-fw pi-search', url: ['https://github.com/primefaces/sakai-ng']
label: 'View Source', icon: 'pi pi-fw pi-search', url: ['https://github.com/primefaces/sakai-ng'], target: '_blank'
}
]
}
];
}
onKeydown(event: KeyboardEvent) {
const nodeElement = (<HTMLDivElement> event.target);
if (event.key === 'Enter' || event.key === ' '){
event.preventDefault();
}
if (event.key === ' ') {
nodeElement.click();
}
}
}

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

@ -13,7 +13,7 @@ import { AppMainComponent } from './app.main.component';
template: `
<ng-container>
<a [attr.href]="item.url" (click)="itemClick($event)" [ngClass]="item.class"
*ngIf="(!item.routerLink || item.items) && item.visible !== false" (keydown.enter)="itemClick($event)"
*ngIf="(!item.routerLink || item.items) && item.visible !== false"
[attr.target]="item.target" [attr.tabindex]="0" pRipple>
<i [ngClass]="item.icon" class="layout-menuitem-icon"></i>
<span>{{item.label}}</span>