[508-defect-4]`va-on-this-page` focus for iOS VoiceOver

[Mottie]

Description

When a link within the va-on-this-page web component is used on iOS VoiceOver on safari, the page scrolls to the h2 with the matching text/ID, but focus is not shifted to the On this page heading.

This is a VoiceOver specific bug as documented in webkit bugzilla.

Adding a tabindex="-1" and then removing the tabindex the moment the focus moves away may be worth exploring as a fix.

RPReplay_Final1653488280.MP4

cc: @joshkimux

Tasks

• Check and add tabindex="-1" to the target header to allow focus
• Remove tabindex the moment focus moves away to mitigate undesired outcomes
• Add tests
• Check fix with VoiceOver on Safari (Version 11)

Definition of done

• All tasks complete
• All tests passing

[joshkimux]

@Mottie made some modifications to the ticket upon a deeper dive into the issue! @jaredcunha I think I saw your name floating around a11y slack around this; would love your review here too.

[Mottie]

@joshkimux The code you shared that removes the tabindex on blur hasn't been updated in 6 years. Is it okay to remove the tabindex? What if it was intentionally set before for some interaction? It's something to think about.

[joshkimux]

Great point! We should definitely look into this more

[joshkimux]

Coming back to this, I think after our conversation with @jaredcunha we confirmed that we want to move forward with this approach 🥳

[joshkimux]

Another instance of this caught in rated disabilities audit:

RPReplay_Final1657547531.MP4