Add tabindex to each of the skiplink elements to better handle focus

[JeffersonBledsoe]

Without the tabindex, the focus isn't correctly followed in most (all?) browsers and so the user may be put back to a different location from where they skipped to depending on how the link was used.

[netlify]

✅ Deploy Preview for plone-components canceled.

Name	Link
🔨 Latest commit	568ea19
🔍 Latest deploy log	https://app.netlify.com/sites/plone-components/deploys/66313ed50e79a90008df2096

[netlify]

✅ Deploy Preview for volto canceled.

Name	Link
🔨 Latest commit	568ea19
🔍 Latest deploy log	https://app.netlify.com/sites/volto/deploys/66313ed59304f10008c7f97f

[ichim-david]

@JeffersonBledsoe I've been busy with work, I hope to look tomorrow morning at this fix, I know of the problem so I am hopeful to test your fix :)

[sneridagh]

@ichim-david if you have a moment, please take a look at this one, please!

[ichim-david]

@ichim-david if you have a moment, please take a look at this one, please!

@sneridagh tomorrow morning, I've been distracted tonight with giving my feedback on this other issue #5929 (review)

[ichim-david]

@JeffersonBledsoe @sneridagh these changes do improve the navigation but more so for the VoiceOver on Mac.
I suggest Jeff you add tabIndex={-1} also on skiplinks otherwise it won't interact properly with it.
See these 2 videos where I tab and use voiceOver and you will see it doesn't select it after using the landmark option.

skiplinks-without-tabindex.mp4

And this is with tabIndex

skiplinks-with-tabindex.mp4

There are still several things I don't like about our current skiplink story but this is another issue to add.

These issues are:

• Go to main content is #view and that is not found on /contents or /edit .. I would add #main to the main tag and modify the skiplink to go there
• The skiplink should be moved outside of the content area before the toolbar so that it is the first thing you focus on when you hit tab otherwise this isn't a proper skiplink
• There is a problem with main section that I can trigger even on apple.com where the focus jumps from the main area to the area before it and can be seen even in my video demos

[ichim-david]

@JeffersonBledsoe if you add it also on skiplinks this is a good change to have and improves our screen reader navigation story

[JeffersonBledsoe]

@ichim-david You mean add the tabindex to the nav element containing our skip links right?
I agree I think a few things needs a bit of a rethink long-term

[ichim-david]

@ichim-david You mean add the tabindex to the nav element containing our skip links right? I agree I think a few things needs a bit of a rethink long-term

@JeffersonBledsoe I mean here https://github.com/plone/volto/blob/main/packages/volto/src/components/theme/SkipLinks/SkipLinks.jsx#L26

Also if we add a tab index = 0 on the first heading and on the breadcrumbs then it landmark navigation will function properly.

Have a look at this video where I have them enabled and then toward the end I removed the tab index I've added on the devtools and you will see how it behaves.

tabindex-breadcrumbs-heading.mp4

[sneridagh]

@JeffersonBledsoe @ichim-david status?

[ichim-david]

@sneridagh I had some ideas of further improvements but they can come in a future pull request, it can be merged from my point of view. @JeffersonBledsoe unless you have something more to add I think we can merge it right?

[sneridagh]

@JeffersonBledsoe @ichim-david merging then!