From b1f9023e5e0972aee9698ae37a14379430c2eaf4 Mon Sep 17 00:00:00 2001
From: Deborah <dobanisola@scottlogic.com>
Date: Tue, 30 Apr 2024 11:08:52 +0100
Subject: [PATCH] fix broken megamenu keyboard naviagation

---
 src/app/components/megamenu/megamenu.spec.ts | 83 +++++++++++++++++++-
 src/app/components/megamenu/megamenu.ts      |  3 +-
 2 files changed, 81 insertions(+), 5 deletions(-)

diff --git a/src/app/components/megamenu/megamenu.spec.ts b/src/app/components/megamenu/megamenu.spec.ts
index b080c3defad..fba0fe147f4 100755
--- a/src/app/components/megamenu/megamenu.spec.ts
+++ b/src/app/components/megamenu/megamenu.spec.ts
@@ -211,7 +211,7 @@ describe('MegaMenu', () => {
         fixture.detectChanges();
 
         expect(itemClickSpy).toHaveBeenCalled();
-        expect(megamenu.activeItem).toEqual(null);
+        expect(megamenu.activeItem()).toEqual(null);
     });
 
     it("shouldn't  call itemClick ", () => {
@@ -366,7 +366,7 @@ describe('MegaMenu', () => {
         expect(tv1Div.className).toContain('p-megamenu-col-4');
     });
 
-    it('should item get p-megamenu-col-3', () => {
+    it('should item get p-megamenu-col-6', () => {
         megamenu.model = [
             {
                 label: 'TVV',
@@ -405,7 +405,7 @@ describe('MegaMenu', () => {
         let tv1Div = fixture.debugElement.query(By.css('.p-megamenu-grid')).query(By.css('div')).nativeElement;
         fixture.detectChanges();
 
-        expect(tv1Div.className).toContain('p-megamenu-col-3');
+        expect(tv1Div.className).toContain('p-megamenu-col-6');
     });
 
     it('should item get p-megamenu-col-2', () => {
@@ -465,4 +465,81 @@ describe('MegaMenu', () => {
 
         expect(tv1Div.className).toContain('p-megamenu-col-2');
     });
+
+    it('should move to the next item onKeyboardArrowKeyDown',() => {
+        megamenu.model = [
+            {
+                label: 'TV',
+                icon: 'pi pi-fw pi-check',
+                items: [
+                    [
+                        {
+                            label: 'TV 1',
+                            items: [{ label: 'TV 1.1' }, { label: 'TV 1.2' }]
+                        },
+                        {
+                            label: 'TV 2',
+                            items: [{ label: 'TV 2.1' }, { label: 'TV 2.2' }]
+                        }
+                    ]
+                ]
+            },
+            {
+                label: 'Sports',
+                icon: 'pi pi-fw pi-soccer-ball-o',
+                items: [
+                    [
+                        {
+                            label: 'Sports 1',
+                            items: [{ label: 'Sports 1.1' }, { label: 'Sports 1.2' }]
+                        },
+                        {
+                            label: 'Sports 2',
+                            items: [{ label: 'Sports 2.1' }, { label: 'Sports 2.2' }]
+                        }
+                    ]
+                ]
+            }
+        ];
+
+        const onArrowDownKeySpy = spyOn(megamenu, 'onArrowDownKey').and.callThrough();
+
+        //focus on menu
+        megamenu.onMenuFocus(new Event(''));
+        fixture.detectChanges();
+        
+        const parentMenuEl = fixture.debugElement.query(By.css('.p-megamenu-root-list'));
+        const tvEl = parentMenuEl.children[0]; 
+
+        expect(megamenu.focusedItemInfo().index).toBe(0);
+        expect(megamenu.focusedItemInfo().parentKey).toBe('');
+        expect(megamenu.focusedItemInfo().item.label).toBe('TV');
+        expect(tvEl.attributes['aria-expanded']).toBe('false');
+
+        //simulate keyboard arrow down key press
+        const event = new KeyboardEvent('keydown', {key: 'ArrowDown', code: 'ArrowDown'}); 
+        parentMenuEl.nativeElement.dispatchEvent(event);
+        fixture.detectChanges();
+
+        
+        expect(onArrowDownKeySpy).toHaveBeenCalled();
+        expect(megamenu.focusedItemInfo().index).toBe(0);
+        expect(megamenu.focusedItemInfo().parentKey).toBe('0_0_0');
+        expect(megamenu.focusedItemInfo().item.label).toBe('TV 1.1');
+        expect(tvEl.attributes['aria-expanded']).toBe('true');
+
+        //keyboard arrow down key press again
+        parentMenuEl.nativeElement.dispatchEvent(event);
+        fixture.detectChanges();
+        expect(megamenu.focusedItemInfo().index).toBe(1);
+        expect(megamenu.focusedItemInfo().parentKey).toBe('0_0_0');
+        expect(megamenu.focusedItemInfo().item.label).toBe('TV 1.2');
+
+        //keyboard arrow down key press again
+        parentMenuEl.nativeElement.dispatchEvent(event);
+        fixture.detectChanges();
+        expect(megamenu.focusedItemInfo().index).toBe(2);
+        expect(megamenu.focusedItemInfo().parentKey).toBe('0_0_1');
+        expect(megamenu.focusedItemInfo().item.label).toBe('TV 2.1');
+    });
 });
diff --git a/src/app/components/megamenu/megamenu.ts b/src/app/components/megamenu/megamenu.ts
index 5f9fb05bcc5..b1eead408db 100755
--- a/src/app/components/megamenu/megamenu.ts
+++ b/src/app/components/megamenu/megamenu.ts
@@ -504,8 +504,7 @@ export class MegaMenu implements AfterContentInit, OnDestroy, OnInit {
     get visibleItems() {
         const processedItem = ObjectUtils.isNotEmpty(this.activeItem()) ? this.activeItem() : null;
 
-        return processedItem && processedItem.key === this.focusedItemInfo().parentKey
-            ? processedItem.items.reduce((items, col) => {
+        return processedItem ? processedItem.items.reduce((items, col) => {
                   col.forEach((submenu) => {
                       submenu.items.forEach((a) => {
                           items.push(a);