SR: Settings - Security: The auto-suggestions are announced without a role

[nbhardwaj-del]

Action Performed

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 Profile button and press Enter to activate it.
4. Navigate to the Pronouns button and press Enter to activate it.
5. In the modal, navigate to the Pronouns Edit field and press Enter to activate it.
6. Type a few characters into the Pronouns input box to trigger the auto-suggestion list.
7. Observe the screen reader announcement for the suggestions.

Other Occurrences:

1. On Workspace - Company cards: the options for countries
2. On Workspace - Create Workspace - Default Currency
3. On Wallet - Add bank account

Expected Result

Each item in the auto-suggestion list should have a programmatic role (such as role="option" within a listbox) to ensure that screen readers announce them correctly as selectable options. Users should clearly understand that these elements can be interacted with or chosen from the list.

Actual Result

When navigating to the pronoun field suggestions, options such as “Call me by my name” are announced without a role. The screen reader only reads the visible text but does not identify the suggestion as a selectable option, causing confusion for users relying on assistive technology.

HTML:

Call me by my name

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

Assign the appropriate ARIA role to auto-suggestion elements.
Eg:

Call me by my name

Refer: https://webaim.org/techniques/aria/

Environment(s)

Windows Windows 11 - Chrome

Bug6994708_1762417002696.SR-_Settings_-_Security-_The_auto-suggestions_are_announced_without_a_role.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/6994708
Issue reported by: NA
Slack conversation: NA

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