From 6c161a69ba8605a036a6783975e862511c4ed0e3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Yi=C4=9Fit=20FINDIKLI?= <yigitfindikli@gmail.com>
Date: Fri, 31 Dec 2021 14:58:49 +0300
Subject: [PATCH] Menu accessibility

---
 src/app/app.menu.component.ts     | 10 +++++-----
 src/app/app.menuitem.component.ts |  8 ++++----
 2 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/src/app/app.menu.component.ts b/src/app/app.menu.component.ts
index cc7db39..b21f542 100644
--- a/src/app/app.menu.component.ts
+++ b/src/app/app.menu.component.ts
@@ -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/#/">
diff --git a/src/app/app.menuitem.component.ts b/src/app/app.menuitem.component.ts
index 4cffbd0..24ab031 100644
--- a/src/app/app.menuitem.component.ts
+++ b/src/app/app.menuitem.component.ts
@@ -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>