Weird blue outline around Shift stack label block

Hi all,

Hoping I can get some help please.

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.

Link to draft website and screenshot below.

https://opctv1.rapidwebsites.net

Any ideas on a fix please?

Thanks Scott

That is a focus indicator applied by your browser. It is part of the accessibility options of the browser.

Hi Adam,

I did have accessibility turned off but still occurring…I think I have that turn-off…correct??

Thanks
Scott

Do you have any custom CSS in either the page or site wide CSS fields?

Are there any non-Foundry stacks on the page? If so, try deleting them and see if the problem goes away (save a backup copy of the project first).

I’m seeing the issue on your site, but not the demo page for Shift.

Hi Don,

It occurs on Safari but not Chrome?

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.

Thanks Scott

I see the blue outline in Safari. Chrome looks fine. Firefox shows a dotted outline around the content, not the box.

If you can track down a conflict causing the issue, perhaps there’ll be a work-around.

Hi Don,

Yes, that’s the same results I get with each browser.

It’s definitely Yuzool Navigation stack. I’ve tested by deleting Yuzool Nav stack and when removed no blue halos.

I guess I need another slider stack similar to Shift…any ideas?

I wonder why on Safari and not Chrome?

Unless either Adam or Yuzool have some ideas.

Thanks Scott

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.

What happens when you remove your navigation stack from the page?

Hi Adam,

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 :pray::grinning: I know you’ve said no to this in the past.

Cheers Scott

Scott, try this CSS:

.cd-slider-nav li:focus {outline:none;}

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.

Hi Adam and Don,

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.

https://opctv1.rapidwebsites.net

Thanks gentlemen and look forward to an update Adam when you release it.

Cheers Scott

Scott, I hadn’t tested it in Firefox. This should fix both.

.cd-slider-nav li:focus, .cd-slider-nav a:focus {outline:none;}

1 Like

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.

1 Like

Hi Adam and Don,

Thanks, I will let Yuzool know about the Nav stack code issue.

Don, I have tested that 2nd css and yes now Safari, Firefox and Chrome are all looking ok. Thanks for that work around.

Thanks again guys.

Cheers Scott

1 Like