[$500] Keyboard Navigation: Many Pages: The focus is lost and does not return to triggering element

[nbhardwaj-del]

Action Performed:

Prerequisite:

• The user is logged in

1. Using Windows + Chrome, open the page https://new.expensify.com/settings/about
2. Navigate using TAB to the 'App download links' button, press enter to activate
3. Navigate to the 'Back' button using TAB, press enter to activate
4. Observe the focus behavior

Other Occurrences:

1. On Settings - About - Keyboard Shortcuts
2. On Settings - Save the world - I know a teacher
3. On Settings - Save the world - I am a teacher
4. On Settings - Save the world - Intro your school principal
5. On Settings - Preferences - Language
6. On Settings - Preferences - Priority mode
7. On Settings - Security
8. On Settings - Security - Validate your account
9. On Settings - Security - Close account
10. On Settings - Security - Two-factor authentication
11. On Settings - Profile - Display name
12. On Settings - Profile - Contact methods
13. On Settings - Profile - Pronouns
14. On Settings - Profile - Share Code
15. On Settings - Profile - Legal Name
16. On Settings - Profile - DOB
17. On Settings - Profile - Phone number
18. On Settings - Profile - Address
19. On Settings - Profile - Country
20. On Workspaces - Duplicate Workspaces
21. On Workspaces - Delete Workspace
22. On Workspaces - Overview - Workspace Name
23. On Workspaces - Overview - Expensify Policy
24. On Workspace - Categories - Add Category
25. On Workspace - Categories - Settings
26. On Workspace - Workflows - Edit Approval Workflow
27. On Workspace - Workflows - Expenses From
    28: On Workspace - Workflows - Approver
28. On Workspace - Rules - Cash Expense Default
29. On Workspaces - Distance Rates - Rate Details
30. On Workspaces - Expensify Card - Add bank account
31. On Workspaces - Expensify Card - Bank info
32. On Workspaces - Expensify Card - Confirm currency and country
33. On Workspace - Company Card - Add Cards
34. On Workspace - Create Workspace - Confirm Workspace
35. On Workspace - Create Workspace - Invite new members
36. On Workspace - Create Workspace - Default Currency
37. On Create Report - Restricted
38. On Create Report - Add payment card
39. On Create Report - Change payment currency
40. On Track Distance
41. On Track Distance - Choose Recipient
42. On Send Invoice
43. On Wallet - Add bank account
44. On Create Expense flow
45. On Paid Expense details flow
46. On Reports flow
47. On Chat flow

Expected Result:

When users activate the 'Back' button, focus should return to the element that triggered the navigation — in this case, the 'App download links' button — to ensure a predictable and logical focus order.

Actual Result:

When users activate the 'Back' button on the 'App download links' menu, the focus is lost and does not return to the triggering element, the 'App download links' button. Users must hit TAB again to regain focus, which is set to the first element of the page, forcing the user to re-navigate through the content

HTML:

<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" viewBox="0 0 20 20" width="20" height="20" hovered="false" pressed="false" fill="#A2A9A3">

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:

Programmatically set focus to the 'App download links' button after the user returns to the previous view using the Back button. This can be achieved using JavaScript.
https://www.sitepoint.com/learning-to-focus/
https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/examples/dialog/

Environment(s)

Windows Windows 10 - Chrome

Screenshots/Videos

Bug6997193_1762530507730.Focus_is_lost_after_triggering_the__back__button.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/6997193
Issue reported by: NA
Slack conversation: NA

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~022009685536746975038
• Upwork Job ID: 2009685536746975038
• Last Price Increase: 2026-01-14

Issue Owner

Current Issue Owner: @TaduJR

[mavrickdeveloper]

PROPOSAL

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

When navigating to the switch, the screen reader announces it as “Track tax”, which does not accurately describe the control’s actual purpose or visible label. This can confuse users relying on assistive technologies.

What is the root cause of that problem?

the real question : Why It was set to false in first place

PR #49240 (merged Sep 24, 2024) fixed Issue #46109 ,a blue frame appearing around the + button when opening a URL in a new browser tab

The previous implementation:

setReturnFocus: (element) => {
    if (document.activeElement && document.activeElement !== document.body) {
        return false;
    }
    return element;
},

This was an over-correction,The two scenarios require different handling:

Scenario	Expected Behavior
Initial page load (new tab)	Don't restore focus (avoid blue frame)
Navigation back (same session)	Restore focus to triggering element

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

Differentiate between initial load and in-app navigation:

File	Change
src/components/FocusTrap/FocusTrapForScreen/index.web.tsx	Update onActivate and setReturnFocus in focusTrapOptions
src/components/FocusTrap/FocusTrapForScreen/FocusTrapProps.ts	No changes needed (props already support focusTrapOptions override)

Ref :

App/src/components/FocusTrap/FocusTrapForScreen/index.web.tsx

Lines 43 to 57 in d34df44

	focusTrapOptions={{
	onActivate: () => {
	const activeElement = document?.activeElement as HTMLElement;
	if (activeElement?.nodeName === CONST.ELEMENT_NAME.INPUT || activeElement?.nodeName === CONST.ELEMENT_NAME.TEXTAREA) {
	return;
	}
	activeElement?.blur();
	},
	trapStack: sharedTrapStack,
	allowOutsideClick: true,
	fallbackFocus: document.body,
	delayInitialFocus: CONST.ANIMATED_TRANSITION,
	initialFocus: false,
	setReturnFocus: false,
	...(focusTrapSettings?.focusTrapOptions ?? {}),

Proposed fix: Context-Aware setReturnFocus

The fix should differentiate between:
-Initial page load (new tab/direct URL) /don't restore focus
-Trap deactivation from navigation / restore focus to triggering element

Complete replacement for src/components/FocusTrap/FocusTrapForScreen/index.web.tsx:

import {useIsFocused, useRoute} from '@react-navigation/native';
import {FocusTrap} from 'focus-trap-react';
import React, {useMemo, useRef} from 'react';
import sharedTrapStack from '@components/FocusTrap/sharedTrapStack';
import TOP_TAB_SCREENS from '@components/FocusTrap/TOP_TAB_SCREENS';
import WIDE_LAYOUT_INACTIVE_SCREENS from '@components/FocusTrap/WIDE_LAYOUT_INACTIVE_SCREENS';
import useResponsiveLayout from '@hooks/useResponsiveLayout';
import {isSidebarScreenName} from '@libs/Navigation/helpers/isNavigatorName';
import CONST from '@src/CONST';
import type FocusTrapProps from './FocusTrapProps';

function FocusTrapForScreen({children, focusTrapSettings}: FocusTrapProps) {
    const isFocused = useIsFocused();
    const route = useRoute();
    const {shouldUseNarrowLayout} = useResponsiveLayout();

    // Track if this trap was activated via navigation (not initial page load)
    const wasActivatedViaNavigation = useRef(false);
    // Track the element that had focus before this trap activated
    const previouslyFocusedElement = useRef<HTMLElement | null>(null);

    const isActive = useMemo(() => {
        if (typeof focusTrapSettings?.active !== 'undefined') {
            return focusTrapSettings.active;
        }
        // Focus trap can't be active on sidebar screens because it would block access to the tab bar.
        if (isSidebarScreenName(route.name)) {
            return false;
        }

        // in top tabs only focus trap for currently shown tab should be active
        if (TOP_TAB_SCREENS.find((screen) => screen === route.name)) {
            return isFocused;
        }

        // Focus trap can't be active on these screens if the layout is wide because they may be displayed side by side.
        if (WIDE_LAYOUT_INACTIVE_SCREENS.includes(route.name) && !shouldUseNarrowLayout) {
            return false;
        }
        return isFocused;
    }, [isFocused, shouldUseNarrowLayout, route.name, focusTrapSettings?.active]);

    return (
        <FocusTrap
            active={isActive}
            paused={!isFocused}
            containerElements={focusTrapSettings?.containerElements?.length ? focusTrapSettings.containerElements : undefined}
            focusTrapOptions={{
                onActivate: () => {
                    const activeElement = document?.activeElement as HTMLElement;

                    // Capture the currently focused element BEFORE blurring
                    // Only capture if it's a meaningful element (not body)
                    if (activeElement && activeElement !== document.body) {
                        previouslyFocusedElement.current = activeElement;
                        wasActivatedViaNavigation.current = true;
                    } else {
                        // This is likely an initial page load scenario
                        previouslyFocusedElement.current = null;
                        wasActivatedViaNavigation.current = false;
                    }

                    // Blur non-input elements as before
                    if (activeElement?.nodeName !== CONST.ELEMENT_NAME.INPUT &&
                        activeElement?.nodeName !== CONST.ELEMENT_NAME.TEXTAREA) {
                        activeElement?.blur();
                    }
                },
                trapStack: sharedTrapStack,
                allowOutsideClick: true,
                fallbackFocus: document.body,
                delayInitialFocus: CONST.ANIMATED_TRANSITION,
                initialFocus: false,
                setReturnFocus: (triggerElement) => {
                    // Don't restore focus if this was an initial page load (not navigation)
                    if (!wasActivatedViaNavigation.current) {
                        return false;
                    }

                    // Don't steal focus from input/textarea
                    const currentActive = document.activeElement as HTMLElement;
                    if (currentActive?.nodeName === CONST.ELEMENT_NAME.INPUT ||
                        currentActive?.nodeName === CONST.ELEMENT_NAME.TEXTAREA) {
                        return false;
                    }

                    // If we have a previously focused element that still exists in DOM, use it
                    if (previouslyFocusedElement.current &&
                        document.body.contains(previouslyFocusedElement.current)) {
                        return previouslyFocusedElement.current;
                    }

                    // Fallback: use the element provided by focus-trap
                    return triggerElement;
                },
                ...(focusTrapSettings?.focusTrapOptions ?? {}),
            }}
        >
            {children}
        </FocusTrap>
    );
}

FocusTrapForScreen.displayName = 'FocusTrapForScreen';

export default FocusTrapForScreen;

Context &Related issues

• #46109 - Blue frame on new tab (original reason for setReturnFocus: false)
• #76921 - Focus lost on back navigation (current issue)
• PR #49240 - PR that introduced setReturnFocus: false

[melvin-bot]

8 days overdue is a lot. Should this be a Weekly issue? If so, feel free to change it!

[melvin-bot]

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

[melvin-bot]

This issue has not been updated in over 14 days. eroding to Weekly issue.