以编程方式设置 tabindex

Question

I'm using jQuery and a smooth scrolling code snippet from css-tricks, but for some reason setting tabindex for accessibility isn't working. I've copied the snippet directly, so I'm not sure if there's something else in the implementation that's gone awry or if it's the browser (latest version of Chrome). An extra set of eyes on this would be very appreciated!

Original snippet

Codepen demonstrating the issue

Expected behaviour: When you click on the 'Skip to content' link, it should smooth scroll down to the content div. When tabbing with the keyboard afterwards, it should start focusing the links directly after the content div (Test links 4+)

What's happening: The codepen scrolls down to the content div, but when tabbing with the keyboard, it jumps back up to Test Link 1.

If I add tabindex to the div directly, the expected functionality works: <div id="primary" tabindex="-1">This works</div>

But if I add tabindex programmatically using the smooth scroll snippet, it doesn't. I've also tried using.setAttribute() and.prop() instead of.attr(), without luck.

Answer 1

This appears to be to do with the version of jQuery in use.

I was playing about on CodePen, including on the pen by Chris Coyier linked to in the CSS tricks article you got the code from, where everything seems to work as intended. I decided to edit your post to include a code snippet with the code copied from your Codepen, to avoid the need to go offsite to look into it - but abandoned when I realised that, contrary to the Codepen, it appared to work fine.

But Stack Overflow only lets you add jQuery versions up to 3.3.1, whereas you were using 3.6.0 (the latest) in your codepen. And I discovered that changing the version of jQuery in use there altered whether it worked or not - specifically, any version before 3.6.0 (although I only tested 3.x versions), seemed to work fine.

So TLDR: this seems to be a bug in the latest jQuery. For your purposes you can presumably just use a slightly older version like 3.5.0. I don't know if this has been reported as an issue, nor do I fully know what's happened - but reading the release notes I see they have fixed a bug around focus, it is possible that in so doing they caused this new issue.