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!

ahsannazir → made their first commit to this issue’s fork.

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.