Navigation block 'X' button: touch event triggers element underneath

[chthonic-ds]

Description

The Navigation block markup includes two buttons for responsive menus: a burger button and an 'X' button. If an element shares the same coordinates as the 'X' button and can receive a touch event, a touch on the 'X' can also trigger the touch event on the element.

For layouts where the burger and 'X' buttons overlap or are aligned, this can result in an expanded navigation menu that is difficult or impossible to close.

Step-by-step reproduction instructions

1. Visit https://2022.wordpress.net/ on a mobile device, or simulate touch events via dev tools on a desktop browser.
2. Click the burger button to expand the navigation menu.
3. Click the 'X' burger to close the menu. Observe the menu will pop open again.

Notes:

• It is possible to successfully close the menu if your click is centred in the upper 50% of the 'X' toggle, due to Twenty Twenty-Two's burger buttons not sharing the exact same position.
• It's impossible to close the menu where a layout has the burger buttons precisely aligned, for example: https://ona.deothemes.com.
• Any element aligned with the 'X' button that can receive a touch event will be triggered. For example, clicking 'X' on https://wpaino.com sees the "Account" link receive a touch event.

Screenshots, screen recording, code snippet

Twenty Twenty-Two:

Ona: cannot close.

Aino: navigation link receives touch event, triggering a page load.

Environment info

• Tested with WordPress 5.8.1, Gutenberg 11.8.0, any theme with overlapping Navigation block buttons
• Observed in Firefox and Chrome, desktop and mobile

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

[chthonic-ds]

Closing as duplicate of #35686.