[Due for payment 2026-04-01] Screen Reader: Many Pages: The user is not informed about displayed time and when it disappears

[elisenwazuoke]

Action Performed:

Prerequisites:

• the user is not signed in

1. Using iOS VoiceOver or Android TalkBack, open the Expensify app
2. Swipe to the 'Phone and email' field
3. Type the valid email address and double-tap to activate
4. Note that the time counter appeared on the screen
5. Note what is announced

Other Occurrences:

1. Onboarding - Verify your email
2. On Profile - Verify Email
3. On Security - Merge Accounts
4. On Security - Merge Accounts - Enter Code

Expected Result:

The displayed time should be announced once it appears, e.g.:

• 'Time remaining: 19 seconds'
  And immediately announce the final status when the timer ends: 'The time has expired'

Actual Result:

The time display changes visually, but VoiceOver remains silent, leaving the user unaware of how much time has passed or when the time limit has passed.

Area issue was found in:

Sign in

Failed WCAG checkpoints

WCAG 4.1.3 Status Messages
https://www.w3.org/WAI/WCAG22/Understanding/status-messages

User impact:

When appropriate roles or properties are assigned to status messages, the new content is spoken by screen readers in such a way as to assist blind and low vision users. Assigning proper roles or properties to status messages provides possible future uses and personalization opportunities, such as the potential to be exploited by assistive technologies created for users with some cognitive disabilities.

Suggested resolution:

Ensure the displayed time is announced once it appears, e.g.:

• 'Time remaining: 19 seconds'
  And immediately announce the final status when the timer ends: 'The time has expired'
  https://appt.org/en/docs/react-native/samples/accessibility-live-region

Environment(s)

Samsung Galaxy S24 Ultra - Android 14, Partner - Native (No mobile browser)
Apple iPhone 11 - iOS 17.5.1, H0T Mobile - Native (No mobile browser)

Screenshots/Videos

Bug7005413_1763278087161.The_user_is_not_informed_about_displayed_time_and_when_it_disappears.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/7005413
Issue reported by: NA
Slack conversation: NA

Issue Owner

Current Issue Owner: @mallenexpensify

[melvin-bot]

📣 @elisenwazuoke! 📣
Please report bugs or suggest features in the #expensify-open-source Slack channel, don't directly open issues in this repo!
Instructions here to join the channel 📖

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

[marufsharifi]

Proposal

Please re-state the problem that we are trying to solve in this issue.

When a verification countdown appears (e.g., Sign In → magic code), screen readers do not announce that the timer has started or when it expires. Users don’t know how much time is left or when the time limit ends.

What is the root cause of that problem?

The countdown UI updates visually, but no screen‑reader announcement is triggered. The timer is rendered as HTML text only, so VoiceOver/TalkBack never receives a status update.

App/src/components/ValidateCodeCountdown/index.tsx

Lines 30 to 36 in 6c1a24c

	return (
	<RenderHTML
	html={translate('validateCodeForm.requestNewCode', {
	timeRemaining: `00:${String(timeRemaining).padStart(2, '0')}`,
	})}
	/>
	);

What changes do you think we should make in order to solve the problem?

Trigger SR announcements at two key moments:

• When the countdown first appears (or resets)
• When it expires

1. Announce countdown start and expiration

diff --git a/src/components/ValidateCodeCountdown/index.tsx b/src/components/ValidateCodeCountdown/index.tsx
index 2f8c0f0cfd3..4c2f8f0b7c8 100644
--- a/src/components/ValidateCodeCountdown/index.tsx
+++ b/src/components/ValidateCodeCountdown/index.tsx
@@ -1,8 +1,8 @@
-import React, {useEffect, useImperativeHandle, useRef, useState} from 'react';
+import React, {useCallback, useEffect, useImperativeHandle, useRef, useState} from 'react';
+import {AccessibilityInfo} from 'react-native';
 import RenderHTML from '@components/RenderHTML';
 import useLocalize from '@hooks/useLocalize';
 import CONST from '@src/CONST';
 import type {ValidateCodeCountdownProps} from './types';
@@
     const [timeRemaining, setTimeRemaining] = useState<number>(CONST.REQUEST_CODE_DELAY);
     const timerRef = useRef<NodeJS.Timeout | undefined>(undefined);
     const previousTimeRemainingRef = useRef<number | null>(null);
 
+    const announce = useCallback((message: string) => {
+        if (typeof AccessibilityInfo?.announceForAccessibility !== 'function') {
+            return;
+        }
+
+        AccessibilityInfo.isScreenReaderEnabled?.().then((enabled) => {
+            if (!enabled) {
+                return;
+            }
+            AccessibilityInfo.announceForAccessibility(message);
+        });
+    }, []);
+
     useEffect(() => {
-        if (timeRemaining > 0) {
-            timerRef.current = setTimeout(() => {
-                setTimeRemaining((prev) => prev - 1);
-            }, 1000);
-        } else {
-            onCountdownFinish();
-        }
-        return () => {
-            clearTimeout(timerRef.current);
-        };
-    }, [onCountdownFinish, timeRemaining]);
-
-    useEffect(() => {
         const previousTimeRemaining = previousTimeRemainingRef.current;
         previousTimeRemainingRef.current = timeRemaining;
 
         if (timeRemaining === CONST.REQUEST_CODE_DELAY && previousTimeRemaining !== CONST.REQUEST_CODE_DELAY) {
             announce(translate('validateCodeForm.timeRemainingAnnouncement', {seconds: timeRemaining}));
         }
 
-        if (timeRemaining === 0 && previousTimeRemaining !== 0) {
-            announce(translate('validateCodeForm.timeExpiredAnnouncement'));
-        }
-    }, [announce, timeRemaining, translate]);
+        if (timeRemaining <= 0) {
+            announce(translate('validateCodeForm.timeExpiredAnnouncement'));
+            onCountdownFinish();
+            return;
+        }
+
+        timerRef.current = setTimeout(() => {
+            setTimeRemaining((prev) => prev - 1);
+        }, 1000);
+
+        return () => {
+            clearTimeout(timerRef.current);
+        };
+    }, [announce, onCountdownFinish, timeRemaining, translate]);

2. New translation strings for announcements

diff --git a/src/languages/en.ts b/src/languages/en.ts
index e9750ea9ad0..a0f3ad4fce7 100644
--- a/src/languages/en.ts
+++ b/src/languages/en.ts
@@
     validateCodeForm: {
         magicCodeNotReceived: "Didn't receive a magic code?",
         enterAuthenticatorCode: 'Please enter your authenticator code',
         enterRecoveryCode: 'Please enter your recovery code',
         requiredWhen2FAEnabled: 'Required when 2FA is enabled',
         requestNewCode: ({timeRemaining}: {timeRemaining: string}) => `Request a new code in <a>${timeRemaining}</a>`,
+        timeRemainingAnnouncement: ({seconds}: {seconds: number}) => `Time remaining: ${seconds} ${seconds === 1 ? 'second' : 'seconds'}`,
+        timeExpiredAnnouncement: 'The time has expired',
         requestNewCodeAfterErrorOccurred: 'Request a new code',

---

Video demo of the fix:

time-announces.mp4

What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?

None

What alternative solutions did you explore? (Optional)