Navigation: pseudo states do not apply to parent items that are buttons

[mikachan]

Description

In the navigation block, with the 'Open on click' option enabled, parent menu items that have sub-menus cannot have their pseudo states styled via theme.json.

There is a specific example described here, using Twenty Twenty-Three.

Parent items that have sub menus are not underlined on hover anymore -they are buttons. As a user I would expect the menu to look the same when I enable this option.

When the 'Open on click' option is disabled, the parent items are links, and can successfully have their pseudo states controlled via theme.json.

Step-by-step reproduction instructions

1. Activate a theme that configures pseudo states for the navigation block via theme.json (Twenty Twenty-Three is an example)
2. In the Side Editor, enable the 'Open on click' option for the navigation block. This should turn the parent menu items into buttons instead of links.

3. Add the following to the theme.json:

"styles": {
		"blocks": {
			"core/navigation": {
				"elements": {
					"button": {
						":hover": {
							"typography": {
								"textDecoration": "underline"
							}
						},
						":focus": {
							"typography": {
								"textDecoration": "underline"
							}
						},
						"typography": {
							"textDecoration": "none"
						}
					},
			},
...

4. Notice that the button pseudo state styles are not applied to the parent menu items.

Screenshots, screen recording, code snippet

No response

Environment info

• WP 6.0.1, GB trunk, Twenty Twenty-Three

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