[Hold on #33725][$250] Keyboard Navigation: Paid expense details: The content is focused in a confusing order #76923
Description
Action Performed:
Prerequisites:
- the user is signed in
- Using Chrome+JAWS, open the URL: https://new.expensify.com/
- Navigate using the tab key to the Create expense button on the Left side navigation and press Enter to activate it.
- Tab to focus on the Currency field and enter an amount(eg, 250) and activate the Next button.
- In the Confirm dialog, Tab to focus on the Merchant button and press Enter to activate it.
- Tab to focus on the Edit field and enter the Merchant name, and save it.
- Tab to focus on the Create expense button and press Enter to activate it.
- In the Inbox tab, focus on the created expense message and activate it.
- Tab to focus on one of the create expense reports and press Enter to activate it.
- In the Paid expense modal, navigate using the tab key and observe the keyboard focus.
Expected Result:
Focus order should follow a logical and meaningful sequence, consistent with the visual layout and reading order. The chevron buttons should receive focus before the elements below them.
Actual Result:
When navigating through the Paid Expense Details section using a keyboard, the focus moves to the elements at the bottom of the section before moving to the buttons with chevrons located above. This creates a confusing and illogical reading and navigation order for keyboard users.
HTML:
User impact:
A meaningful sequence that matches a logical reading order helps people who rely on assistive technologies that read content aloud. The meaning evident in the sequencing of the information in the default presentation will be the same when the content is presented in spoken form.
Suggested resolution:
Ensure the DOM order matches the visual order of elements.
https://www.w3.org/WAI/WCAG21/Techniques/css/C27
Environment(s)
Windows Windows 11 - Firefox
Screenshots/Videos
Bug7000215_1762841075557.SR-Paid_expense_details-The_content_is_focusing_in_a_confusing_order.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/7000215
Issue reported by: NA
Slack conversation: NA
Upwork Automation - Do Not Edit
- Upwork Job URL: https://www.upwork.com/jobs/~022009685498479613581
- Upwork Job ID: 2009685498479613581
- Last Price Increase: 2026-01-09