PLANET-8026 Trapped focus within mobile nav menu when open#2853
PLANET-8026 Trapped focus within mobile nav menu when open#2853Osong-Michael wants to merge 3 commits intomainfrom
Conversation
Osong-Michael
added
Review
UAT Needed
/unhold deb7bb07-a8ce-4a26-93a6-ec777155ba74
Test instance is ready 🚀🌑 phoebe | admin | blocks report | CircleCI | composer-local.json ⌚ 2026.02.17 09:31:44 |
Osong-Michael
force-pushed
the
main-nav-trap-focus-mobile
branch
from
0fbc4b2 to
2d2025d
Compare
/unhold a0ebbbaf-fb37-4dd7-83d1-3e9cc963db56
Osong-Michael
added
UAT Passed
|
On tablet when the tab focus goes to the logo in the burger menu, the page scrolls down which I don't think is expected? screen.recording.movEdit: this also happens on mobile! You can also see the logo getting a bit bigger 
|
|
I have two different focus ring colors in the menu, do you see this as well? However it's on live sites too so it's not related to your changes, it can be handled in another PR. 
|
|
@Osong-Michael I can't reproduce it on the GPI site though... and this isn't when closing the menu, it's when focusing on the logo within the menu. |
So if you look at the ticket for this PR in Jira, I explained a bit more what was happening, don't know why but the ticket was created to look into it. |
@Osong-Michael but it seems it's related to your changes in this PR, because it's not happening in live sites or in |
/unhold 85bc2875-46bb-4378-92d9-7384e56003d5
Osong-Michael
force-pushed
the
main-nav-trap-focus-mobile
branch
from
d72e661 to
283238b
Compare
/unhold 3df92e05-da91-416a-84f2-07683cb2be41
|
When I exit the burger menu, the focus seems to move to the content but shouldn't it be in the navigation bar instead? |
|
Maybe you should also have Houssam test it again since you fixed the issue of the page scrolling down. |
I would assume not the case seeing the burger menu already contains the navigation elements, if the user is exiting out of that, most likely it is to continue to the content, that is just what I think. |
Osong-Michael
force-pushed
the
main-nav-trap-focus-mobile
branch
from
283238b to
eb35a44
Compare
/unhold e35762b0-314d-4449-8c3c-cd535c83686c
|
Let me know once Houssam has taken another look, then I can approve 👍 |
- Updated codebase to trap focus with mobile menu when open
- Refactor mobile nav focus trap logic
- Refactored selector to use spread operator instead of Array.from
Osong-Michael
force-pushed
the
main-nav-trap-focus-mobile
branch
from
eb35a44 to
c892824
Compare
/unhold 4e20bab4-b69b-463c-a12b-04a9e1a7bd96
| const donateBtn = mobileNav.querySelector('.btn-donate'); | ||
| const closeBtn = mobileNav.querySelector(NAV_MENU_CLOSE_CLASS); | ||
| const logo = mobileNav.querySelector(SITE_LOGO_CLASS); | ||
| const focusableSelectors = |
There was a problem hiding this comment.
Do we need a variable here? It's only used once
mleray
left a comment
mleray
left a comment
There was a problem hiding this comment.
Looks good to me 👏 I just left a small comment but it's not a blocker!
3 participants
Summary
On mobile, the toggle correctly announces that the navigation is expanded, but focus does not move into the opened menu. The user remains on the page behind the overlay and cannot interact with the navigation. When the mobile menu opens, focus must move into it, and focus trap should be applied.
Ref: https://greenpeace-planet4.atlassian.net/browse/PLANET-8026
Testing
On mobile using a screen reader or tabbing with a keyboard, the focus is trapped within the open navigation menu until it is closed.