I’m getting a weird blue halo outline around the navigation label blocks on Foundry Shift stack.
Only occurs when you select one of the label blocks…Residential, Corporate or Trade and Construction.
No custom css, yes I have a few non Foundry stacks.
Including Impact that I’ve used on many Foundry sites without issue and also using Yuzool Navigation stack for nav menu, as client wants dropdown on hover for submenus and none of Foundry stacks nav menus do this, and Adam will not add this feature.
I’ve got a feeling it could be Yuzool Navigation stack and would like to find a fix.
If it means not using the Shift stack rather than not using the Yuzool Navigation stack so be it…dropdown hover for nav menu is more important.
Sorry, poor choice of words on my part. It isn’t accessibility so-to-speak like you’re thinking. It is the :focus: attribute for links. It is indicating that the link has focus currently. I can look at changing this in the future, and will add it to my list.
Thanks, when I remove Yuzool Nav stack I don’t get the blue halo (focus).
But…the client wants a hover dropdown for submenus so we can’t use MegaMenu…which is want I usually would use.
If and when you can get around to the :focus: attribute for links update in the future that would be great or maybe…add hover dropdown for MegaMenu I know you’ve said no to this in the past.
I just built out a quick test and previewed it in Safari here and can’t replicate the outline. May I ask what version of macOS you’re using? What version of Safari?
If it is Catalina I may need to get with you to send you a copy of Potion Pack to test out the changes once I make them.
Adam, I made a test earlier today when I figured out that CSS. It’s fine until you add the Navigation stack from Yuzool, then the blue outline appears. I could see it in RW preview.
My test was on OS X Sierra, Safari 12.1.2, RW 8.3, Stacks 3.6.2, Shift 1.3.5 and YuzoolThemes’ Navigation 1.3.9.
Btw, I didn’t really make a test file. I opened the Potion Pack Samples file you include and the Shift page was fine. I added the Yuzool Navigation stack to it and the issue appeared in RW preview.
Don, I tried that css and yes definitely worked. So that is a work around for the time being, thanks so much.
Adam, I’m using RW 8.3 and Stacks 4.0.3, I’m still on Mojave 10.14.6 have tested both on Safari 13.0.1 and 12.1.2
So, after adding Don’s css both versions of Safari look good, Chrome is still not an issue but interestingly Firefox still has the white dotted lines around the box. This is all after adding the css Don provided.
This focus outline highlight is undoubtedly being produced by the navigation stack you’re using.
I dug around in the code a bit to try and see where it was coming from within that stack specifically for testing against Shift… one thing I noticed is the stack isn’t targeting only content in its own stack using the Stacks ID variable.
I don’t believe that this is the problem, at least in the case of the stack’s CSS, but it is standard practice in stacks to use the #%id% variable in our code to ensure, when possible, that we’re targeting just our own stack(s). I only bring this up so you know about it in case you see other interactions with other stacks. It might give you a starting point for troubleshooting.
All that said, I think the javascript for the stack might be the problem… and it does have to do with not targeting just this stack, but everything on the page. This line the in javascript is adding a tabindex to every unordered list item , or <li></li>, on the page and not just in its own stack.
$("li").each(function (i) { $(this).attr('tabindex', i + 1); });
This is setting up every<li></li> on the page to have that accessibility outline and is causing the problem you’re seeing. Me adding overrides in Shift is just a bandaid to prevent it in that particular stack when this navigation stack is on the page. It would be better to fix the source of the problem in this case I think as it could affect other stacks out there at have unordered lists, too.