Focus states on mobile second level navigation items can get cut off in Olivero

Looks like https://www.w3.org/WAI/WCAG21/Understanding/focus-visible.html

I am addressing the comment #19 in this patch, I have made the necessary adjustment to the padding by changing it from var(--sp0-5) to var(--sp0-25), which is the smallest value available. This change successfully resolved the issue related to the “Focus states on mobile second level.” attaching the patch and inderdiff.

I attempted to create a merge request but encountered an error on my local machine. As a workaround, I am creating a patch file in the hopes that this solution will be helpful.

Issue summary should be updated with proposed solution.

Also as UI change before/after screenshots should be added.

1. Update the issue summary with proposed solution,
2. I have tested patch #26 and it is working fine. As requested in #28, I am attaching a screenshot for reference.

Before

After

RTBC +1

Still missing screenshots.

strange, I have checked the images on others system, it's visible on some and breaks on some.
so updated the images again.

Images:
3191727 after patch 26.png
3191727 before patch 26.png

Issue appears to have been resolved. Updated issue summary.

Updated attributions

This patch works by adding a bit of vertical padding to the mobile menu, which makes room for the focus outline. This slightly changes the design, but I think this is okay (no one's going to notice).

Code-wise, it's creating a duplicate selector, though. The rule should be placed within the existing .primary-nav__menu--level-2 block around line 153 of nav-primary.pcss.css.

Other than that its a straightforward fix.

working on it

Addressing the comment #36, and created a patch along with interdiff. No additional screenshots are being added as they are the same as the ones uploaded in comment #33.

Refactor looks good.

It looks like the padding breaks the close animation. There's a blue border visible during the animation:

working on it

In this patch, I have addressed the comment #42 by adjusting the styling. The issue was that the padding on the ul(primary-nav__menu--level-2) element was causing the animation to break. To fix this, I have removed the padding from the ul(primary-nav__menu--level-2) and instead added padding to the first and last child of the second level items (primary-nav__menu-item--level-2). This solution addresses both the problem of focus cut off and the animation breaking.

Can confirm I'm also seeing the results from #44 applying the patch.

The last submitted patch, 44: 3191727-44.patch, failed testing. View results →

I checked the same patch #44 it is working fine with php 8.3, Drupal 11 requires PHP 8.3.

RTBC looks fine, Can I get the changes in a MR please? Thanks!

Copy to MR seems fine.

Committed and pushed 924d567aac to 11.x and 1e0296d353 to 11.0.x and 4c8f3371e4 to 10.4.x and 57e4625a18 to 10.3.x. Thanks!

nod_ → closed merge request !7936

Automatically closed - issue fixed for 2 weeks with no activity.