[Due for payment 2026-05-29] Other A11y: Sign in: The language selection dropdown has no visible label

[elisenwazuoke]

Action Performed:

Prerequisites:

• the user is not signed in

1. Open the Expensify app
2. Note how the language selector is displayed in the footer area.

Expected Result:

The control should have a persistently visible label, e.g.:

• 'select language'

Actual Result:

The dropdown button has no visible label provided.

Area issue was found in:

Where did we find this issue?

Failed WCAG checkpoints

WCAG 3.3.2 Labels or Instructions
https://www.w3.org/WAI/WCAG22/Understanding/labels-or-instructions

User impact:

Providing clear and unambiguous labels and instructions (including examples of expected data formats) helps all users - but particularly those with cognitive, language, and learning disabilities - to enter information correctly and can prevent users from making incomplete or incorrect form submissions.

Suggested resolution:

Add a permanently visible label to the control, e.g.:

• 'select language'
  https://www.w3.org/WAI/WCAG22/Understanding/labels-or-instructions

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

Bug7004760_1763194880990.The_language_selection_dropdown_has_no_visible_label.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/7004760
Issue reported by: NA
Slack conversation: NA

Issue Owner

Current Issue Owner: @jayeshmangwani

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

[ChavdaSachin]

Proposal

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

Sign in: The language selection dropdown has no visible label

What is the root cause of that problem?

We haven't added the accessibility label to the localePicker here

App/src/components/LocalePicker.tsx

Line 38 in fd10aa2

<Picker

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

Our current Picker component does no accept accessibilityLabel prop so first we have to add support for accessibilityLabel prop on basePicker

App/src/components/Picker/BasePicker.tsx

Line 21 in fd10aa2

function BasePicker<TPickerValue>({

And pass the received accessibilityLabel to this view

App/src/components/Picker/BasePicker.tsx

Line 181 in fd10aa2

<View

Then we could simply pass the accessibilityLabel value from localePicker.

App/src/components/LocalePicker.tsx

Line 38 in fd10aa2

<Picker

AccessibilityLabel={'select language'}

or we could create a translation key if needed.

What alternative solutions did you explore? (Optional)

Reminder: Please use plain English, be brief and avoid jargon. Feel free to use images, charts or pseudo-code if necessary. Do not post large multi-line diffs or write walls of text. Do not create PRs unless you have been hired for this job.

[melvin-bot]

Uh oh! This issue is overdue by 2 days. Don't forget to update your issues!

[melvin-bot]

6 days overdue. This is scarier than being forced to listen to Vogon poetry!

[melvin-bot]

10 days overdue. I'm getting more depressed than Marvin.