[Due for payment 2026-02-17] [$250] [A11y] - Screen reader - Account tab is read as "Settings, button" instead of "Account, tab"

[mitarachim]

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

---

Version Number: 9.3.6-0
Reproducible in staging?: Yes
Reproducible in production?: Yes
If this was caught during regression testing, add the test name, ID and link from BrowserStack: #79147
Email or phone of affected tester (no customers): applausetester+210102abc@applause.expensifail.com
Issue reported by: Applause Internal Team
Bug source: Pull Request QA execution
Device used: Mac 26.1 / Chrome
App Component: Workspace Settings

Action Performed:

Precondition:

• Screen reader (Voiceover, Narrator or Talkback) is enabled.

1. Go to staging.new.expensify.com
2. Click on Inbox, Reports, Workspaces and Account tab.

Expected Result:

Account tab will be read as "Account, tab".

Actual Result:

Account tab is read as "Settings, button" instead of "Account, tab".

Workaround:

Unknown

Platforms:

• Android: App
• Android: mWeb Chrome
• iOS: App
• iOS: mWeb Safari
• iOS: mWeb Chrome
• Windows: Chrome
• MacOS: Chrome / Safari

Screenshots/Videos

Bug7055359_1769068923765.10.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~022014399082636051467
• Upwork Job ID: 2014399082636051467
• Last Price Increase: 2026-01-22

Issue Owner

Current Issue Owner: @brianlee-expensify

[melvin-bot]

Triggered auto assignment to @brianlee-expensify (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details. Please add this bug to a GH project, as outlined in the SO.

[daledah]

Proposal

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

When using a screen reader (VoiceOver, Narrator, or TalkBack), the Account tab in the navigation bar is announced as "Settings, button" instead of "Account, tab" like the other tabs (Inbox, Reports, Workspaces).

What is the root cause of that problem?

In NavigationTabBarAvatar.tsx, the Account tab has incorrect accessibility properties:

App/src/pages/home/sidebar/NavigationTabBarAvatar.tsx

Lines 68 to 86 in c9e36d3

	return (
	<PressableWithFeedback
	onPress={onPress}
	role={CONST.ROLE.BUTTON}
	accessibilityLabel={translate('sidebarScreen.buttonMySettings')}
	wrapperStyle={styles.flex1}
	style={({hovered}) => [style, hovered && styles.navigationTabBarItemHovered]}
	sentryLabel={CONST.SENTRY_LABEL.NAVIGATION_TAB_BAR.ACCOUNT}
	>
	{({hovered}) => (
	<>
	{renderAvatar(isSelected || hovered)}
	<Text style={[styles.textSmall, styles.textAlignCenter, isSelected ? styles.textBold : styles.textSupporting, styles.mt0Half, styles.navigationTabBarLabel]}>
	{translate('initialSettingsPage.account')}
	</Text>
	</>
	)}
	</PressableWithFeedback>
	);

1. Wrong role: Uses role={CONST.ROLE.BUTTON} instead of role={CONST.ROLE.TAB}
2. Wrong accessibilityLabel: Uses accessibilityLabel={translate('sidebarScreen.buttonMySettings')} which translates to "Settings" instead of using translate('initialSettingsPage.account') which would say "Account"
3. Missing accessibilityState: The component doesn't have accessibilityState={{selected: isSelected}} like the other tabs

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

Update NavigationTabBarAvatar.tsx to use consistent accessibility properties with the other tabs:

const accountAccessibilityState = useMemo(() => ({selected: isSelected}), [isSelected]);

return (
    <PressableWithFeedback
        onPress={onPress}
        role={CONST.ROLE.TAB}
        accessibilityLabel={translate('initialSettingsPage.account')}
        accessibilityState={accountAccessibilityState}
        aria-selected={!!item.isSelected}
        wrapperStyle={styles.flex1}
        style={({hovered}) => [style, hovered && styles.navigationTabBarItemHovered]}
        sentryLabel={CONST.SENTRY_LABEL.NAVIGATION_TAB_BAR.ACCOUNT}
    >
        {/* ... */}
    </PressableWithFeedback>
);

What alternative solutions did you explore? (Optional)

[abbasifaizan70]

Proposal

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

When using a screen reader (VoiceOver on iOS, Narrator on Windows, or TalkBack on Android) on staging.new.expensify.com, the Account tab in the bottom navigation bar is being announced incorrectly as "Settings, button" instead of "Account, tab". This creates confusion for users relying on assistive technologies, as the announced text doesn't match the visible label and uses the wrong semantic role.

---

What is the root cause of that problem?

The issue is in the NavigationTabBarAvatar component where two accessibility properties are incorrectly configured:

File: App/src/pages/home/sidebar/NavigationTabBarAvatar.tsx

App/src/pages/home/sidebar/NavigationTabBarAvatar.tsx

Lines 68 to 86 in 3779ccf

	return (
	<PressableWithFeedback
	onPress={onPress}
	role={CONST.ROLE.BUTTON}
	accessibilityLabel={translate('sidebarScreen.buttonMySettings')}
	wrapperStyle={styles.flex1}
	style={({hovered}) => [style, hovered && styles.navigationTabBarItemHovered]}
	sentryLabel={CONST.SENTRY_LABEL.NAVIGATION_TAB_BAR.ACCOUNT}
	>
	{({hovered}) => (
	<>
	{renderAvatar(isSelected || hovered)}
	<Text style={[styles.textSmall, styles.textAlignCenter, isSelected ? styles.textBold : styles.textSupporting, styles.mt0Half, styles.navigationTabBarLabel]}>
	{translate('initialSettingsPage.account')}
	</Text>
	</>
	)}
	</PressableWithFeedback>
	);

1. Incorrect ARIA role (Line 71): The component uses role={CONST.ROLE.BUTTON} instead of role={CONST.ROLE.TAB}. This causes screen readers to announce it as a "button" rather than a "tab", which is semantically incorrect since it's part of a tab navigation system.

2. Mismatched accessibility label (Line 72): The component uses accessibilityLabel={translate('sidebarScreen.buttonMySettings')} which translates to "My settings", but the visible text on the tab (Line 81) displays translate('initialSettingsPage.account') which is "Account".

For comparison, the other navigation tabs (Inbox, Reports, Workspaces) are correctly configured in App/src/components/Navigation/NavigationTabBar/index.tsx:

App/src/components/Navigation/NavigationTabBar/index.tsx

Lines 411 to 447 in 3779ccf

	chatTabBrickRoad={chatTabBrickRoad}
	/>
	)}
	<View
	style={styles.navigationTabBarContainer}
	testID="NavigationTabBar"
	>
	<PressableWithFeedback
	onPress={navigateToChats}
	role={CONST.ROLE.TAB}
	accessibilityLabel={translate('common.inbox')}
	accessibilityState={inboxAccessibilityState}
	wrapperStyle={styles.flex1}
	style={styles.navigationTabBarItem}
	sentryLabel={CONST.SENTRY_LABEL.NAVIGATION_TAB_BAR.INBOX}
	>
	<View>
	<Icon
	src={expensifyIcons.Inbox}
	fill={selectedTab === NAVIGATION_TABS.HOME ? theme.iconMenu : theme.icon}
	width={variables.iconBottomBar}
	height={variables.iconBottomBar}
	/>
	{!!chatTabBrickRoad && (
	<View
	style={[
	styles.navigationTabBarStatusIndicator,
	styles.statusIndicatorColor(chatTabBrickRoad === CONST.BRICK_ROAD_INDICATOR_STATUS.INFO ? theme.iconSuccessFill : theme.danger),
	]}
	/>
	)}
	</View>
	<Text
	numberOfLines={1}
	style={[
	styles.textSmall,
	styles.textAlignCenter,

<PressableWithFeedback
    onPress={navigateToChats}
    role={CONST.ROLE.BUTTON}  // ✅ Correct for button-like behavior
    accessibilityLabel={translate('common.inbox')}  // ✅ Matches visible text
    wrapperStyle={styles.flex1}
    style={styles.navigationTabBarItem}
    sentryLabel={CONST.SENTRY_LABEL.NAVIGATION_TAB_BAR.INBOX}
>
    {/* Icon and Text components */}
    <Text>{translate('common.inbox')}</Text>  // ✅ Same translation key
</PressableWithFeedback>

Note: While other tabs use CONST.ROLE.BUTTON, they should ideally use CONST.ROLE.TAB as well for proper semantic meaning. However, the Account tab has the additional issue of a mismatched label.

---

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

Update the NavigationTabBarAvatar component to use the correct ARIA role and accessibility label.

File: App/src/pages/home/sidebar/NavigationTabBarAvatar.tsx

App/src/pages/home/sidebar/NavigationTabBarAvatar.tsx

Lines 68 to 76 in 3779ccf

	return (
	<PressableWithFeedback
	onPress={onPress}
	role={CONST.ROLE.BUTTON}
	accessibilityLabel={translate('sidebarScreen.buttonMySettings')}
	wrapperStyle={styles.flex1}
	style={({hovered}) => [style, hovered && styles.navigationTabBarItemHovered]}
	sentryLabel={CONST.SENTRY_LABEL.NAVIGATION_TAB_BAR.ACCOUNT}
	>

Change 1: Update the role from BUTTON to TAB

<PressableWithFeedback
    onPress={onPress}
    role={CONST.ROLE.TAB}  // ✅ Changed from CONST.ROLE.BUTTON
    accessibilityLabel={translate('initialSettingsPage.account')}  // ✅ Changed from 'sidebarScreen.buttonMySettings'
    wrapperStyle={styles.flex1}
    style={({hovered}) => [style, hovered && styles.navigationTabBarItemHovered]}
    sentryLabel={CONST.SENTRY_LABEL.NAVIGATION_TAB_BAR.ACCOUNT}
>

Change 2: Update the accessibility label to match the visible text

The accessibilityLabel should use translate('initialSettingsPage.account') (which translates to "Account") instead of translate('sidebarScreen.buttonMySettings') (which translates to "My settings"), ensuring it matches the visible text displayed in the component.

Translation verification:

The initialSettingsPage.account translation exists in all language files:

App/src/languages/en.ts

Line 1858 in 3779ccf

account: 'Account',

initialSettingsPage: {
    account: 'Account',
    // ... other keys
}

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~022014399082636051467

[melvin-bot]

Triggered auto assignment to Contributor-plus team member for initial proposal review - @jjcoffee (External)

[marufsharifi]

Proposal

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

When using a screen reader, the “Account” entry in the navigation tab bar is announced as “Settings, button” instead of announcing “Account”.

What is the root cause of that problem?

1. Wrong accessible name (“Settings” instead of “Account”).
   

   App/src/pages/home/sidebar/NavigationTabBarAvatar.tsx

   Lines 69 to 72 in 6e6f87c

   	<PressableWithFeedback
   	onPress={onPress}
   	role={CONST.ROLE.BUTTON}
   	accessibilityLabel={`${translate('initialSettingsPage.account')}, ${translate('sidebarScreen.buttonMySettings')}`}

   
   That translation key resolves to “My settings/Settings”, so the element is read as “Settings …”.

2. Missing “selected” announcement when Account tab is active

3. Announced role (“button” instead of “tab”).

   App/src/pages/home/sidebar/NavigationTabBarAvatar.tsx

   Lines 69 to 72 in 6e6f87c

   	<PressableWithFeedback
   	onPress={onPress}
   	role={CONST.ROLE.BUTTON}
   	accessibilityLabel={`${translate('initialSettingsPage.account')}, ${translate('sidebarScreen.buttonMySettings')}`}

   
   This comes from role={CONST.ROLE.BUTTON} on the pressable. This matches the current pattern used by the other navigation items, so we should keep it for consistency and keep this change minimal.

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

Current code to change

App/src/pages/home/sidebar/NavigationTabBarAvatar.tsx

Lines 69 to 76 in 6e6f87c

	<PressableWithFeedback
	onPress={onPress}
	role={CONST.ROLE.BUTTON}
	accessibilityLabel={`${translate('initialSettingsPage.account')}, ${translate('sidebarScreen.buttonMySettings')}`}
	wrapperStyle={styles.flex1}
	style={({hovered}) => [style, hovered && styles.navigationTabBarItemHovered]}
	sentryLabel={CONST.SENTRY_LABEL.NAVIGATION_TAB_BAR.ACCOUNT}
	>

 role={CONST.ROLE.BUTTON}
- accessibilityLabel={translate('sidebarScreen.buttonMySettings')}
+ accessibilityLabel={translate('initialSettingsPage.account')}
+ accessibilityState={{selected: isSelected}}

Why this fixes it:

• The accessible name now matches the visible label (“Account”), so SR announces “Account, button”.
• Passing accessibilityState.selected lets SR announce the tab is selected when it’s the active one.

Video demo for the fix:

account-button.mp4

What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?

None

What alternative solutions did you explore? (Optional)

Alternative 1:

1. Change Account to a tab role to match the issue’s “Account, tab” expectation

- role={CONST.ROLE.BUTTON}
+ role={CONST.ROLE.TAB}

2. Convert the whole navigation bar to proper tab semantics

[jjcoffee]

@daledah's proposal makes sense here.

🎀👀🎀 C+ reviewed