Outline styles broken and missing padding

[Zodiac1978]

Description If you navigate via keyboard you see the focus styles for the navigation and in the main menu there is missing some padding. Also in submenus the bottom outline is hidden, looks broken.

Screenshots

Environment info

• Device: MacBook Pro
• OS: macOS 12.7.6
• Browser: Firefox
• Version: 131.0.3 (aarch64)

[carolinan]

I am getting a different result in Chrome, this seems to be a browser issue.

Adding padding on the link itself would break the design in other ways, including breaking the position of the arrow icons. The focus on the link and the arrow button needs to remain separate, depending on which block setting is enabled.

[elbsegler63]

I was able to reproduce the error with both Firefox and Chrome browsers. It is in the submenu of a navigation when it is expanded. As shown in the screenshot above.

• Device: Laptop Microsoft
• OS: Windows 11
• Browser 1: Firefox 132.0bß
• Browser 2: Chrome 129

[Zodiac1978]

The missing bottom outline in the submenus (second screenshot) could be fixed with this CSS:

.wp-block-navigation .wp-block-navigation-item {
  margin-bottom: 2px;
}

This bug is also in Chrome 129 (macOS 12.7.6)

[Zodiac1978]

The missing padding could be fixed with adding an offset (for example 4px):

:where(.wp-site-blocks *:focus) {
    outline-width: 2px;
    outline-style: solid;
    outline-offset: 4px;
}

[carolinan]

If I add a 2px margin, the bottom of the outline is still cut off: On the parent menu item. On all submenu items.

If I increase it to 3px margin, it only solves it for some submenu items. Here I am navigating backwards through the submenu:

The focus on the arrow button is miss aligned even when I try to add bottom padding to the button. Here I am adding 13px.

---

Adding offset also does not work for the arrow icon and submenus, here are screenshots of what I meant:

In the post meta, single post template:

[carolinan]

If I try add the offset only to the navigation items, it still breaks for the navigation items inside the submenu. The placement of the class names on the block makes it too difficult for me at least, to prevent targeting the nested submenu items.

[carolinan]

I wish there was a class similar to "is-submenu-item"

[elbsegler63]

Navigation - Submenu:

For me, the best compromise is to slightly adapt @Zodiac1978 's suggestion. Then it works in Chrome and Firefox. And the arrow to the submenu is also OK. Not perfect. But it's the best for accessibility. Overall, it doesn't seem to be a TT5 issue. The problem also exists under WP 6.6.2 and TT4, or have I looked in the wrong place?

I entered the following in the additional css:

.wp-block-navigation .wp-block-navigation-item { margin-bottom: 3px; }

@Zodiac1978 3px instead of 2px.

[carolinan]

TT4 has the same width added to the outline, so it has the same problem.

[troychaplin]

@carolinan I have a couple of potential solution that can be considered.

• Grid Gap: adding grid-gap: 2px on wp-block-navigation-submenu would solve the issue, but also adds a bit of additional spacing between each submenu item.
• Box Shadow: removing outline style (or setting it to none) on the focus style for the a tag and replacing it with box-shadow: inset 0 0 0 2px #000; would provide the same look without the extra spacing between elements.

Before	Grid Gap	Box Shadow