From e5e2d771b9865cdeb0c07f51f26e50666ca188f7 Mon Sep 17 00:00:00 2001
From: TaduJR <nattysec26@gmail.com>
Date: Wed, 4 Mar 2026 11:17:52 +0300
Subject: [PATCH 1/2] fix: Screen Reader: Workspace: 3-dot More button in
 Workspace container not focusable or operable

---
 src/CONST/index.ts                         |   2 +
 src/pages/workspace/WorkspacesListPage.tsx |  17 +--
 src/pages/workspace/WorkspacesListRow.tsx  | 148 ++++++++++++++-------
 3 files changed, 104 insertions(+), 63 deletions(-)

diff --git a/src/CONST/index.ts b/src/CONST/index.ts
index 89577aa736c7b..60cf987ec1824 100644
--- a/src/CONST/index.ts
+++ b/src/CONST/index.ts
@@ -8741,6 +8741,8 @@ const CONST = {
                 NEW_WORKSPACE_BUTTON: 'WorkspaceList-NewWorkspaceButton',
                 NEW_DOMAIN_BUTTON: 'WorkspaceList-NewDomainButton',
                 THREE_DOT_MENU: 'WorkspaceList-ThreeDotMenu',
+                ROW: 'WorkspaceList-Row',
+                ROW_ARROW: 'WorkspaceList-RowArrow',
             },
             INITIAL: {
                 PROFILE: 'WorkspaceInitial-Profile',
diff --git a/src/pages/workspace/WorkspacesListPage.tsx b/src/pages/workspace/WorkspacesListPage.tsx
index 79b39f5a36c5e..1854c7d35aa80 100755
--- a/src/pages/workspace/WorkspacesListPage.tsx
+++ b/src/pages/workspace/WorkspacesListPage.tsx
@@ -54,7 +54,6 @@ import {
     getConnectionExporters,
     getPolicyBrickRoadIndicatorStatus,
     getUberConnectionErrorDirectlyFromPolicy,
-    getUserFriendlyWorkspaceType,
     isPendingDeletePolicy,
     isPolicyAdmin,
     isPolicyAuditor,
@@ -431,17 +430,6 @@ function WorkspacesListPage() {
             });
         }
 
-        const ownerDisplayName = personalDetails?.[item.ownerAccountID ?? CONST.DEFAULT_NUMBER_ID]?.displayName ?? '';
-        const workspaceType = item.type ? getUserFriendlyWorkspaceType(item.type, translate) : '';
-        const accessibilityLabel = [
-            `${translate('workspace.common.workspace')}: ${item.title}`,
-            isDefault ? translate('common.default') : '',
-            `${translate('workspace.common.workspaceOwner')}: ${ownerDisplayName}`,
-            `${translate('workspace.common.workspaceType')}: ${workspaceType}`,
-        ]
-            .filter(Boolean)
-            .join(', ');
-
         return (
             <OfflineWithFeedback
                 key={`${item.title}_${index}`}
@@ -454,8 +442,7 @@ function WorkspacesListPage() {
                 shouldHideOnDelete={false}
             >
                 <PressableWithoutFeedback
-                    role={isLessThanMediumScreen ? CONST.ROLE.BUTTON : CONST.ROLE.ROW}
-                    accessibilityLabel={accessibilityLabel}
+                    accessible={false}
                     style={[styles.mh5]}
                     disabled={item.disabled}
                     onPress={item.action}
@@ -480,6 +467,8 @@ function WorkspacesListPage() {
                             isLoadingBill={isLoadingBill}
                             resetLoadingSpinnerIconIndex={resetLoadingSpinnerIconIndex}
                             isHovered={hovered}
+                            disabled={item.disabled}
+                            onPress={item.action}
                         />
                     )}
                 </PressableWithoutFeedback>
diff --git a/src/pages/workspace/WorkspacesListRow.tsx b/src/pages/workspace/WorkspacesListRow.tsx
index f6fa05b971e5e..69a8c2a705b80 100644
--- a/src/pages/workspace/WorkspacesListRow.tsx
+++ b/src/pages/workspace/WorkspacesListRow.tsx
@@ -9,6 +9,7 @@ import Avatar from '@components/Avatar';
 import Badge from '@components/Badge';
 import Icon from '@components/Icon';
 import type {PopoverMenuItem} from '@components/PopoverMenu';
+import PressableWithoutFeedback from '@components/Pressable/PressableWithoutFeedback';
 import Text from '@components/Text';
 import TextWithTooltip from '@components/TextWithTooltip';
 import ThreeDotsMenu from '@components/ThreeDotsMenu';
@@ -84,6 +85,12 @@ type WorkspacesListRowProps = WithCurrentUserPersonalDetailsProps & {
 
     /** Whether the list item is hovered */
     isHovered?: boolean;
+
+    /** Whether the row press is disabled */
+    disabled?: boolean;
+
+    /** Callback when the row is pressed */
+    onPress?: () => void;
 };
 
 type BrickRoadIndicatorIconProps = {
@@ -122,6 +129,8 @@ function WorkspacesListRow({
     isLoadingBill,
     resetLoadingSpinnerIconIndex,
     isHovered,
+    disabled,
+    onPress,
 }: WorkspacesListRowProps) {
     const styles = useThemeStyles();
     const {translate} = useLocalize();
@@ -177,58 +186,92 @@ function WorkspacesListRow({
 
     const isDeleted = style && Array.isArray(style) ? style.includes(styles.offlineFeedbackDeleted) : false;
 
+    const ownerName = ownerDetails ? getDisplayNameOrDefault(ownerDetails) : '';
+    const workspaceTypeName = workspaceType ? getUserFriendlyWorkspaceType(workspaceType, translate) : '';
+    const accessibilityLabel = [
+        `${translate('workspace.common.workspaceName')}: ${title}`,
+        isDefault ? translate('common.default') : '',
+        isJoinRequestPending ? translate('workspace.common.requested') : '',
+        ownerName ? `${translate('workspace.common.workspaceOwner')}: ${ownerName}` : '',
+        workspaceTypeName ? `${translate('workspace.common.workspaceType')}: ${workspaceTypeName}` : '',
+    ]
+        .filter(Boolean)
+        .join(', ');
+
+    const RequestedBadge = isJoinRequestPending ? (
+        <View style={[styles.flexRow, styles.gap2, styles.alignItemsCenter, styles.justifyContentEnd]}>
+            <Badge
+                text={translate('workspace.common.requested')}
+                textStyles={styles.textStrong}
+                badgeStyles={[styles.alignSelfCenter, styles.badgeBordered]}
+                icon={icons.Hourglass}
+            />
+        </View>
+    ) : null;
+
+    const DefaultBadge = isDefault ? (
+        <Tooltip
+            maxWidth={variables.w184}
+            text={translate('workspace.common.defaultNote')}
+            numberOfLines={4}
+        >
+            <View style={[styles.flexRow, styles.gap2, styles.alignItemsCenter, styles.justifyContentEnd]}>
+                <Badge
+                    text={translate('common.default')}
+                    textStyles={styles.textStrong}
+                    badgeStyles={[styles.alignSelfCenter, styles.badgeBordered, styles.badgeSuccess]}
+                />
+            </View>
+        </Tooltip>
+    ) : null;
+
+    const ThreeDotsSection = !isJoinRequestPending ? (
+        <View style={[styles.flexRow, styles.gap1, !isNarrow && styles.ml2, isNarrow && styles.alignItemsCenter]}>
+            <View style={[styles.flexRow, styles.gap2, styles.alignItemsCenter, isNarrow && styles.workspaceListRBR]}>
+                <BrickRoadIndicatorIcon brickRoadIndicator={brickRoadIndicator} />
+            </View>
+            <ThreeDotsMenu
+                isContainerFocused={isFocused}
+                shouldSelfPosition
+                menuItems={menuItems}
+                anchorAlignment={{horizontal: CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL.RIGHT, vertical: CONST.MODAL.ANCHOR_ORIGIN_VERTICAL.TOP}}
+                shouldOverlay
+                disabled={shouldDisableThreeDotsMenu}
+                isNested
+                threeDotsMenuRef={threeDotsMenuRef}
+                sentryLabel={CONST.SENTRY_LABEL.WORKSPACE.LIST.THREE_DOT_MENU}
+            />
+        </View>
+    ) : null;
+
+    const NarrowBadges =
+        isJoinRequestPending || isDefault ? (
+            <View style={[styles.flexRow, styles.gap1, styles.alignItemsCenter]}>
+                {RequestedBadge}
+                {DefaultBadge}
+            </View>
+        ) : null;
+
     const ThreeDotMenuOrPendingIcon = (
         <View style={[styles.flexRow, !shouldUseNarrowLayout && styles.workspaceThreeDotMenu]}>
-            {!!isJoinRequestPending && (
-                <View style={[styles.flexRow, styles.gap2, styles.alignItemsCenter, styles.justifyContentEnd]}>
-                    <Badge
-                        text={translate('workspace.common.requested')}
-                        textStyles={styles.textStrong}
-                        badgeStyles={[styles.alignSelfCenter, styles.badgeBordered]}
-                        icon={icons.Hourglass}
-                    />
-                </View>
-            )}
-            {!!isDefault && (
-                <Tooltip
-                    maxWidth={variables.w184}
-                    text={translate('workspace.common.defaultNote')}
-                    numberOfLines={4}
-                >
-                    <View style={[styles.flexRow, styles.gap2, styles.alignItemsCenter, styles.justifyContentEnd]}>
-                        <Badge
-                            text={translate('common.default')}
-                            textStyles={styles.textStrong}
-                            badgeStyles={[styles.alignSelfCenter, styles.badgeBordered, styles.badgeSuccess]}
-                        />
-                    </View>
-                </Tooltip>
-            )}
-            {!isJoinRequestPending && (
-                <View style={[styles.flexRow, styles.ml2, styles.gap1]}>
-                    <View style={[styles.flexRow, styles.gap2, styles.alignItemsCenter, isNarrow && styles.workspaceListRBR]}>
-                        <BrickRoadIndicatorIcon brickRoadIndicator={brickRoadIndicator} />
-                    </View>
-                    <ThreeDotsMenu
-                        isContainerFocused={isFocused}
-                        shouldSelfPosition
-                        menuItems={menuItems}
-                        anchorAlignment={{horizontal: CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL.RIGHT, vertical: CONST.MODAL.ANCHOR_ORIGIN_VERTICAL.TOP}}
-                        shouldOverlay
-                        disabled={shouldDisableThreeDotsMenu}
-                        isNested
-                        threeDotsMenuRef={threeDotsMenuRef}
-                        sentryLabel={CONST.SENTRY_LABEL.WORKSPACE.LIST.THREE_DOT_MENU}
-                    />
-                </View>
-            )}
+            {RequestedBadge}
+            {DefaultBadge}
+            {ThreeDotsSection}
         </View>
     );
 
     return (
         <View style={[styles.flexRow, styles.highlightBG, rowStyles, style, styles.br3]}>
             <Animated.View style={[styles.flex1, styles.flexRow, styles.bgTransparent, isWide && styles.gap5, styles.p5, styles.pr3, animatedHighlightStyle]}>
-                <View style={[isWide ? styles.flexRow : styles.flexColumn, styles.flex1, isWide && styles.gap5]}>
+                <PressableWithoutFeedback
+                    accessible
+                    accessibilityLabel={accessibilityLabel}
+                    role={isWide ? CONST.ROLE.ROW : CONST.ROLE.BUTTON}
+                    onPress={onPress}
+                    disabled={disabled}
+                    style={[isWide ? styles.flexRow : styles.flexColumn, styles.flex1, isWide && styles.gap5]}
+                    sentryLabel={CONST.SENTRY_LABEL.WORKSPACE.LIST.ROW}
+                >
                     <View
                         role={isWide ? CONST.ROLE.CELL : undefined}
                         style={[styles.flexRow, styles.justifyContentBetween, styles.flex2, isNarrow && styles.mb3, styles.alignItemsCenter]}
@@ -249,7 +292,7 @@ function WorkspacesListRow({
                                 style={[styles.flex1, styles.flexGrow1, styles.textStrong, isDeleted ? styles.offlineFeedbackDeleted : {}]}
                             />
                         </View>
-                        {isNarrow && ThreeDotMenuOrPendingIcon}
+                        {isNarrow && NarrowBadges}
                     </View>
                     <View
                         role={isWide ? CONST.ROLE.CELL : undefined}
@@ -306,15 +349,22 @@ function WorkspacesListRow({
                             </Text>
                         </View>
                     </View>
-                </View>
+                </PressableWithoutFeedback>
 
                 <View
                     role={isWide ? CONST.ROLE.CELL : undefined}
-                    style={[styles.flexRow, styles.alignItemsCenter]}
+                    style={[styles.flexRow, styles.alignItemsCenter, isNarrow && styles.alignSelfStart]}
                 >
+                    {isNarrow && ThreeDotsSection}
                     {!isNarrow && ThreeDotMenuOrPendingIcon}
                     {!isNarrow && (
-                        <View style={[styles.justifyContentCenter, styles.alignItemsCenter, styles.touchableButtonImage]}>
+                        <PressableWithoutFeedback
+                            onPress={onPress}
+                            disabled={disabled}
+                            accessible={false}
+                            sentryLabel={CONST.SENTRY_LABEL.WORKSPACE.LIST.ROW_ARROW}
+                            style={[styles.justifyContentCenter, styles.alignItemsCenter, styles.touchableButtonImage]}
+                        >
                             <Icon
                                 src={icons.ArrowRight}
                                 fill={theme.icon}
@@ -322,7 +372,7 @@ function WorkspacesListRow({
                                 isButtonIcon
                                 medium
                             />
-                        </View>
+                        </PressableWithoutFeedback>
                     )}
                 </View>
             </Animated.View>

From d3af0b571f1c3dcc70b09a95fc2097ae611383e0 Mon Sep 17 00:00:00 2001
From: TaduJR <nattysec26@gmail.com>
Date: Wed, 4 Mar 2026 11:28:51 +0300
Subject: [PATCH 2/2] fix: Remove orphaned role=cell from action column outside
 role=row

---
 src/pages/workspace/WorkspacesListRow.tsx | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/src/pages/workspace/WorkspacesListRow.tsx b/src/pages/workspace/WorkspacesListRow.tsx
index 69a8c2a705b80..709e7e45e2b52 100644
--- a/src/pages/workspace/WorkspacesListRow.tsx
+++ b/src/pages/workspace/WorkspacesListRow.tsx
@@ -351,10 +351,7 @@ function WorkspacesListRow({
                     </View>
                 </PressableWithoutFeedback>
 
-                <View
-                    role={isWide ? CONST.ROLE.CELL : undefined}
-                    style={[styles.flexRow, styles.alignItemsCenter, isNarrow && styles.alignSelfStart]}
-                >
+                <View style={[styles.flexRow, styles.alignItemsCenter, isNarrow && styles.alignSelfStart]}>
                     {isNarrow && ThreeDotsSection}
                     {!isNarrow && ThreeDotMenuOrPendingIcon}
                     {!isNarrow && (