stepsNavigation doesn't work in all cases
Even in the Example it's not working reliable. If you click on the text (span element) e.g. "Step 1" it's not navigating back, and all styles are loss. If you click at the hook (before pseudo element of the span) it's working.
A fix would be great to guarantee consistency
Thanks for raising this, were you able to find a fix for this? I suspect it may be possible via CSS?
It seems the span within each list item is capturing the click and not passing it to the li.
To get around that, there is some css you can use, although pointer-events may not work in older versions of IE.
li span{
pointer-events: none;
display: inline-block;
}
Note the display: inline-block because of Edge: https://stackoverflow.com/questions/43655765/ie-edge-pointer-events-none-not-working-on-span-tag
Just a quick note: there's also an <em> element which is hidden in the default styles and shown on smaller screen. If you plan to use the workaround that @michaeladams stated you should ensure to include the <em> element as well.
.progtrckr li span,
.progtrckr li em {
pointer-events: none;
display: inline-block;
}