Hi Michael,
I’ve been having a little compatibility issue with your Navigation stack @yuzool and Foundry.
Please see this discussion on the Elixir forum.
We have managed a work around but apparently this is what Adam feels is causing the conflict.
This
focusoutline 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
tabindexto 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.
If possible could you please have a look at an update for the Navigation stack.
Many thanks
Scott