Implement Arrow keyboard navigation for mobile gnav components #4218
Conversation
|
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. |
|
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? |
|
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 Recording.2025-06-26.133835.mp4 |
|
Hi @patel-prince , when user traverse to 2nd screen the focus is not on selected tab can this be considered |
|
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. |
|
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://www.stage.adobe.com/acrobat.html?milolibs=MWPW-171851--milo--patel-prince The QA test results have been added to the tickets below for reference. |
Implement Arrow keyboard navigation for mobile gnav components
Resolves: MWPW-171851, MWPW-173923
Test URLs:
QA URL:
📱 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
Tab.Spacebarkey to open the Mobile GNav menu.🔹 Step 2: Navigating Menu Items (Main GNav screen)
Arrow Down (↓)key to move the focus to the next menu item.Arrow Up (↑)key to move the focus to the previous menu item.🚫 Edge Handling:
↓won’t move the focus further.↑won’t move the focus upward.🔁 Additional Navigation:
Tabfrom the last menu item to move to the next focusable element on the page.Shift + Tabfrom the first menu item to move to the previous element on the page.🔹 Step 3: Opening a Submenu
Spacebarto open the submenu (popup).🔹 Step 4: Navigating the Submenu (Popup)
🔸 Left Side – Subheaders
Arrow Down (↓)andArrow Up (↑)to move between subheaders.Arrow Right (→)to move from the subheader to the submenu items.🔸 Right Side – Submenu Items
Arrow Down (↓)andArrow Up (↑)to navigate through submenu items.Spacebarto activate or open a submenu item.Arrow Left (←)to go back to the active subheader.🔹 Step 5: Exiting the Submenu
Escape (Esc)key to:✅ Summary of Key Controls
Spacebar(on hamburger)↑,↓TabShift + TabSpacebar↑,↓→to enter,↑,↓Spacebar←EscapeGNav Test URLs
Gnav + Footer + Region Picker modal:
Thin Gnav + ThinFooter + Region Picker dropup:
Localnav + Promo:
Sticky Branch Banner:
Inline Branch Banner:
Blog
RTL Locale