[Due for payment 2026-04-02] [$250] Screen Reader: Settings - Security: The fields of code are not announced

[nbhardwaj-del]

Action Performed

Prerequisites:

• the user is signed in

1. Using Chrome + JAWS, open the URL – https://new.expensify.com/
2. Navigate using the Tab key to the Account button and press Enter to activate it.
3. Navigate using the Tab key to the Security button and press Enter.
4. Navigate to the Two-factor authentication section and press Enter.
5. Enter the verification code that is sent to your registered Email.
6. In the Two-factor authentication modal, fill in the steps and click the Next button.
7. In step 2, press Tab key to focus the 6 fields for the code.
8. Note how each field is announced.

Expected Result

Each input field representing a digit in the six-digit authentication code should be announced with a text field role and a programmatic name, e.g.:

• 'enter digit 1 of 6'
• 'enter digit 2 of 6'
• 'enter digit 3 of 6'
• 'enter digit 4 of 6'
• 'enter digit 5 of 6'
• 'enter digit 6 of 6'

Actual Result
Only the first input field is announced by the screen reader, while subsequent fields have no programmatic name or role announced.

HTML:
<input autocomplete=""one-time-code"" autocorrect=""on"" placeholder="""" maxlength=""6"" autocapitalize=""sentences"" dir=""auto"" inputmode=""numeric"" rows=""1"" spellcheck=""true"" virtualkeyboardpolicy=""auto"" role=""presentation"" class=""css-11aywtz r-6taxm2 r-13awgt0 r-13qz1uu r-1yadl64 r-vzf2wf r-a023e6 r-13uqrnb r-16dba41 r-rjixqe r-gy4na3 r-8b1cjr r-van48c r-fpub7 r-p30vwv r-1j63xyz r-1mdbw0j r-wk8lta r-105ug2t fs-mask"" data-testid=""twoFactorAuthCodeInput"" data-component=""AnimatedComponent"" data-element=""Component"" data-source-file=""createAnimatedComponent.js"" type=""text"" value="""" style=""--placeholderTextColor: #8B9C8F; outline-width: 0px; outline-style: none; box-shadow: none;"">

Area issue was found

Settings-Security

Failed Checkpoint

WCAG 4.1.2 Name, Role, Value
https://www.w3.org/WAI/WCAG22/Understanding/name-role-value

User Impact

Providing role, state, and value information on all user interface components enables compatibility with assistive technology, such as screen readers, screen magnifiers, and speech recognition software, used by people with disabilities.

Suggested Resolution

If each digit is required to be entered into a separate field, use aria-label to announce each field, e.g.:

• 'enter digit 1 of 6'
• 'enter digit 2 of 6'
• 'enter digit 3 of 6'
• 'enter digit 4 of 6'
• 'enter digit 5 of 6'
• 'enter digit 6 of 6'

Otherwise, use a single field for the code and make sure it is associated with its name 'Then enter the six-digit code generated from your authenticator app.'.
https://webaim.org/techniques/forms/controls
https://www.w3.org/WAI/tutorials/forms/labels/

Environment(s)

Windows Windows 11 - Chrome

Screenshots/Videos

Bug6994585_1762333077253.SR-Settings_Security-Code_in_the_input_field_is_not_announced.mp4

Version Number: NA
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/36605/community-issues/6994585
Issue reported by: NA
Slack conversation: NA

Issue Owner

Current Issue Owner: @mallenexpensify

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~022030833795692858129
• Upwork Job ID: 2030833795692858129
• Last Price Increase: 2026-03-26
• Automatic offers:
• aimane-chnaif | Contributor | 110972133

[melvin-bot]

📣 @nbhardwaj-del! 📣
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 📖

[mallenexpensify]

Accessibility issue, will be addressed soon.

[mallenexpensify]

Accessibility, unassigning, will be addressed in bulk once all issues are created.