Other A11y: Many Pages: Various fields have no visible name to explain their purpose

[nbhardwaj-del]

Action Performed:

Prerequisites:

• The user is signed in.

1. Using Chrome, open the URL - https://new.expensify.com/
2. Navigate to the "+" icon and press Enter
3. Tab to the "Track distance" menu item and press Enter to open the Pop-up
4. Tab to the "Manual" Tab and press Enter to select
5. Observe the input field visually, and there is no visible label provided for the input field

Other Occurrences:

1. On Send Invoice
2. On Create Expense

Expected Result:

Every form field must have a visible text label that clearly explains its purpose, so that the users can understand the purpose and what it describes in the input field, e.g.:

• 'distance' or similar

Actual Result:

The input field has no visible name/label explaining its purpose of the input field; users only see an unlabeled field or placeholder text, as users do not know what information is required.

HTML:

mi

Area issue was found in:

Track Distance

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:

Ensure the field has a visible name to clearly describe its purpose, e.g.:

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

Environment(s)

Windows Windows 11 Home - Chrome

Screenshots/Videos

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/6997043
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!

[rushatgabhane]

fixed by #79239

[MelvinBot]

Bug reproducible - https://platform.applause.com/services/links/v1/external/0b50f8ac4b55f7db076f0a09e15357b472eda7c63322cd9f5c17a45ba7b91127

[rushatgabhane]

asked for confirmation here https://expensify.slack.com/archives/C9YU7BX5M/p1773024499419499?thread_ts=1761671288.437029&cid=C9YU7BX5M

[rushatgabhane]

For the distance one, I do agree that we need to read out the correct label, but can't this be done with a aria-label? We don't need a visible label for it given visually it's on the top of the page, but for screen readers I agree that it's too attached. I'd just put the label as a screen reader only label right before the input?

alright, we've decided that we are gonna keep this accessibilitylabel only and not add form label to the amount input

source: https://expensify.slack.com/archives/C01GTK53T8Q/p1773351708274109?thread_ts=1773346127.842749&cid=C01GTK53T8Q

[rushatgabhane]

@MelvinBot can you spin up web agent and verify that labels for all screens that use this amount input (like track distance, request money etc) have an accessibility label that tells the purpose too for the text input?

[MelvinBot]

I spun up the web app and verified the accessibility labels on all major screens that use the amount input. Here are the results:

Accessibility Label Verification Results

Screen	Input Field	aria-label Value	Status
Create Expense	Amount	"Amount (USD)"	✅ Has descriptive label
Track Distance (Manual)	Distance	"Distance (mile)"	✅ Has descriptive label
Send Invoice	Amount	"Amount (USD)"	✅ Has descriptive label
Split Expense	Amount	"Amount (USD)"	✅ Has descriptive label

All four screens have aria-label attributes on their amount/distance input fields that describe both the purpose and the unit:

• Currency inputs: "Amount (USD)"
• Distance input: "Distance (mile)"

Screenshots

Create Expense:

Track Distance (Manual):

Send Invoice:

Split Expense:

Code References

The accessibility labels come from two components:

• MoneyRequestAmountInput (src/components/MoneyRequestAmountInput.tsx:268) — sets accessibilityLabel={translate('iou.amount')} (${currency}) which renders as "Amount (USD)". Used by Create Expense, Send Invoice, Split Expense, and Tax Amount screens.
• IOURequestStepDistanceManual (src/pages/iou/request/step/IOURequestStepDistanceManual.tsx:352) — passes a custom accessibilityLabel={translate('common.distance')} (${translate('common.${unit}')}) which renders as "Distance (mile)".

Summary: All the main user-facing amount input screens already have accessibility labels that communicate the purpose of the input field. The labels follow a consistent pattern of "[Purpose] ([unit])".