[Due for payment 2026-01-30] Screen Readers: Paid expense details: The button 'back' is announced non-descriptively

[nbhardwaj-del]

Action Performed:

1. Using Chrome+JAWS or NVDA + Firefox, open the URL: https://new.expensify.com/
2. Navigate using the tab key to the Create expense button on the Left side navigation and press Enter to activate it.
3. Tab to focus on the Currency field and enter an amount(eg, 250) and activate the Next button.
4. In the Confirm dialog, Tab to focus on the Merchant button and press Enter to activate it.
5. Tab to focus on the Edit field and enter the Merchant name, and save it.
6. Tab to focus on the Create expense button and press Enter to activate it.
7. In the Inbox tab, focus on the created expense message and activate it.
8. Tab to focus on the More dropdown button and press Enter to activate it.
9. Tab to focus on the Export menu item and press Enter to activate it.
10. In the Export pop-up, navigate to the Back button and observe the screen reader announcement.

Expected Result:

Each button should have a clear, descriptive label that conveys both purpose and direction, such as: “Back to previous screen”, “Export report”. The arrow icon’s purpose (if decorative) should be hidden from assistive technologies using aria-hidden="true", or if meaningful, it should be included in the accessible name.

Actual Result:

When the "exports" button with icon > indicating "back to exports" receives focus, screen readers only announce the text content, "Export", and completely ignore the navigational context provided by the icon. This results in an incomplete and misleading announcement.

HTML:

Export

Area issue was found in:

Paid Expense Details

Failed WCAG checkpoints

WCAG 2.4.6 Headings and Labels
https://www.w3.org/WAI/WCAG22/Understanding/headings-and-labels

User impact:

Descriptive headings are necessary for users who have disabilities that make reading slow and for people with limited short-term memory. These users benefit when section titles make it possible to predict what each section contains. Form input controls with labels that clearly describe the content that is expected to be entered helps users know how to successfully complete the form.

Suggested resolution:

Update the "aria-label" attribute of the button to something descriptive as "back to exports" or something similar.
https://www.w3.org/WAI/ARIA/apg/patterns/button/

Environment(s)

Windows Windows 11 - Firefox

Screenshots/Videos

Bug7000220_1762841535717.SR-Paid_expense_details-Back_button_is_announced_non_descriptively.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/7000220
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!