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[bot]]

✅ Deploy Preview for plone-components canceled.

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

[netlify[bot]]

✅ Deploy Preview for volto canceled.

Name	Link
🔨 Latest commit	568ea19cfcb250a4cbc6bdd45c76a7a5dea6176e
🔍 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 https://github.com/plone/volto/pull/5929#pullrequestreview-2032225984

[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.

https://github.com/plone/volto/assets/152852/9620e6c0-7b22-4f5d-a2b5-3cfc956839cd

And this is with tabIndex

https://github.com/plone/volto/assets/152852/bca13644-428d-4b69-ba8b-370e44434857

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

[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.

https://github.com/plone/volto/assets/152852/efabaa7b-ee01-480e-9758-c71398f7c6b2

[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?