Implement Arrow keyboard navigation for mobile gnav components

[patel-prince]

Implement Arrow keyboard navigation for mobile gnav components

Resolves: MWPW-171851

Test URLs:

• Before: https://main--milo--adobecom.aem.page/?martech=off
• After: https://mwpw-171851--milo--patel-prince.aem.page/?martech=off

QA URL:

• https://main--homepage--adobecom.aem.page/homepage/index-loggedout?milolibs=MWPW-171851--milo--patel-prince
• https://main--cc--adobecom.aem.page/products/catalog?milolibs=MWPW-171851--milo--patel-prince

📱 Mobile GNav: Keyboard Navigation Guide

This guide explains how users can interact with the Mobile Global Navigation (GNav) using only their keyboard, focusing on arrow key navigation and accessibility behavior.

---

🔹 Step 1: Opening the Mobile GNav

1. Start by focusing on the hamburger menu icon using Tab.
2. Press the Spacebar key to open the Mobile GNav menu.
3. Once opened, the first menu item will automatically receive focus.

---

🔹 Step 2: Navigating Menu Items (Main GNav screen)

• Use the Arrow Down (↓) key to move the focus to the next menu item.
• Use the Arrow Up (↑) key to move the focus to the previous menu item.

🚫 Edge Handling:

• If the last menu item is focused, pressing ↓ won’t move the focus further.
• If the first menu item is focused, pressing ↑ won’t move the focus upward.

🔁 Additional Navigation:

• Press Tab from the last menu item to move to the next focusable element on the page.
• Press Shift + Tab from the first menu item to move to the previous element on the page.

---

🔹 Step 3: Opening a Submenu

• While focused on any menu item, press the Spacebar to open the submenu (popup).
• This opens a two-column layout:
  • Left column: Subheaders (like tabs).
  • Right column: Submenu items related to the selected subheader.

---

🔹 Step 4: Navigating the Submenu (Popup)

🔸 Left Side – Subheaders

• Default focus is on the first subheader.
• Use Arrow Down (↓) and Arrow Up (↑) to move between subheaders.
• Press Arrow Right (→) to move from the subheader to the submenu items.

🔸 Right Side – Submenu Items

• Use Arrow Down (↓) and Arrow Up (↑) to navigate through submenu items.
• Press Spacebar to activate or open a submenu item.
• Press Arrow Left (←) to go back to the active subheader.

---

🔹 Step 5: Exiting the Submenu

• Press the Escape (Esc) key to:
  • Close the submenu popup.
  • Return focus back to the original GNav menu screen.

---

✅ Summary of Key Controls

Action	Key(s)
Open Mobile GNav	Spacebar (on hamburger)
Navigate GNav items	↑, ↓
Move to next focus after GNav	Tab
Move to previous focus before GNav	Shift + Tab
Open submenu	Spacebar
Navigate subheaders (left side)	↑, ↓
Navigate submenu items (right)	→ to enter, ↑, ↓
Open submenu item	Spacebar
Return to subheader from submenu	←
Close submenu	Escape

[aem-code-sync[bot]]

	Page	Scores	Audits	Google
:iphone:	/drafts/blaishram/test-urls/page?martech=off
:desktop_computer:	/drafts/blaishram/test-urls/page?martech=off
:iphone:	/drafts/blaishram/test-urls/page-gnav-footer-thin?martech=off
:desktop_computer:	/drafts/blaishram/test-urls/page-gnav-footer-thin?martech=off
:iphone:	/drafts/blaishram/test-urls/page-with-promo?martech=off
:desktop_computer:	/drafts/blaishram/test-urls/page-with-promo?martech=off
:iphone:	/?martech=off
:desktop_computer:	/?martech=off

[github-actions[bot]]

This pull request is not passing all required checks. Please see this discussion for information on how to get all checks passing. Inconsistent checks can be manually retried. If a test absolutely can not pass for a good reason, please add a comment with an explanation to the PR.

[mokimo]

Heya, since this PR has been open since a while - could you leave some feedback on https://github.com/orgs/adobecom/discussions/4407 why/what is blocking this from proceeding?

[spadmasa]

Hi @patel-prince , As discussed arrow navigation is not seen working when the user is on submenu and try to navigate using right arrow ya down arrow. When traversed via tab to right column content and try arrow down , its seen stopped after completing1 subheader .Kindly take a look on this. PFA recording of the same

https://github.com/user-attachments/assets/1b6def9d-1ae7-4f6e-b051-0fa9cbb654cd

[spadmasa]

Hi @patel-prince , when user traverse to 2nd screen the focus is not on selected tab can this be considered https://main--homepage--adobecom.aem.page/homepage/index-loggedout?milolibs=MWPW-171851--milo--patel-prince

[prativas22]

Hi @patel-prince, In the main menu of mobile mode, the Arrow Left (←) and Arrow Right (→) navigation are not working as they should for the Arabic locale. In desktop mode it works fine. https://main--homepage--adobecom.hlx.live/ae_ar/homepage/index-loggedout?milolibs=MWPW-171851--milo--patel-prince

[prativas22]

For mobile gnav components, the PR to implement arrow keyboard navigation has been verified.

https://main--homepage--adobecom.hlx.live/ae_ar/homepage/index-loggedout?milolibs=MWPW-171851--milo--patel-prince https://main--cc--adobecom.aem.page/products/catalog?milolibs=MWPW-171851--milo--patel-prince

https://www.stage.adobe.com/acrobat.html?milolibs=MWPW-171851--milo--patel-prince recording: https://github.com/user-attachments/assets/0abec445-308d-49ed-8d40-2f2389b1e506

The QA test results have been added to the tickets below for reference. https://jira.corp.adobe.com/browse/MWPW-171851 https://jira.corp.adobe.com/browse/MWPW-173923