From 8b04b2ebfc1b5bd1d92a119227273d9e93a47890 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C3=87etin?=
 <69278826+cetincakiroglu@users.noreply.github.com>
Date: Fri, 31 Dec 2021 12:41:47 +0300
Subject: [PATCH] Update menu keyboard accessibility

---
 src/app/app.menu.component.ts     | 16 +++++++++++++---
 src/app/app.menuitem.component.ts |  2 +-
 2 files changed, 14 insertions(+), 4 deletions(-)

diff --git a/src/app/app.menu.component.ts b/src/app/app.menu.component.ts
index 8777f68..cc7db39 100644
--- a/src/app/app.menu.component.ts
+++ b/src/app/app.menu.component.ts
@@ -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();
+        }
+    }
 }
diff --git a/src/app/app.menuitem.component.ts b/src/app/app.menuitem.component.ts
index 2d73144..4cffbd0 100644
--- a/src/app/app.menuitem.component.ts
+++ b/src/app/app.menuitem.component.ts
@@ -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>