You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Navigate using TAB to the 'App download links' button, press enter to activate
When the modal opens on the right side of the page, use the down arrow key to navigate through the layout
Observe the focus behavior
Other Occurrences:
On Settings - About - Keyboard Shortcuts
On Settings - Save the world - I know a teacher
On Settings - Save the world - I am a teacher
On Settings - Save the world - Intro your school principal
On Settings - Preferences - Language
On Settings - Preferences - Priority mode
On Settings - Security
On Settings - Security - Validate your account
On Settings - Security - Close account
On Settings - Security - Two-factor authentication
On Settings - Profile - Display name
On Settings - Profile - Contact methods
On Settings - Profile - Pronouns
On Settings - Profile - Share Code
On Settings - Profile - Legal Name
On Settings - Profile - DOB
On Settings - Profile - Phone number
On Settings - Profile - Address
On Settings - Profile - Country
On Workspaces - Duplicate Workspaces
On Workspaces - Delete Workspace
On Workspaces - Overview - Workspace Name
On Workspaces - Overview - Expensify Policy
On Workspace - Categories - Add Category
On Workspace - Categories - Settings
On Workspace - Workflows - Edit Approval Workflow
On Workspace - Workflows - Expenses From
28: On Workspace - Workflows - Approver
On Workspace - Rules - Cash Expense Default
On Workspaces - Distance Rates - Rate Details
On Workspaces - Expensify Card - Add bank account
On Workspaces - Expensify Card - Bank info
On Workspaces - Expensify Card - Confirm currency and country
On Workspace - Company Card - Add Cards
On Workspace - Create Workspace - Confirm Workspace
On Workspace - Create Workspace - Invite new members
On Workspace - Create Workspace - Default Currency
On Create Report - Restricted
On Create Report - Add payment card
On Create Report - Change payment currency
On Track Distance
On Track Distance - Choose Recipient
On Send Invoice
On Wallet - Add bank account
On Create Expense flow
On Paid Expense details flow
On Reports flow
On Chat flow
Expected Result:
The focus should be trapped inside the opened layout; the background elements should not receive the focus.
Actual Result:
When users navigate through the App download links menu using the arrow keys, focus moves from the last item in the menu (the macOS link) onto the background page, the 'Expensify' logo, then onto the left navigation panel (Inbox, Reports, Workspaces, etc.)
HTML:
App download links
## Workaround:
Can the user still use Expensify without this being fixed? Have you informed them of the workaround?
People with mobility impairments who must rely on keyboard access for operating a page benefit from a logical, usable focus order. People with vision impairments or disabilities that make reading difficult can become disoriented when tabbing takes focus someplace unexpected or when they cannot easily find the content surrounding an interactive element. Only a small portion of the page may be visible to an individual using a screen magnifier at a high level of magnification. Such a user may interpret a field in the wrong context if the focus order is not logical.
Action Performed:
Prerequisite:
User is logged in
Other Occurrences:
28: On Workspace - Workflows - Approver
Expected Result:
The focus should be trapped inside the opened layout; the background elements should not receive the focus.
Actual Result:
When users navigate through the App download links menu using the arrow keys, focus moves from the last item in the menu (the macOS link) onto the background page, the 'Expensify' logo, then onto the left navigation panel (Inbox, Reports, Workspaces, etc.)
HTML:
Area issue was found in:
Settings-About
Failed WCAG checkpoints
WCAG 2.4.3 Focus Order
https://www.w3.org/WAI/WCAG22/Understanding/focus-order
User impact:
People with mobility impairments who must rely on keyboard access for operating a page benefit from a logical, usable focus order. People with vision impairments or disabilities that make reading difficult can become disoriented when tabbing takes focus someplace unexpected or when they cannot easily find the content surrounding an interactive element. Only a small portion of the page may be visible to an individual using a screen magnifier at a high level of magnification. Such a user may interpret a field in the wrong context if the focus order is not logical.
Suggested resolution:
Ensure focus remains within the layout.
https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/
Environment(s)
Windows Windows 10 - Chrome
Screenshots/Videos
Bug6999573_1762788872741.Focus_is_not_contained_within_app_download_link_menu.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/6999573
Issue reported by: NA
Slack conversation: NA
Upwork Automation - Do Not Edit
Issue Owner
Current Issue Owner: @eVoloshchak