Screen Reader: Profile Subsections: Incorrect focus movement after requesting new OTP code

[elisenwazuoke]

Action Performed:

Precondition: User is logged in

1. Using TalkBack on Android, open the app
2. Swipe right to focus the Account tab and double-tap to activate it
3. Swipe right to focus the Profile button and double-tap to activate it
4. Swipe right to focus the Contact methods menu item and double-tap to activate it
5. Swipe right to focus an email address that requires verification and double-tap to activate it
6. Swipe right to focus the "Didn't receive a code?" button and double-tap to activate it
7. Note where the focus lands

This is a global issue occurring in all OTP screens.

Other Occurrences:

1. Profile > Contact methods > Unverified email: focus resets to the Back button when "Request code in 00:xx" changes to "Didn't receive a magic code?"

Expected Result:

After requesting a new OTP code, focus should move to the first OTP cell so users can enter the new code.

Actual Result:

Focus resets to the Back button instead.
Users lose context and must manually navigate to the OTP field again.

Area issue was found in:

Profile Subsections

Failed WCAG checkpoints

WCAG 2.4.3 Focus Order
https://www.w3.org/WAI/WCAG22/Understanding/focus-order

User impact:

People with mobility impairments who must rely on keyboard access for operating a page benefit from a logical, usable focus order. People with vision impairments or disabilities that make reading difficult can become disoriented when tabbing takes focus someplace unexpected or when they cannot easily find the content surrounding an interactive element. Only a small portion of the page may be visible to an individual using a screen magnifier at a high level of magnification. Such a user may interpret a field in the wrong context if the focus order is not logical.

Suggested resolution:

Set focus to the first OTP field programmatically after requesting a new code.
https://reactnative.dev/docs/accessibilityinfo#setaccessibilityfocus
https://appt.org/en/docs/react-native/samples/accessibility-focus

Environment(s)

Samsung Galaxy Note10 Plus - Android 12, H0T Mobile - Native (No mobile browser)

Screenshots/Videos

Bug7008083_1763623763234.Incorrect_focus_movement_after_requesting_new_OTP_code.mp4

Version Number: Production
Reproducible in staging?: NA
Reproducible in production?: Yes
Email or phone of affected tester (no customers): NA
Logs: https://stackoverflow.com/c/expensify/questions/4856 NA
Notes/Photos/Videos: Any additional supporting documentation Yes
Expensify/Expensify Issue URL: https://platform.applause.com/company/12102/products/36628/community-issues/7008083
Issue reported by: NA
Slack conversation: NA

[melvin-bot]

This issue has not been updated in over 15 days. eroding to Monthly issue.

P.S. Is everyone reading this sure this is really a near-term priority? Be brave: if you disagree, go ahead and close it out. If someone disagrees, they'll reopen it, and if they don't: one less thing to do!

[vildanL]

Proposal

Please re-state the problem that we are trying to solve in this issue.
When a user requests or resends a new OTP/magic code in the validate-code form, the text input is cleared but focus is lost, jumping to the Back button instead of remaining on the OTP input field. This breaks keyboard flow and manual typing accessibility for users entering a new code.
Expected behavior: After requesting a new OTP code, focus should remain or be restored to the first OTP cell so users can immediately begin entering the new code.
 Actual behavior: Focus resets to the Back button, forcing users to manually navigate back to the code input.
What is the root cause of that problem?
The focus logic currently only runs on screen navigation via useFocusEffect. When a new code is requested, the OTP input is cleared but we never explicitly focus it again — so keyboard focus stays unchanged and often lands on the fallback (Back button). The lack of an explicit focus call after clearing the input is the root cause.
What changes do you think we should make in order to solve the problem?
To fix this:
After clearing the OTP input (both on resend and after backend success), call inputValidateCodeRef.current?.focus() so focus moves to the first cell.
Use the same delay logic already present in the component (CONST.ANIMATED_TRANSITION) to avoid interfering with animations (e.g., RHP slideouts).
Add tests that verify focus behavior both on mobile (including mobile Safari) and web to prevent regressions.
This ensures that after a code is resent or initially sent, the user’s cursor is immediately in the correct input, and keyboard users retain context.
What alternative solutions did you explore? (Optional)
We considered leaving focus entirely to the OS/browser, but because the input is programmatically cleared (which may blur), this approach is unreliable, especially on web and in modal/RHP flows. Explicit focus is the most predictable user experience.

[melvin-bot]

This issue has not been updated in over 14 days. eroding to Weekly issue.

[rushatgabhane]

done in #79232