[$250] VoiceOver - Workspace row is announced as Entering instead of Link

[jponikarchuk]

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: v9.3.39-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: #82754
Email or phone of affected tester (no customers): n/a
Issue reported by: Applause Internal Team
Bug source: Pull Request QA execution
Device used: Mac 15.4.1 Safari/Chrome
App Component: Workspace Settings

Action Performed:

1. Open https://staging.new.expensify.com on a wide screen layout
2. Using a screen reader (e.g. JAWS + Chrome, or VoiceOver + Safari)
3. Navigate to the Workspaces page
4. TAB to a workspace row

Expected Result:

Workspace row is announced as a link

Actual Result:

Workspace row is announced as Entering instead of Link

Workaround:

Unknown

Platforms:

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

Screenshots/Videos

Video.mp4

View all open jobs on GitHub

Issue Owner

Current Issue Owner: @jayeshmangwani

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~022034170566300994142
• Upwork Job ID: 2034170566300994142
• Last Price Increase: 2026-03-18

[MelvinBot]

Proposal

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

On the Workspaces page in wide screen layout, when using a screen reader (VoiceOver + Safari/Chrome, or JAWS + Chrome), tabbing to a workspace row announces it as "Entering" instead of "Link". Users expect the workspace row to be announced as a link since clicking it navigates to the workspace settings.

What is the root cause of that problem?

In src/pages/workspace/WorkspacesListRow.tsx:269, the PressableWithoutFeedback sets its role conditionally based on layout width:

role={isWide ? CONST.ROLE.ROW : CONST.ROLE.LINK}

On wide layout (the exact scenario described in the bug report), the role is set to CONST.ROLE.ROW ('row'). The ARIA row role is a structural/container role (like a table row), so VoiceOver announces "Entering" when focusing it — because assistive technology interprets a row as a container you navigate into, not an interactive element you activate.

On narrow layout, the role is correctly set to CONST.ROLE.LINK ('link'), which VoiceOver would announce properly as "Link".

Since clicking a workspace row navigates the user to the workspace settings page (it calls Navigation.navigate()), it functionally behaves as a link regardless of layout width. The row role is semantically incorrect because there is no parent table/grid structure with role="table" or role="grid" to give context to the row.

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

In src/pages/workspace/WorkspacesListRow.tsx, change line 269 to always use CONST.ROLE.LINK:

• Change role={isWide ? CONST.ROLE.ROW : CONST.ROLE.LINK} to role={CONST.ROLE.LINK}

This ensures VoiceOver (and other screen readers) announce the workspace row as "Link" on all layout widths, matching the actual navigation behavior.

The child View at line 276 that uses role={isWide ? CONST.ROLE.CELL : undefined} should also be updated to remove the CONST.ROLE.CELL since there's no longer a row parent — change it to role={undefined} (or simply remove the role prop).

What alternative solutions did you explore? (Optional)

An alternative would be to keep role="row" on wide layout and add proper table semantics to the parent container (role="table" on the workspace list wrapper, role="rowgroup" on the list body). However, this adds unnecessary complexity since the workspace rows are fundamentally navigation links, not data table rows. The simpler approach of using role="link" matches the actual user interaction model.

---

Next Steps for Contributor+ team: Reply with @MelvinBot implement this to create a draft PR, @MelvinBot <your feedback> to refine this analysis, or explain why you are rejecting Melvin's proposal.

[melvin-bot]

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

[melvin-bot]

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

[MobileMage]

Proposal

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

On the Workspaces page in wide screen layout, tabbing to a workspace row causes screen readers (VoiceOver, JAWS) to announce "Entering" rather than "Link", giving keyboard/screen reader users no indication that the element is navigable.

What is the root cause of that problem?

The PressableWithoutFeedback in WorkspacesListRow is given role={isWide ? CONST.ROLE.ROW : CONST.ROLE.LINK}. When isWide is true, the role becomes 'row' — a table-row semantic. Screen readers interpret role="row" as entering a container (a row within a table/grid), not as a navigable link, which explains the "Entering" announcement. The ARIA row role is meant for structural table markup; it is not appropriate for a pressable that navigates to a workspace detail page. The inner View children already carry role={CONST.ROLE.CELL} for the wide layout, so the column structure is preserved independently of what role the outer pressable has.

App/src/pages/workspace/WorkspacesListRow.tsx

Lines 266 to 274 in e4c8216

	<PressableWithoutFeedback
	accessible
	accessibilityLabel={accessibilityLabel}
	role={isWide ? CONST.ROLE.ROW : CONST.ROLE.LINK}
	onPress={onPress}
	disabled={disabled}
	style={[isWide ? styles.flexRow : styles.flexColumn, styles.flex1, isWide && styles.gap5]}
	sentryLabel={CONST.SENTRY_LABEL.WORKSPACE.LIST.ROW}
	>

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

The pressable should always use CONST.ROLE.LINK regardless of layout width. The row role on the pressable was attempting to mirror a table-row structure for wide layouts, but the inner cells already carry role="cell" to convey that. Changing the pressable's role to LINK unconditionally fixes the screen reader announcement while keeping the visual column layout intact.

App/src/pages/workspace/WorkspacesListRow.tsx

Line 269 in e4c8216

role={isWide ? CONST.ROLE.ROW : CONST.ROLE.LINK}

 <PressableWithoutFeedback
     accessible
     accessibilityLabel={accessibilityLabel}
-    role={isWide ? CONST.ROLE.ROW : CONST.ROLE.LINK}
+    role={CONST.ROLE.LINK}
     onPress={onPress}
     disabled={disabled}
     style={[isWide ? styles.flexRow : styles.flexColumn, styles.flex1, isWide && styles.gap5]}
     sentryLabel={CONST.SENTRY_LABEL.WORKSPACE.LIST.ROW}
 >

What alternative solutions did you explore? (Optional)

N/A

[jjcoffee]

@MelvinBot implement this.