Bug 263069

Created attachment 468186 [details]
Screen recording of focus bug reproduction

When navigating in a multi-step UI, where currently focused element disappears when navigating between steps, the VoiceOver cursor & browser focus jumps to the "closest" element after a brief moment, even when forcing focus on another element via HTMLElement.focus().

Steps to reproduce:
1. Open https://f76xpz.csb.app/ on iOS with VoiceOver. Open console to view logs.
2. Click on "Next step" button"
3. Observe focus being set on "Previous step" button and then jumping to "Save and continue" a few milliseconds later.

Expected result: Focus should get set and remain on "Previous step" button

Actual result: Focus gets set on "Previous step", but then jumps on "Save and continue".

I'm assuming VoiceOver always needs to have a focus on an element, so when the currently focused element disappears, VoiceOver focuses the element "closest" to the position where the focused element was. However, this happens after a brief delay, so even if you set the focus manually on another element, VoiceOver overrides it.

It is important to respect the HTMLElement.focus() in order to comply with WCAG 2.1 Standard Focus Order success criterion: https://www.w3.org/TR/WCAG21/#focus-order

The issue is not reproducible on Mac VoiceOver. Setting tabIndex on "Previous step" button does not change the behaviour in any way.