[$500][Accessibility][Tracking] Other Accessibility Issues

[rushatgabhane]

Overview

This issue tracks miscellaneous accessibility issues that don't fit into other specific categories.

Context

Part of the accessibility improvement effort tracked in https://github.com/Expensify/Expensify/issues/575078

Issues to Fix

• Screen Reader: Many Pages: The displayed error message is not associated with the input field #77255 - Error message not associated with input (link elements with accessibility props)
• Screen Reader: Settings–Subscription: The visual list of plan details is not announced as a list #76951 - Plan details list has no list semantics (add list role to container)
• [$250] Screen Readers: Workspaces: The visual data table has no table semantics announced #76914 - Data table has no table semantics (add table accessibility props)
• Screen Reader: Profile Subsections: No feedback announced after requesting a new OTP code #77573 - No feedback after requesting OTP (add announcement via AccessibilityInfo)

Instructions

Suggested Fixes: Various - see individual issues for specific fixes needed

Note: Discuss on Slack if you are unsure whether a sub-issue should be fixed or if you are unsure about the right fix / expected result. Ideally, create a single PR that will fix all the issues listed to minimize review time (more PRs only if necessary).

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~022009703339815704205
• Upwork Job ID: 2009703339815704205
• Last Price Increase: 2026-02-06

Issue Owner

Current Issue Owner: @

Issue Owner

Current Issue Owner: @TaduJR

[melvin-bot]

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

[melvin-bot]

Current assignee @mallenexpensify is eligible for the Bug assigner, not assigning anyone new.

[melvin-bot]

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

[melvin-bot]

⚠️ This issue has had its price increased by 4x or more. Please review the issue and ensure the price is correct.

[melvin-bot]

Upwork job price has been updated to $250

[TaduJR]

Proposal

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

Screen reader users cannot access critical information due to missing semantic structure and status announcements across 4 areas

What is the root cause of that problem?

Issue #77255 - Error Messages Not Associated

Root Cause: Form validation errors are rendered as separate <Text> components with no programmatic connection to their input fields.

Flow:

1. User enters invalid data in input field
2. FormHelpMessage component renders error text below input
3. Web: Input has no aria-describedby linking to error message ID
4. Native: Input has no accessibilityHint containing error text
5. Screen reader announces only field label, missing error entirely

Current Implementation:

App/src/components/FormHelpMessage.tsx

Lines 46 to 76 in 0be235c

	const replacedText = Parser.replace(message, {shouldEscapeText: false});
	if (isError) {
	return `<alert-text>${replacedText}</alert-text>`;
	}
	return `<muted-text-label>${replacedText}</muted-text-label>`;
	}, [isError, message, shouldRenderMessageAsHTML]);
	if (isEmpty(message) && isEmpty(children)) {
	return null;
	}
	return (
	<View style={[styles.flexRow, styles.alignItemsCenter, styles.mt2, styles.mb1, style]}>
	{isError && shouldShowRedDotIndicator && (
	<Icon
	src={icons.DotIndicator}
	fill={theme.danger}
	/>
	)}
	{isInfo && (
	<Icon
	src={icons.Exclamation}
	fill={theme.icon}
	small
	additionalStyles={[styles.mr1]}
	/>
	)}
	<View style={[styles.flex1, isError && shouldShowRedDotIndicator ? styles.ml2 : {}]}>
	{children ?? (shouldRenderMessageAsHTML ? <RenderHTML html={HTMLMessage} /> : <Text style={[isError ? styles.formError : styles.formHelp, styles.mb0]}>{message}</Text>)}

https://github.com/Expensify/App/blob/0be235ce0b97ddb20137e6bc08d2b391e919b5cf/src/components/TextInput/BaseTextInput/implementation/index.tsx#L500-L600

Issue #76951 - List Semantics Missing

Root Cause: Plan benefits are rendered using generic <View> components in a grid layout without ARIA list roles or position information.

Flow:

1. Benefits array mapped to View components with checkmark icons
2. No role="list" on container
3. No role="listitem" on individual items
4. No position attributes (aria-posinset, aria-setsize)
5. Screen reader announces disconnected text without list context

Current Implementation:

App/src/pages/settings/Subscription/SubscriptionPlan/SubscriptionPlanCard.tsx

Lines 58 to 83 in 0be235c

	const renderBenefits = () => {
	const amountOfRows = Math.ceil(benefits.length / benefitsColumns);
	return Array.from({length: amountOfRows}).map((_, rowIndex) => (
	<View
	// eslint-disable-next-line react/no-array-index-key
	key={`row-${rowIndex}`}
	style={styles.flexRow}
	>
	{benefits.slice(rowIndex * benefitsColumns, (rowIndex + 1) * benefitsColumns).map((item) => (
	<View
	key={item}
	style={[styles.flex1, styles.flexRow, styles.alignItemsCenter, shouldUseNarrowLayout ? styles.mt3 : styles.mt4]}
	>
	<Icon
	src={Expensicons.Checkmark}
	fill={theme.iconSuccessFill}
	width={variables.iconSizeSmall}
	height={variables.iconSizeSmall}
	/>
	<Text style={[styles.textLabelSupporting, styles.ml2]}>{item}</Text>
	</View>
	))}
	</View>
	));
	};

Issue #76914 - Table Semantics Missing

Root Cause: Workspaces are rendered using FlatList with View-based header and rows, lacking ARIA table roles and semantic structure.

Flow:

1. Table header rendered as plain Views
2. FlatList renders workspace rows as clickable Pressables
3. No role="table" wrapper
4. No role="columnheader" on headers
5. No role="row" or role="cell" on data
6. Screen reader cannot use table navigation commands

Current Implementation:

App/src/pages/workspace/WorkspacesListPage.tsx

Lines 708 to 736 in 0be235c

	{!isLessThanMediumScreen && filteredWorkspaces.length > 0 && (
	<View style={[styles.flexRow, styles.gap5, styles.pt2, styles.pb3, styles.pr5, styles.pl10, styles.appBG]}>
	<View style={[styles.flexRow, styles.flex2]}>
	<Text
	numberOfLines={1}
	style={[styles.flexGrow1, styles.textLabelSupporting]}
	>
	{translate('workspace.common.workspaceName')}
	</Text>
	</View>
	<View style={[styles.flexRow, styles.flex1, styles.workspaceOwnerSectionTitle, styles.workspaceOwnerSectionMinWidth]}>
	<Text
	numberOfLines={1}
	style={[styles.flexGrow1, styles.textLabelSupporting]}
	>
	{translate('workspace.common.workspaceOwner')}
	</Text>
	</View>
	<View style={[styles.flexRow, styles.flex1, styles.workspaceTypeSectionTitle]}>
	<Text
	numberOfLines={1}
	style={[styles.flexGrow1, styles.textLabelSupporting]}
	>
	{translate('workspace.common.workspaceType')}
	</Text>
	</View>
	<View style={[styles.workspaceRightColumn, styles.mr7]} />
	</View>
	)}

App/src/pages/workspace/WorkspacesListRow.tsx

Lines 228 to 315 in 0be235c

	<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]}>
	<View style={[styles.flexRow, styles.justifyContentBetween, styles.flex2, isNarrow && styles.mb3, styles.alignItemsCenter]}>
	<View style={[styles.flexRow, styles.gap3, styles.flex1, styles.alignItemsCenter]}>
	<Avatar
	imageStyles={[styles.alignSelfCenter]}
	size={CONST.AVATAR_SIZE.DEFAULT}
	source={workspaceIcon}
	fallbackIcon={fallbackWorkspaceIcon}
	avatarID={policyID}
	name={title}
	type={CONST.ICON_TYPE_WORKSPACE}
	/>
	<TextWithTooltip
	text={title}
	shouldShowTooltip
	style={[styles.flex1, styles.flexGrow1, styles.textStrong, isDeleted ? styles.offlineFeedbackDeleted : {}]}
	/>
	</View>
	{isNarrow && ThreeDotMenuOrPendingIcon}
	</View>
	<View style={[styles.flexRow, isWide && styles.flex1, isWide && styles.workspaceOwnerSectionMinWidth, styles.gap2, styles.alignItemsCenter]}>
	{!!ownerDetails && (
	<>
	<Avatar
	source={ownerDetails.avatar}
	avatarID={ownerDetails.accountID}
	type={CONST.ICON_TYPE_AVATAR}
	size={CONST.AVATAR_SIZE.SMALL}
	containerStyles={styles.workspaceOwnerAvatarWrapper}
	/>
	<View style={styles.flex1}>
	<WorkspacesListRowDisplayName
	isDeleted={isDeleted}
	ownerName={getDisplayNameOrDefault(ownerDetails)}
	/>
	<Text
	numberOfLines={1}
	style={[styles.textMicro, styles.textSupporting, isDeleted ? styles.offlineFeedbackDeleted : {}]}
	>
	{Str.removeSMSDomain(ownerDetails?.login ?? '')}
	</Text>
	</View>
	</>
	)}
	</View>
	<View style={[styles.flexRow, isWide && styles.flex1, styles.gap2, styles.alignItemsCenter]}>
	<Icon
	src={workspaceTypeIcon(workspaceType)}
	width={variables.workspaceTypeIconWidth}
	height={variables.workspaceTypeIconWidth}
	additionalStyles={styles.workspaceTypeWrapper}
	/>
	<View>
	{!!workspaceType && (
	<Text
	numberOfLines={1}
	style={[styles.labelStrong, isDeleted ? styles.offlineFeedbackDeleted : {}]}
	>
	{getUserFriendlyWorkspaceType(workspaceType, translate)}
	</Text>
	)}
	<Text
	numberOfLines={1}
	style={[styles.textMicro, styles.textSupporting, isDeleted ? styles.offlineFeedbackDeleted : {}]}
	>
	{translate('workspace.common.plan')}
	</Text>
	</View>
	</View>
	</View>
	<View style={[styles.flexRow, styles.alignItemsCenter]}>
	{!isNarrow && ThreeDotMenuOrPendingIcon}
	{!isNarrow && (
	<View style={[styles.justifyContentCenter, styles.alignItemsCenter, styles.touchableButtonImage]}>
	<Icon
	src={icons.ArrowRight}
	fill={theme.icon}
	additionalStyles={[styles.alignSelfCenter, !isHovered && styles.opacitySemiTransparent]}
	isButtonIcon
	medium
	/>
	</View>
	)}
	</View>
	</Animated.View>

Issue #77573 - OTP Feedback Missing

Root Cause: Success message is rendered in DotIndicatorMessage component without live region attributes, and input focus changes interrupt potential announcements.

Flow:

1. User taps "Didn't receive a code?" button
2. validateCodeSent state updates, triggering success message render
3. Input clears and refocuses simultaneously
4. DotIndicatorMessage lacks accessibilityLiveRegion and aria-live
5. Input has static accessibilityLabel without success message
6. Focus change interrupts any potential announcement
7. Screen reader announces nothing

Current Implementation:

https://github.com/Expensify/App/blob/0be235ce0b97ddb20137e6bc08d2b391e919b5cf/src/components/DotIndicatorMessage.tsx#L94-L174

App/src/components/ValidateCodeActionModal/ValidateCodeForm/BaseValidateCodeForm.tsx

Lines 240 to 247 in 0be235c

	}
	},
	[validateError, clearError, latestValidateCodeError, validateCodeActionErrorField],
	);
	/**
	* Check that all the form fields are valid, then trigger the submit callback
	*/

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

Issue #77255 - Associate Errors with Inputs

Changes:

1. Add nativeID prop to FormHelpMessage for web linkage:

App/src/components/FormHelpMessage.tsx

Lines 46 to 76 in 0be235c

	const replacedText = Parser.replace(message, {shouldEscapeText: false});
	if (isError) {
	return `<alert-text>${replacedText}</alert-text>`;
	}
	return `<muted-text-label>${replacedText}</muted-text-label>`;
	}, [isError, message, shouldRenderMessageAsHTML]);
	if (isEmpty(message) && isEmpty(children)) {
	return null;
	}
	return (
	<View style={[styles.flexRow, styles.alignItemsCenter, styles.mt2, styles.mb1, style]}>
	{isError && shouldShowRedDotIndicator && (
	<Icon
	src={icons.DotIndicator}
	fill={theme.danger}
	/>
	)}
	{isInfo && (
	<Icon
	src={icons.Exclamation}
	fill={theme.icon}
	small
	additionalStyles={[styles.mr1]}
	/>
	)}
	<View style={[styles.flex1, isError && shouldShowRedDotIndicator ? styles.ml2 : {}]}>
	{children ?? (shouldRenderMessageAsHTML ? <RenderHTML html={HTMLMessage} /> : <Text style={[isError ? styles.formError : styles.formHelp, styles.mb0]}>{message}</Text>)}

// Add nativeID prop to component
type FormHelpMessageProps = {
    // ... existing props
    nativeID?: string;
};

// Update View with role and nativeID
<View
    nativeID={nativeID}
    role={isError ? 'alert' : undefined}
    accessible={isError}
    accessibilityLabel={typeof message === 'string' ? message : undefined}
>

2. Web: Link input to error via aria-describedby:

https://github.com/Expensify/App/blob/0be235ce0b97ddb20137e6bc08d2b391e919b5cf/src/components/TextInput/BaseTextInput/implementation/index.tsx#L500-L600

// Generate unique error message ID
const errorMessageId = useMemo(() => {
    if (!errorText) return undefined;
    return inputID ? `${inputID}-error` : `error-${Math.random().toString(36).substring(7)}`;
}, [errorText, inputID]);

// Add ARIA attributes to input
<InputComponent
    aria-describedby={errorMessageId}
    aria-invalid={!!errorText}
    aria-errormessage={errorMessageId}
/>

// Pass nativeID to FormHelpMessage
<FormHelpMessage
    nativeID={errorMessageId}
    isError={!!errorText}
    message={inputHelpText}
/>

3. Native: Include error in accessibilityHint:

App/src/components/TextInput/BaseTextInput/implementation/index.native.tsx

Lines 200 to 350 in 0be235c

	const hasValueRef = useRef(initialValue.length > 0);
	const inputValue = value ?? '';
	const hasValue = inputValue.length > 0 || hasValueRef.current;
	// Activate or deactivate the label when either focus changes, or for controlled
	// components when the value prop changes:
	useEffect(() => {
	if (
	hasValue ||
	isFocused ||
	// If the text has been supplied by Chrome autofill, the value state is not synced with the value
	// as Chrome doesn't trigger a change event. When there is autofill text, keep the label activated.
	isInputAutoFilled(input.current)
	) {
	activateLabel();
	} else {
	deactivateLabel();
	}
	}, [activateLabel, deactivateLabel, hasValue, isFocused]);
	// When the value prop gets cleared externally, we need to keep the ref in sync:
	useEffect(() => {
	// Return early when component uncontrolled, or we still have a value
	if (value === undefined || value) {
	return;
	}
	hasValueRef.current = false;
	}, [value]);
	/**
	* Set Value & activateLabel
	*/
	const setValue = (newValue: string) => {
	const formattedValue = isMultiline ? newValue : newValue.replaceAll('\n', ' ');
	onInputChange?.(formattedValue);
	if (inputProps.onChangeText) {
	Str.result(inputProps.onChangeText, formattedValue);
	}
	if (formattedValue && formattedValue.length > 0) {
	hasValueRef.current = true;
	// When the component is uncontrolled, we need to manually activate the label:
	if (value === undefined) {
	activateLabel();
	}
	} else {
	hasValueRef.current = false;
	}
	};
	const togglePasswordVisibility = useCallback(() => {
	setPasswordHidden((prevPasswordHidden) => !prevPasswordHidden);
	}, []);
	const shouldAddPaddingBottom = isMultiline || (autoGrowHeight && !isAutoGrowHeightMarkdown && textInputHeight > variables.componentSizeLarge);
	const isReadOnly = inputProps.readOnly ?? inputProps.disabled;
	// Disabling this line for safeness as nullish coalescing works only if the value is undefined or null, and errorText can be an empty string
	// eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
	const inputHelpText = errorText || hint;
	const placeholderValue = !!prefixCharacter || !!suffixCharacter || isFocused || !hasLabel || (hasLabel && forceActiveLabel) ? placeholder : undefined;
	const newTextInputContainerStyles: StyleProp<ViewStyle> = StyleSheet.flatten([
	styles.textInputContainer,
	!hasLabel && styles.pt0,
	textInputContainerStyles,
	!shouldApplyPaddingToContainer && styles.p0,
	!!contentWidth && StyleUtils.getWidthStyle(textInputWidth + (shouldApplyPaddingToContainer ? styles.textInputContainer.padding * 2 : 0)),
	autoGrow && StyleUtils.getAutoGrowWidthInputContainerStyles(textInputWidth, autoGrowExtraSpace, autoGrowMarginSide),
	!hideFocusedState && isFocused && styles.borderColorFocus,
	(!!hasError || !!errorText) && styles.borderColorDanger,
	autoGrowHeight && {scrollPaddingTop: typeof maxAutoGrowHeight === 'number' ? 2 * maxAutoGrowHeight : undefined},
	isAutoGrowHeightMarkdown && styles.pb2,
	inputProps.disabled && styles.textInputDisabledContainer,
	shouldAddPaddingBottom && styles.pb1,
	]);
	const verticalPaddingDiff = StyleUtils.getVerticalPaddingDiffFromStyle(newTextInputContainerStyles);
	const inputPaddingLeft = !!prefixCharacter && StyleUtils.getPaddingLeft(prefixCharacterPadding + styles.pl1.paddingLeft);
	const inputPaddingRight = !!suffixCharacter && StyleUtils.getPaddingRight(StyleUtils.getCharacterPadding(suffixCharacter) + styles.pr1.paddingRight);
	// Height fix is needed only for Text single line inputs
	const shouldApplyHeight = !shouldUseFullInputHeight && !isMultiline && !isMarkdownEnabled;
	const accessibilityLabel = [label, hint].filter(Boolean).join(', ');
	const isKeyboardType = props.keyboardType ? undefined : props.inputMode;
	return (
	<>
	<View style={[containerStyles]}>
	<PressableWithoutFeedback
	role={CONST.ROLE.PRESENTATION}
	onPress={onPress}
	tabIndex={-1}
	// When autoGrowHeight is true we calculate the width for the text input, so it will break lines properly
	// or if multiline is not supplied we calculate the text input height, using onLayout.
	onLayout={onLayout}
	accessibilityLabel={accessibilityLabel}
	style={[
	autoGrowHeight &&
	!isAutoGrowHeightMarkdown &&
	styles.autoGrowHeightInputContainer(
	textInputHeight + (shouldAddPaddingBottom ? styles.textInputContainer.padding : 0),
	variables.componentSizeLarge,
	typeof maxAutoGrowHeight === 'number' ? maxAutoGrowHeight : 0,
	),
	isAutoGrowHeightMarkdown && {minHeight: variables.inputHeight},
	!isMultiline && styles.componentHeightLarge,
	touchableInputWrapperStyle,
	]}
	sentryLabel={props.sentryLabel}
	>
	<View
	style={[
	newTextInputContainerStyles,
	// When autoGrow is on and minWidth is not supplied, add a minWidth to allow the input to be focusable.
	autoGrow && !newTextInputContainerStyles?.minWidth && styles.mnw2,
	]}
	>
	{hasLabel ? (
	<TextInputLabel
	label={label}
	labelTranslateY={labelTranslateY}
	labelScale={labelScale}
	for={inputProps.nativeID}
	isMultiline={isMultiline}
	/>
	) : null}
	<View style={[styles.textInputAndIconContainer, styles.flex1, isMultiline && hasLabel && styles.textInputMultilineContainer, styles.pointerEventsBoxNone]}>
	{!!iconLeft && (
	<View style={styles.textInputLeftIconContainer}>
	<Icon
	src={iconLeft}
	fill={theme.icon}
	height={20}
	width={20}
	/>
	</View>
	)}
	{!!prefixCharacter && (
	<View style={[styles.textInputPrefixWrapper, prefixContainerStyle, shouldApplyHeight && {height}]}>
	<Text
	onLayout={(event) => {
	if (event.nativeEvent.layout.width === 0 && event.nativeEvent.layout.height === 0) {
	return;
	}
	setPrefixCharacterPadding(event?.nativeEvent?.layout.width);
	setIsPrefixCharacterPaddingCalculated(true);
	}}
	tabIndex={-1}
	style={[styles.textInputPrefix, !hasLabel && styles.pv0, styles.pointerEventsNone, prefixStyle]}

// Append error to hint
const accessibilityHint = useMemo(() => {
    if (errorText) {
        return hint ? `${hint}. Error: ${errorText}` : `Error: ${errorText}`;
    }
    return hint || undefined;
}, [errorText, hint]);

// Apply to input
<InputComponent
    accessibilityHint={accessibilityHint}
    accessibilityState={{disabled: inputProps.disabled ?? false}}
/>

Issue #76951 - Add List Semantics

Changes:

1. Add LISTITEM constant:

App/src/CONST/index.ts

Line 5491 in 0be235c

/** Use for a list of choices or options. */

ROLE: {
    // ... existing roles
    LIST: 'list',
    LISTITEM: 'listitem',
    // ... rest
}

2. Add list structure with position info:

App/src/pages/settings/Subscription/SubscriptionPlan/SubscriptionPlanCard.tsx

Lines 58 to 83 in 0be235c

	const renderBenefits = () => {
	const amountOfRows = Math.ceil(benefits.length / benefitsColumns);
	return Array.from({length: amountOfRows}).map((_, rowIndex) => (
	<View
	// eslint-disable-next-line react/no-array-index-key
	key={`row-${rowIndex}`}
	style={styles.flexRow}
	>
	{benefits.slice(rowIndex * benefitsColumns, (rowIndex + 1) * benefitsColumns).map((item) => (
	<View
	key={item}
	style={[styles.flex1, styles.flexRow, styles.alignItemsCenter, shouldUseNarrowLayout ? styles.mt3 : styles.mt4]}
	>
	<Icon
	src={Expensicons.Checkmark}
	fill={theme.iconSuccessFill}
	width={variables.iconSizeSmall}
	height={variables.iconSizeSmall}
	/>
	<Text style={[styles.textLabelSupporting, styles.ml2]}>{item}</Text>
	</View>
	))}
	</View>
	));
	};

const renderBenefits = () => {
    const amountOfRows = Math.ceil(benefits.length / benefitsColumns);
    const totalBenefits = benefits.length;
    const benefitsListLabel = translate('subscription.yourPlan.planBenefits');

    return (
        <View
            role={CONST.ROLE.LIST}
            aria-label={benefitsListLabel}
            accessibilityLabel={`${benefitsListLabel}, ${totalBenefits} items`}
        >
            {Array.from({length: amountOfRows}).map((_, rowIndex) => (
                <View key={`row-${rowIndex}`} style={styles.flexRow} role={CONST.ROLE.PRESENTATION}>
                    {benefits.slice(rowIndex * benefitsColumns, (rowIndex + 1) * benefitsColumns).map((item, columnIndex) => {
                        const itemPosition = rowIndex * benefitsColumns + columnIndex + 1;
                        return (
                            <View
                                key={item}
                                style={[styles.flex1, styles.flexRow, styles.alignItemsCenter, shouldUseNarrowLayout ? styles.mt3 : styles.mt4]}
                                role={CONST.ROLE.LISTITEM}
                                aria-posinset={itemPosition}
                                aria-setsize={totalBenefits}
                                aria-label={item}
                                accessible
                                accessibilityLabel={`${item}, item ${itemPosition} of ${totalBenefits}`}
                            >
                                <View aria-hidden importantForAccessibility="no-hide-descendants" style={[styles.flexRow, styles.alignItemsCenter]}>
                                    <Icon src={Expensicons.Checkmark} fill={theme.iconSuccessFill} width={variables.iconSizeSmall} height={variables.iconSizeSmall} />
                                    <Text style={[styles.textLabelSupporting, styles.ml2]}>{item}</Text>
                                </View>
                            </View>
                        );
                    })}
                </View>
            ))}
        </View>
    );
};

3. Add translation key to all 10 language files (en, es, de, fr, it, ja, nl, pl, pt-BR, zh-hans):

subscription: {
    yourPlan: {
        planBenefits: 'Plan benefits', // English
        // Translated appropriately in each language file
    }
}

Issue #76914 - Add Table Semantics

Changes:

1. Add table role constants:

App/src/CONST/index.ts

Line 5491 in 0be235c

/** Use for a list of choices or options. */

ROLE: {
    // ... existing
    TABLE: 'table',
    ROW: 'row',
    ROWGROUP: 'rowgroup',
    COLUMNHEADER: 'columnheader',
    CELL: 'cell',
    // ... rest
}

2. Add table header with column headers:

App/src/pages/workspace/WorkspacesListPage.tsx

Lines 708 to 736 in 0be235c

	{!isLessThanMediumScreen && filteredWorkspaces.length > 0 && (
	<View style={[styles.flexRow, styles.gap5, styles.pt2, styles.pb3, styles.pr5, styles.pl10, styles.appBG]}>
	<View style={[styles.flexRow, styles.flex2]}>
	<Text
	numberOfLines={1}
	style={[styles.flexGrow1, styles.textLabelSupporting]}
	>
	{translate('workspace.common.workspaceName')}
	</Text>
	</View>
	<View style={[styles.flexRow, styles.flex1, styles.workspaceOwnerSectionTitle, styles.workspaceOwnerSectionMinWidth]}>
	<Text
	numberOfLines={1}
	style={[styles.flexGrow1, styles.textLabelSupporting]}
	>
	{translate('workspace.common.workspaceOwner')}
	</Text>
	</View>
	<View style={[styles.flexRow, styles.flex1, styles.workspaceTypeSectionTitle]}>
	<Text
	numberOfLines={1}
	style={[styles.flexGrow1, styles.textLabelSupporting]}
	>
	{translate('workspace.common.workspaceType')}
	</Text>
	</View>
	<View style={[styles.workspaceRightColumn, styles.mr7]} />
	</View>
	)}

{!isLessThanMediumScreen && filteredWorkspaces.length > 0 && (
    <View role={CONST.ROLE.ROWGROUP} style={[styles.flexRow, styles.gap5, styles.pt2, styles.pb3, styles.pr5, styles.pl10, styles.appBG]}>
        <View role={CONST.ROLE.COLUMNHEADER} style={[styles.flexRow, styles.flex2]} accessible accessibilityLabel={translate('workspace.common.workspaceName')}>
            <Text>{translate('workspace.common.workspaceName')}</Text>
        </View>
        <View role={CONST.ROLE.COLUMNHEADER} style={[styles.flex1]} accessible accessibilityLabel={translate('workspace.common.workspaceOwner')}>
            <Text>{translate('workspace.common.workspaceOwner')}</Text>
        </View>
        <View role={CONST.ROLE.COLUMNHEADER} style={[styles.flex1]} accessible accessibilityLabel={translate('workspace.common.workspaceType')}>
            <Text>{translate('workspace.common.workspaceType')}</Text>
        </View>
    </View>
)}

3. Wrap FlatList with table role:

App/src/pages/workspace/WorkspacesListPage.tsx

Line 844 in 0be235c

/>

<View
    style={styles.flex1}
    role={!isLessThanMediumScreen && filteredWorkspaces.length > 0 ? CONST.ROLE.TABLE : undefined}
    aria-label={!isLessThanMediumScreen && filteredWorkspaces.length > 0 ? translate('workspace.common.workspacesTable') : undefined}
    accessibilityLabel={!isLessThanMediumScreen && filteredWorkspaces.length > 0 ? translate('workspace.common.workspacesTable') : undefined}
>
    <FlatList ... />
</View>

4. Add row role to Pressable wrapper (desktop only):

App/src/pages/workspace/WorkspacesListPage.tsx

Line 487 in 0be235c

<PressableWithoutFeedback

<PressableWithoutFeedback
    role={isLessThanMediumScreen ? CONST.ROLE.BUTTON : CONST.ROLE.ROW}
    accessible
    accessibilityLabel={accessibilityLabel}
    onPress={item.action}
>

5. Add cell roles to WorkspacesListRow columns:

App/src/pages/workspace/WorkspacesListRow.tsx

Lines 235 to 315 in 0be235c

	size={CONST.AVATAR_SIZE.DEFAULT}
	source={workspaceIcon}
	fallbackIcon={fallbackWorkspaceIcon}
	avatarID={policyID}
	name={title}
	type={CONST.ICON_TYPE_WORKSPACE}
	/>
	<TextWithTooltip
	text={title}
	shouldShowTooltip
	style={[styles.flex1, styles.flexGrow1, styles.textStrong, isDeleted ? styles.offlineFeedbackDeleted : {}]}
	/>
	</View>
	{isNarrow && ThreeDotMenuOrPendingIcon}
	</View>
	<View style={[styles.flexRow, isWide && styles.flex1, isWide && styles.workspaceOwnerSectionMinWidth, styles.gap2, styles.alignItemsCenter]}>
	{!!ownerDetails && (
	<>
	<Avatar
	source={ownerDetails.avatar}
	avatarID={ownerDetails.accountID}
	type={CONST.ICON_TYPE_AVATAR}
	size={CONST.AVATAR_SIZE.SMALL}
	containerStyles={styles.workspaceOwnerAvatarWrapper}
	/>
	<View style={styles.flex1}>
	<WorkspacesListRowDisplayName
	isDeleted={isDeleted}
	ownerName={getDisplayNameOrDefault(ownerDetails)}
	/>
	<Text
	numberOfLines={1}
	style={[styles.textMicro, styles.textSupporting, isDeleted ? styles.offlineFeedbackDeleted : {}]}
	>
	{Str.removeSMSDomain(ownerDetails?.login ?? '')}
	</Text>
	</View>
	</>
	)}
	</View>
	<View style={[styles.flexRow, isWide && styles.flex1, styles.gap2, styles.alignItemsCenter]}>
	<Icon
	src={workspaceTypeIcon(workspaceType)}
	width={variables.workspaceTypeIconWidth}
	height={variables.workspaceTypeIconWidth}
	additionalStyles={styles.workspaceTypeWrapper}
	/>
	<View>
	{!!workspaceType && (
	<Text
	numberOfLines={1}
	style={[styles.labelStrong, isDeleted ? styles.offlineFeedbackDeleted : {}]}
	>
	{getUserFriendlyWorkspaceType(workspaceType, translate)}
	</Text>
	)}
	<Text
	numberOfLines={1}
	style={[styles.textMicro, styles.textSupporting, isDeleted ? styles.offlineFeedbackDeleted : {}]}
	>
	{translate('workspace.common.plan')}
	</Text>
	</View>
	</View>
	</View>
	<View style={[styles.flexRow, styles.alignItemsCenter]}>
	{!isNarrow && ThreeDotMenuOrPendingIcon}
	{!isNarrow && (
	<View style={[styles.justifyContentCenter, styles.alignItemsCenter, styles.touchableButtonImage]}>
	<Icon
	src={icons.ArrowRight}
	fill={theme.icon}
	additionalStyles={[styles.alignSelfCenter, !isHovered && styles.opacitySemiTransparent]}
	isButtonIcon
	medium
	/>
	</View>
	)}
	</View>
	</Animated.View>

// Workspace name cell
<View
    role={isWide ? CONST.ROLE.CELL : undefined}
    accessible={isWide}
    accessibilityLabel={isWide ? title : undefined}
>
    <View aria-hidden={isWide} importantForAccessibility={isWide ? 'no-hide-descendants' : undefined}>
        <Avatar ... />
        <TextWithTooltip ... />
    </View>
</View>

// Owner cell
<View
    role={isWide ? CONST.ROLE.CELL : undefined}
    accessible={isWide}
    accessibilityLabel={isWide ? workspaceOwnerName : undefined}
>
    <View aria-hidden={isWide} importantForAccessibility={isWide ? 'no-hide-descendants' : undefined}>
        <Avatar ... />
        <WorkspacesListRowDisplayName ... />
    </View>
</View>

// Type cell
<View
    role={isWide ? CONST.ROLE.CELL : undefined}
    accessible={isWide}
    accessibilityLabel={isWide ? workspaceTypeText : undefined}
>
    <View aria-hidden={isWide} importantForAccessibility={isWide ? 'no-hide-descendants' : undefined}>
        <Icon ... />
        <Text ... />
    </View>
</View>

6. Add translation key to all 10 language files:

workspace: {
    common: {
        workspacesTable: 'Workspaces table',
    }
}

Issue #77573 - Add OTP Feedback Announcement

Changes:

1. Add live region to DotIndicatorMessage:

https://github.com/Expensify/App/blob/0be235ce0b97ddb20137e6bc08d2b391e919b5cf/src/components/DotIndicatorMessage.tsx#L47-L174

// Memoize unique messages
const uniqueMessages = useMemo(() => {
    const sortedMessages = Object.keys(messages)
        .sort()
        .map((key) => messages[key])
        .filter((message): message is string | ReceiptError | TranslationKeyError | ReactElement => message !== null);
    return [...new Set(sortedMessages)].map((message) => message);
}, [messages]);

// Build clean announcement text (strip HTML)
const announcementText = useMemo(() => {
    return uniqueMessages
        .map((message) => {
            if (isReceiptError(message)) {
                return Parser.htmlToText(translate('iou.error.receiptFailureMessage'));
            }
            if (isTranslationKeyError(message)) {
                return Parser.htmlToText(translate(message.translationKey));
            }
            return typeof message === 'string' ? Parser.htmlToText(message) : '';
        })
        .filter(Boolean)
        .join('. ');
}, [uniqueMessages, translate]);

// Add live region attributes
<View
    style={styles.offlineFeedbackTextContainer}
    accessible
    accessibilityLiveRegion="polite"
    accessibilityLabel={announcementText}
    aria-live="polite"
    aria-label={announcementText}
    role={CONST.ROLE.STATUS}
>
    {uniqueMessages.map(renderMessage)}
</View>

2. Add dynamic accessibility label to input:

App/src/components/ValidateCodeActionModal/ValidateCodeForm/BaseValidateCodeForm.tsx

Lines 97 to 292 in 0be235c

	function BaseValidateCodeForm({
	autoComplete = 'one-time-code',
	ref = () => {},
	hasMagicCodeBeenSent,
	validateCodeActionErrorField,
	validatePendingAction,
	validateError,
	handleSubmitForm,
	clearError,
	sendValidateCode,
	buttonStyles,
	hideSubmitButton,
	submitButtonText,
	isLoading,
	shouldShowSkipButton = false,
	handleSkipButtonPress,
	isInPageModal = false,
	}: ValidateCodeFormProps) {
	const {translate} = useLocalize();
	const {isOffline} = useNetwork();
	const {wideRHPRouteKeys} = useWideRHPState();
	const theme = useTheme();
	const styles = useThemeStyles();
	const StyleUtils = useStyleUtils();
	const [formError, setFormError] = useState<ValidateCodeFormError>({});
	const [validateCode, setValidateCode] = useState('');
	const [isCountdownRunning, setIsCountdownRunning] = useState(true);
	const inputValidateCodeRef = useRef<MagicCodeInputHandle>(null);
	const [account = getEmptyObject<Account>()] = useOnyx(ONYXKEYS.ACCOUNT, {
	canBeMissing: true,
	});
	// eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing -- nullish coalescing doesn't achieve the same result in this case
	const shouldDisableResendValidateCode = !!isOffline || account?.isLoading;
	const focusTimeoutRef = useRef<NodeJS.Timeout | null>(null);
	const [canShowError, setCanShowError] = useState<boolean>(false);
	const [validateCodeAction] = useOnyx(ONYXKEYS.VALIDATE_ACTION_CODE, {canBeMissing: true});
	const validateCodeSent = useMemo(() => hasMagicCodeBeenSent ?? validateCodeAction?.validateCodeSent, [hasMagicCodeBeenSent, validateCodeAction?.validateCodeSent]);
	const latestValidateCodeError = getLatestErrorField(validateCodeAction, validateCodeActionErrorField);
	const defaultValidateCodeError = getLatestErrorField(validateCodeAction, 'actionVerified');
	const countdownRef = useRef<ValidateCodeCountdownHandle | null>(null);
	const clearDefaultValidationCodeError = useCallback(() => {
	// Clear "Failed to send magic code" error
	if (isEmptyObject(defaultValidateCodeError)) {
	return;
	}
	clearValidateCodeActionError('actionVerified');
	}, [defaultValidateCodeError]);
	useImperativeHandle(ref, () => ({
	focus() {
	inputValidateCodeRef.current?.focus();
	},
	focusLastSelected() {
	if (!inputValidateCodeRef.current) {
	return;
	}
	if (focusTimeoutRef.current) {
	clearTimeout(focusTimeoutRef.current);
	}
	focusTimeoutRef.current = setTimeout(() => {
	inputValidateCodeRef.current?.focusLastSelected();
	}, CONST.ANIMATED_TRANSITION);
	},
	}));
	useFocusEffect(
	useCallback(() => {
	if (!inputValidateCodeRef.current) {
	return;
	}
	if (focusTimeoutRef.current) {
	clearTimeout(focusTimeoutRef.current);
	}
	// Keyboard won't show if we focus the input with a delay, so we need to focus immediately.
	if (!isMobileSafari()) {
	focusTimeoutRef.current = setTimeout(() => {
	inputValidateCodeRef.current?.focusLastSelected();
	}, CONST.ANIMATED_TRANSITION);
	} else {
	inputValidateCodeRef.current?.focusLastSelected();
	}
	return () => {
	if (!focusTimeoutRef.current) {
	return;
	}
	clearTimeout(focusTimeoutRef.current);
	};
	}, []),
	);
	useEffect(() => {
	if (!isCountdownRunning) {
	return;
	}
	countdownRef.current?.resetCountdown();
	}, [isCountdownRunning]);
	useEffect(() => {
	if (!validateCodeSent) {
	return;
	}
	// Delay prevents the input from gaining focus before the RHP slide-out animation finishes,
	// which would cause issues with the RHP sliding out smoothly and flickering of the wide RHP in the background.
	if ((wideRHPRouteKeys.length > 0 && !isMobileSafari()) || isInPageModal) {
	focusTimeoutRef.current = setTimeout(() => {
	inputValidateCodeRef.current?.clear();
	}, CONST.ANIMATED_TRANSITION);
	} else {
	inputValidateCodeRef.current?.clear();
	}
	}, [validateCodeSent, wideRHPRouteKeys.length, isInPageModal]);
	/**
	* Request a validate code / magic code be sent to verify this contact method
	*/
	const resendValidateCode = () => {
	sendValidateCode();
	inputValidateCodeRef.current?.clear();
	countdownRef.current?.resetCountdown();
	setIsCountdownRunning(true);
	};
	/**
	* Handle text input and clear formError upon text change
	*/
	const onTextInput = useCallback(
	(text: string) => {
	setValidateCode(text);
	setFormError({});
	if (!isEmptyObject(validateError) || !isEmptyObject(latestValidateCodeError)) {
	// Clear flow specific error
	clearError();
	// Clear "incorrect magic code" error
	clearValidateCodeActionError(validateCodeActionErrorField);
	}
	},
	[validateError, clearError, latestValidateCodeError, validateCodeActionErrorField],
	);
	/**
	* Check that all the form fields are valid, then trigger the submit callback
	*/
	const validateAndSubmitForm = useCallback(() => {
	// Clear flow specific error
	clearError();
	// Clear "incorrect magic" code error
	clearValidateCodeActionError(validateCodeActionErrorField);
	clearDefaultValidationCodeError();
	setCanShowError(true);
	if (!validateCode.trim()) {
	setFormError({validateCode: 'validateCodeForm.error.pleaseFillMagicCode'});
	return;
	}
	if (!isValidValidateCode(validateCode)) {
	setFormError({validateCode: 'validateCodeForm.error.incorrectMagicCode'});
	return;
	}
	setFormError({});
	handleSubmitForm(validateCode);
	}, [validateCode, handleSubmitForm, validateCodeActionErrorField, clearError, clearDefaultValidationCodeError]);
	const errorText = useMemo(() => {
	if (!canShowError) {
	return '';
	}
	if (formError?.validateCode) {
	return translate(formError?.validateCode);
	}
	return getLatestErrorMessage(account ?? {});
	}, [canShowError, formError?.validateCode, account, translate]);
	const shouldShowTimer = isCountdownRunning && !isOffline;
	const handleCountdownFinish = useCallback(() => {
	setIsCountdownRunning(false);
	}, []);
	// latestValidateCodeError only holds an error related to bad magic code
	// while validateError holds flow-specific errors
	const finalValidateError = !isEmptyObject(latestValidateCodeError) ? latestValidateCodeError : validateError;
	return (
	<>
	<MagicCodeInput

// Build label that includes success message when code is sent
const magicCodeInputAccessibilityLabel = useMemo(() => {
    if (validateCodeSent) {
        return translate('validateCodeModal.successfulNewCodeRequest');
    }
    return undefined;
}, [validateCodeSent, translate]);

// Pass to input
<MagicCodeInput
    accessibilityLabel={magicCodeInputAccessibilityLabel}
    // ... other props
/>

3. Make input accessible when label is provided:

App/src/components/MagicCodeInput.tsx

Lines 200 to 250 in 0be235c

	lastFocusedIndex.current = 0;
	editIndex.current = 0;
	inputRef.current?.focus();
	};
	const setInputAndIndex = (index: number) => {
	setInput(TEXT_INPUT_EMPTY_STATE);
	setFocusedIndex(index);
	editIndex.current = index;
	};
	useImperativeHandle(ref, () => ({
	focus() {
	focusMagicCodeInput();
	},
	focusLastSelected() {
	inputRef.current?.focus();
	setFocusedIndex(lastFocusedIndex.current);
	},
	resetFocus() {
	setInput(TEXT_INPUT_EMPTY_STATE);
	focusMagicCodeInput();
	},
	clear() {
	lastFocusedIndex.current = 0;
	setInputAndIndex(0);
	inputRef.current?.focus();
	onChangeTextProp('');
	},
	blur() {
	blurMagicCodeInput();
	},
	}));
	const validateAndSubmit = () => {
	const numbers = decomposeString(value, maxLength);
	// eslint-disable-next-line @typescript-eslint/no-use-before-define
	if (wasSubmitted || !shouldSubmitOnComplete || numbers.filter((n) => isNumeric(n)).length !== maxLength || isOffline) {
	return;
	}
	if (!wasSubmitted) {
	setWasSubmitted(true);
	}
	// Blurs the input and removes focus from the last input and, if it should submit
	// on complete, it will call the onFulfill callback.
	blurMagicCodeInput();
	onFulfill(value);
	lastValue.current = '';
	};
	const {isOffline} = useNetwork({onReconnect: validateAndSubmit});

<TextInput
    role={CONST.ROLE.PRESENTATION}
    accessible={!!accessibilityLabel}
    accessibilityLabel={`${accessibilityLabel ?? translate('common.magicCode')}, ${maxLength} ${translate('common.digits')}`}
/>