Navigation Block submenus not closing properly on iPad

[cuemarie]

Description

Navigation Block submenus fail to close when you tap away from the submenu, or open others. Instead, they remain open, and can overlap each other.

Step-by-step reproduction instructions

1. Set up a site with a Navigation Block containing submenus (it helps to create a couple dropdowns in the menu)
2. Launch the site on an iPad or test environment for an iPad
3. Explore opening submenus along the page and trying to close them without refreshing/navigating away from the page

Screenshots, screen recording, code snippet

Firefox Browser Responsive Tools

Screen.Capture.on.2023-10-02.at.17-19-29.mp4

BrowserStack with iPad 10th Generation > Safari

Screen.Capture.on.2023-10-02.at.17-25-49.mp4

Environment info

• WP 6.3.1
• Gutenberg 16.7.0

Also replicated on Gutenberg 16.6.0 and 16.5.1 (I didn't rebuild the block each time though - just switched between versions after building the navigation block on 16.7.0)

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes

[annezazu]

Adding this to 6.4 to be safe. I tried to replicate with 6.4 beta 2 and GB 16.7 but wasn't able to replicate when simulating an ipad environment for Chrome or Safari:

Screen.Recording.2023-10-03.at.3.09.12.PM.mov

[tellthemachines]

I can reproduce this in the xcode simulator on a 10th gen iPad with iOS 17.0 on Safari:

On a Navigation with a Search block it's particularly bad 😬

Edit: I can also reproduce it in Safari on macOS Sonoma. Could just be an issue with the latest OS versions from Apple 🤔

[tellthemachines]

As far as I can tell the menus don't close because the aria-expanded attribute on the button element isn't being set to false (the CSS is attached to that attribute). I can't make out why this is happening though. The same attribute on the button-only Search block is working as expected. Cc @SantosGuillamot and @luisherranz as they are more familiar with this code.

[luisherranz]

We'll take a look. Thanks, @tellthemachines.

[luisherranz]

We've identified the problem, and @SantosGuillamot will open a PR with a possible fix.

[SantosGuillamot]

I just created the pull request that aims to fix it: #55198