Skip to content

Commit 9b114da

Browse files
blimpichblimpich
authored
Merge pull request Expensify#83966 from Expensify/revert-83324-fix-Accessibility-Tracking-Make-Element-Focusable
2 parents ccb3182 + 6e9d78d commit 9b114da

3 files changed

Lines changed: 64 additions & 104 deletions

File tree

‎src/CONST/index.ts‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8729,8 +8729,6 @@ const CONST = {
87298729
NEW_WORKSPACE_BUTTON: 'WorkspaceList-NewWorkspaceButton',
87308730
NEW_DOMAIN_BUTTON: 'WorkspaceList-NewDomainButton',
87318731
THREE_DOT_MENU: 'WorkspaceList-ThreeDotMenu',
8732-
ROW: 'WorkspaceList-Row',
8733-
ROW_ARROW: 'WorkspaceList-RowArrow',
87348732
},
87358733
INITIAL: {
87368734
PROFILE: 'WorkspaceInitial-Profile',

‎src/pages/workspace/WorkspacesListPage.tsx‎

Lines changed: 15 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -54,6 +54,7 @@ import {
5454
getConnectionExporters,
5555
getPolicyBrickRoadIndicatorStatus,
5656
getUberConnectionErrorDirectlyFromPolicy,
57+
getUserFriendlyWorkspaceType,
5758
isPendingDeletePolicy,
5859
isPolicyAdmin,
5960
isPolicyAuditor,
@@ -430,6 +431,17 @@ function WorkspacesListPage() {
430431
});
431432
}
432433

434+
const ownerDisplayName = personalDetails?.[item.ownerAccountID ?? CONST.DEFAULT_NUMBER_ID]?.displayName ?? '';
435+
const workspaceType = item.type ? getUserFriendlyWorkspaceType(item.type, translate) : '';
436+
const accessibilityLabel = [
437+
`${translate('workspace.common.workspace')}: ${item.title}`,
438+
isDefault ? translate('common.default') : '',
439+
`${translate('workspace.common.workspaceOwner')}: ${ownerDisplayName}`,
440+
`${translate('workspace.common.workspaceType')}: ${workspaceType}`,
441+
]
442+
.filter(Boolean)
443+
.join(', ');
444+
433445
return (
434446
<OfflineWithFeedback
435447
key={`${item.title}_${index}`}
@@ -442,9 +454,11 @@ function WorkspacesListPage() {
442454
shouldHideOnDelete={false}
443455
>
444456
<PressableWithoutFeedback
445-
accessible={false}
457+
role={isLessThanMediumScreen ? CONST.ROLE.BUTTON : CONST.ROLE.ROW}
458+
accessibilityLabel={accessibilityLabel}
446459
style={[styles.mh5]}
447460
disabled={item.disabled}
461+
onPress={item.action}
448462
sentryLabel={CONST.SENTRY_LABEL.WORKSPACE.WORKSPACE_MENU_ITEM}
449463
>
450464
{({hovered}) => (
@@ -466,8 +480,6 @@ function WorkspacesListPage() {
466480
isLoadingBill={isLoadingBill}
467481
resetLoadingSpinnerIconIndex={resetLoadingSpinnerIconIndex}
468482
isHovered={hovered}
469-
disabled={item.disabled}
470-
onPress={item.action}
471483
/>
472484
)}
473485
</PressableWithoutFeedback>

‎src/pages/workspace/WorkspacesListRow.tsx‎

Lines changed: 49 additions & 99 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,6 @@ import Avatar from '@components/Avatar';
99
import Badge from '@components/Badge';
1010
import Icon from '@components/Icon';
1111
import type {PopoverMenuItem} from '@components/PopoverMenu';
12-
import PressableWithoutFeedback from '@components/Pressable/PressableWithoutFeedback';
1312
import Text from '@components/Text';
1413
import TextWithTooltip from '@components/TextWithTooltip';
1514
import ThreeDotsMenu from '@components/ThreeDotsMenu';
@@ -85,12 +84,6 @@ type WorkspacesListRowProps = WithCurrentUserPersonalDetailsProps & {
8584

8685
/** Whether the list item is hovered */
8786
isHovered?: boolean;
88-
89-
/** Whether the row press is disabled */
90-
disabled?: boolean;
91-
92-
/** Callback when the row is pressed */
93-
onPress?: () => void;
9487
};
9588

9689
type BrickRoadIndicatorIconProps = {
@@ -129,8 +122,6 @@ function WorkspacesListRow({
129122
isLoadingBill,
130123
resetLoadingSpinnerIconIndex,
131124
isHovered,
132-
disabled,
133-
onPress,
134125
}: WorkspacesListRowProps) {
135126
const styles = useThemeStyles();
136127
const {translate} = useLocalize();
@@ -186,92 +177,58 @@ function WorkspacesListRow({
186177

187178
const isDeleted = style && Array.isArray(style) ? style.includes(styles.offlineFeedbackDeleted) : false;
188179

189-
const ownerName = ownerDetails ? getDisplayNameOrDefault(ownerDetails) : '';
190-
const workspaceTypeName = workspaceType ? getUserFriendlyWorkspaceType(workspaceType, translate) : '';
191-
const accessibilityLabel = [
192-
`${translate('workspace.common.workspaceName')}: ${title}`,
193-
isDefault ? translate('common.default') : '',
194-
isJoinRequestPending ? translate('workspace.common.requested') : '',
195-
ownerName ? `${translate('workspace.common.workspaceOwner')}: ${ownerName}` : '',
196-
workspaceTypeName ? `${translate('workspace.common.workspaceType')}: ${workspaceTypeName}` : '',
197-
]
198-
.filter(Boolean)
199-
.join(', ');
200-
201-
const RequestedBadge = isJoinRequestPending ? (
202-
<View style={[styles.flexRow, styles.gap2, styles.alignItemsCenter, styles.justifyContentEnd]}>
203-
<Badge
204-
text={translate('workspace.common.requested')}
205-
textStyles={styles.textStrong}
206-
badgeStyles={[styles.alignSelfCenter, styles.badgeBordered]}
207-
icon={icons.Hourglass}
208-
/>
209-
</View>
210-
) : null;
211-
212-
const DefaultBadge = isDefault ? (
213-
<Tooltip
214-
maxWidth={variables.w184}
215-
text={translate('workspace.common.defaultNote')}
216-
numberOfLines={4}
217-
>
218-
<View style={[styles.flexRow, styles.gap2, styles.alignItemsCenter, styles.justifyContentEnd]}>
219-
<Badge
220-
text={translate('common.default')}
221-
textStyles={styles.textStrong}
222-
badgeStyles={[styles.alignSelfCenter, styles.badgeBordered, styles.badgeSuccess]}
223-
/>
224-
</View>
225-
</Tooltip>
226-
) : null;
227-
228-
const ThreeDotsSection = !isJoinRequestPending ? (
229-
<View style={[styles.flexRow, styles.gap1, !isNarrow && styles.ml2, isNarrow && styles.alignItemsCenter]}>
230-
<View style={[styles.flexRow, styles.gap2, styles.alignItemsCenter, isNarrow && styles.workspaceListRBR]}>
231-
<BrickRoadIndicatorIcon brickRoadIndicator={brickRoadIndicator} />
232-
</View>
233-
<ThreeDotsMenu
234-
isContainerFocused={isFocused}
235-
shouldSelfPosition
236-
menuItems={menuItems}
237-
anchorAlignment={{horizontal: CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL.RIGHT, vertical: CONST.MODAL.ANCHOR_ORIGIN_VERTICAL.TOP}}
238-
shouldOverlay
239-
disabled={shouldDisableThreeDotsMenu}
240-
isNested
241-
threeDotsMenuRef={threeDotsMenuRef}
242-
sentryLabel={CONST.SENTRY_LABEL.WORKSPACE.LIST.THREE_DOT_MENU}
243-
/>
244-
</View>
245-
) : null;
246-
247-
const NarrowBadges =
248-
isJoinRequestPending || isDefault ? (
249-
<View style={[styles.flexRow, styles.gap1, styles.alignItemsCenter]}>
250-
{RequestedBadge}
251-
{DefaultBadge}
252-
</View>
253-
) : null;
254-
255180
const ThreeDotMenuOrPendingIcon = (
256181
<View style={[styles.flexRow, !shouldUseNarrowLayout && styles.workspaceThreeDotMenu]}>
257-
{RequestedBadge}
258-
{DefaultBadge}
259-
{ThreeDotsSection}
182+
{!!isJoinRequestPending && (
183+
<View style={[styles.flexRow, styles.gap2, styles.alignItemsCenter, styles.justifyContentEnd]}>
184+
<Badge
185+
text={translate('workspace.common.requested')}
186+
textStyles={styles.textStrong}
187+
badgeStyles={[styles.alignSelfCenter, styles.badgeBordered]}
188+
icon={icons.Hourglass}
189+
/>
190+
</View>
191+
)}
192+
{!!isDefault && (
193+
<Tooltip
194+
maxWidth={variables.w184}
195+
text={translate('workspace.common.defaultNote')}
196+
numberOfLines={4}
197+
>
198+
<View style={[styles.flexRow, styles.gap2, styles.alignItemsCenter, styles.justifyContentEnd]}>
199+
<Badge
200+
text={translate('common.default')}
201+
textStyles={styles.textStrong}
202+
badgeStyles={[styles.alignSelfCenter, styles.badgeBordered, styles.badgeSuccess]}
203+
/>
204+
</View>
205+
</Tooltip>
206+
)}
207+
{!isJoinRequestPending && (
208+
<View style={[styles.flexRow, styles.ml2, styles.gap1]}>
209+
<View style={[styles.flexRow, styles.gap2, styles.alignItemsCenter, isNarrow && styles.workspaceListRBR]}>
210+
<BrickRoadIndicatorIcon brickRoadIndicator={brickRoadIndicator} />
211+
</View>
212+
<ThreeDotsMenu
213+
isContainerFocused={isFocused}
214+
shouldSelfPosition
215+
menuItems={menuItems}
216+
anchorAlignment={{horizontal: CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL.RIGHT, vertical: CONST.MODAL.ANCHOR_ORIGIN_VERTICAL.TOP}}
217+
shouldOverlay
218+
disabled={shouldDisableThreeDotsMenu}
219+
isNested
220+
threeDotsMenuRef={threeDotsMenuRef}
221+
sentryLabel={CONST.SENTRY_LABEL.WORKSPACE.LIST.THREE_DOT_MENU}
222+
/>
223+
</View>
224+
)}
260225
</View>
261226
);
262227

263228
return (
264229
<View style={[styles.flexRow, styles.highlightBG, rowStyles, style, styles.br3]}>
265230
<Animated.View style={[styles.flex1, styles.flexRow, styles.bgTransparent, isWide && styles.gap5, styles.p5, styles.pr3, animatedHighlightStyle]}>
266-
<PressableWithoutFeedback
267-
accessible
268-
accessibilityLabel={accessibilityLabel}
269-
role={isWide ? CONST.ROLE.ROW : CONST.ROLE.BUTTON}
270-
onPress={onPress}
271-
disabled={disabled}
272-
style={[isWide ? styles.flexRow : styles.flexColumn, styles.flex1, isWide && styles.gap5]}
273-
sentryLabel={CONST.SENTRY_LABEL.WORKSPACE.LIST.ROW}
274-
>
231+
<View style={[isWide ? styles.flexRow : styles.flexColumn, styles.flex1, isWide && styles.gap5]}>
275232
<View
276233
role={isWide ? CONST.ROLE.CELL : undefined}
277234
style={[styles.flexRow, styles.justifyContentBetween, styles.flex2, isNarrow && styles.mb3, styles.alignItemsCenter]}
@@ -292,7 +249,7 @@ function WorkspacesListRow({
292249
style={[styles.flex1, styles.flexGrow1, styles.textStrong, isDeleted ? styles.offlineFeedbackDeleted : {}]}
293250
/>
294251
</View>
295-
{isNarrow && NarrowBadges}
252+
{isNarrow && ThreeDotMenuOrPendingIcon}
296253
</View>
297254
<View
298255
role={isWide ? CONST.ROLE.CELL : undefined}
@@ -349,30 +306,23 @@ function WorkspacesListRow({
349306
</Text>
350307
</View>
351308
</View>
352-
</PressableWithoutFeedback>
309+
</View>
353310

354311
<View
355312
role={isWide ? CONST.ROLE.CELL : undefined}
356-
style={[styles.flexRow, styles.alignItemsCenter, isNarrow && styles.alignSelfStart]}
313+
style={[styles.flexRow, styles.alignItemsCenter]}
357314
>
358-
{isNarrow && ThreeDotsSection}
359315
{!isNarrow && ThreeDotMenuOrPendingIcon}
360316
{!isNarrow && (
361-
<PressableWithoutFeedback
362-
onPress={onPress}
363-
disabled={disabled}
364-
accessible={false}
365-
sentryLabel={CONST.SENTRY_LABEL.WORKSPACE.LIST.ROW_ARROW}
366-
style={[styles.justifyContentCenter, styles.alignItemsCenter, styles.touchableButtonImage]}
367-
>
317+
<View style={[styles.justifyContentCenter, styles.alignItemsCenter, styles.touchableButtonImage]}>
368318
<Icon
369319
src={icons.ArrowRight}
370320
fill={theme.icon}
371321
additionalStyles={[styles.alignSelfCenter, !isHovered && styles.opacitySemiTransparent]}
372322
isButtonIcon
373323
medium
374324
/>
375-
</PressableWithoutFeedback>
325+
</View>
376326
)}
377327
</View>
378328
</Animated.View>

0 commit comments

Comments
 (0)