Screen Reader: Track Distance: The button 'refer your boss' grouped with the button 'x'

[nbhardwaj-del]

Action Performed:

Prerequisites:

• The user is signed in
• The start and stop points have been selected on the track distance page

1. Using Chrome + JAWS, open the URL - https://new.expensify.com/
2. Navigate to the "+" icon and press Enter
3. Tab to the "Track distance" menu item and press Enter to open the Pop-up
4. After selecting the "Start/stop" points, Tab to the "Next" button and press Enter
5. Tab to the "Expensify.org / Teachers Unite" and press Enter to open
6. Tab to the "refer your boss" and the close "X" button
7. Observe the screen reader announcement

Expected Result:

Each interactive element must expose a correct accessible role, name, and be announced individually.

Here, each button should be announced separately:

• 'Submit an expense, refer your boss button'
• 'Close button'

Actual Result:

The 'refer your boss' button is announced without a role as 'Submit an expense, refer your boss', so that the screen reader users cannot identify it as a button element.
The close 'X' button is grouped with the control together, and it is announced as 'referral close button'.

HTML:

Submit an expense, refer your boss.

Area issue was found in:

Track Distance

Failed WCAG checkpoints

WCAG 4.1.2 Name, Role, Value
https://www.w3.org/WAI/WCAG22/Understanding/name-role-value

User impact:

Providing role, state, and value information on all user interface components enables compatibility with assistive technology, such as screen readers, screen magnifiers, and speech recognition software, used by people with disabilities.

Suggested resolution:

Ensure the 'refer your boss' button and the close 'X' button are coded as two separate interactive elements, not grouped or nested inside the same element
Remove the aria-label and tabindex="0" from the wrapping

. Ensure the button 'refer your boss' is implemented as a separate button, so it focuses and announces separately from the button 'x'.
https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Roles
https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes

Environment(s)

Windows Windows 11 Home - Chrome

Screenshots/Videos

Bug6996996_1762515483226.The_button__refrer_your_boss__announced_without_role__grouped_with_the_button__x_.mp4

Version Number: NA
Reproducible in staging?: NA
Reproducible in production?: Yes
Email or phone of affected tester (no customers): NA
Logs: https://stackoverflow.com/c/expensify/questions/4856 NA
Notes/Photos/Videos: Any additional supporting documentation Yes
Expensify/Expensify Issue URL: https://platform.applause.com/company/12102/products/36605/community-issues/6996996
Issue reported by: NA
Slack conversation: NA

[mavrickdeveloper]

PROPOSAL

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

The 'refer your boss' button is announced without a role as 'Submit an expense, refer your boss', so that the screen reader users cannot identify it as a button element.
The close 'X' button is grouped with the control together, and it is announced as 'referral close button'.

What is the root cause of that problem?

The issue is in /src/components/ReferralProgramCTA.tsx:

App/src/components/ReferralProgramCTA.tsx

Lines 47 to 77 in d34df44

	return (
	<PressableWithoutFeedback
	onPress={() => {
	Navigation.navigate(ROUTES.REFERRAL_DETAILS_MODAL.getRoute(referralContentType, Navigation.getActiveRouteWithoutParams()));
	}}
	style={[styles.br2, styles.highlightBG, styles.flexRow, styles.justifyContentBetween, styles.alignItemsCenter, {gap: 10, padding: 10}, styles.pl5, style]}
	isNested
	accessibilityLabel="referral"
	role={getButtonRole(true)}
	>
	<RenderHTML html={translate(`referralProgram.${referralContentType}.buttonText`)} />
	<Tooltip text={translate('common.close')}>
	<PressableWithoutFeedback
	onPress={handleDismissCallToAction}
	onMouseDown={(e) => {
	e.preventDefault();
	}}
	style={[styles.touchableButtonImage]}
	role={CONST.ROLE.BUTTON}
	accessibilityLabel={translate('common.close')}
	>
	<Icon
	src={Close}
	height={20}
	width={20}
	fill={theme.icon}
	/>
	</PressableWithoutFeedback>
	</Tooltip>
	</PressableWithoutFeedback>
	);

1-Wrong role assignment on web
Lets look at getButtonRole:

App/src/components/Button/utils/index.web.ts

Lines 1 to 7 in d34df44

	import CONST from '@src/CONST';
	import type {GetButtonRole} from './types';
	const getButtonRole: GetButtonRole = (isNested) => (isNested ? CONST.ROLE.PRESENTATION : CONST.ROLE.BUTTON);
	// eslint-disable-next-line import/prefer-default-export
	export {getButtonRole};

When isNested=true is passed (line 53), the function returns CONST.ROLE.PRESENTATION ('presentation') on web. This tells screen readers the element has no semantic meaning , yet it's an interactive element with an onPress handler

This causes the HTML output:
<div aria-label="referral" role="presentation" tabindex="0" ...>

A role="presentation" element should NOT be focusable or interactive.

2-Generic Accessibility Label

accessibilityLabel="referral" (line 54) is:

-Too vague & doesn't describe the action
-Doesn't match the visible text ("Submit an expense, refer your boss")
-Violates WCAG 2.5.3 (Label in Name)

3-Nested interactive elements
The close button is nested inside the parent pressable. This creates:

-Semantic grouping that confuses screen readers
-The parent's aria-label="referral" gets combined with the close button's label → "referral close button"
-Focus order issues
-Click event propagation problems

WCAG Violations
4.1.2 Name, Role, Value: Interactive elements must have proper roles and accessible names
2.5.3 Label in Name: The accessible name should contain the visible text
1.3.1 Info and Relationships: The programmatic structure doesn't match the visual presentation

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

The fix restructures the component to have the main action and close button as siblings instead of nested:

import React, {useEffect} from 'react';
import type {StyleProp, ViewStyle} from 'react-native';
import {View} from 'react-native';
import useDismissedReferralBanners from '@hooks/useDismissedReferralBanners';
import useLocalize from '@hooks/useLocalize';
import useTheme from '@hooks/useTheme';
import useThemeStyles from '@hooks/useThemeStyles';
import CONST from '@src/CONST';
import Navigation from '@src/libs/Navigation/Navigation';
import ROUTES from '@src/ROUTES';
import Icon from './Icon';
import {Close} from './Icon/Expensicons';
import {PressableWithoutFeedback} from './Pressable';
import RenderHTML from './RenderHTML';
import Tooltip from './Tooltip';

type ReferralProgramCTAProps = {
    referralContentType: typeof CONST.REFERRAL_PROGRAM.CONTENT_TYPES.SUBMIT_EXPENSE | typeof CONST.REFERRAL_PROGRAM.CONTENT_TYPES.START_CHAT;
    style?: StyleProp<ViewStyle>;
    onDismiss?: () => void;
};

function ReferralProgramCTA({referralContentType, style, onDismiss}: ReferralProgramCTAProps) {
    const {translate} = useLocalize();
    const styles = useThemeStyles();
    const theme = useTheme();
    const {isDismissed, setAsDismissed} = useDismissedReferralBanners({referralContentType});

    const handleDismissCallToAction = () => {
        setAsDismissed();
        onDismiss?.();
    };

    const shouldShowBanner = referralContentType && !isDismissed;

    useEffect(() => {
        if (shouldShowBanner) {
            return;
        }
        onDismiss?.();
    }, [onDismiss, shouldShowBanner]);

    if (!shouldShowBanner) {
        return null;
    }

    // Get the plain text header for accessibility (without HTML tags)
    const accessibilityLabel = translate(`referralProgram.${referralContentType}.header`);

    return (
        <View style={[styles.br2, styles.highlightBG, styles.flexRow, styles.justifyContentBetween, styles.alignItemsCenter, {gap: 10, padding: 10}, styles.pl5, style]}>
            <PressableWithoutFeedback
                onPress={() => {
                    Navigation.navigate(ROUTES.REFERRAL_DETAILS_MODAL.getRoute(referralContentType, Navigation.getActiveRouteWithoutParams()));
                }}
                style={[styles.flex1]}
                accessibilityLabel={accessibilityLabel}
                role={CONST.ROLE.BUTTON}
            >
                <RenderHTML html={translate(`referralProgram.${referralContentType}.buttonText`)} />
            </PressableWithoutFeedback>
            <Tooltip text={translate('common.close')}>
                <PressableWithoutFeedback
                    onPress={handleDismissCallToAction}
                    onMouseDown={(e) => {
                        e.preventDefault();
                    }}
                    style={[styles.touchableButtonImage]}
                    role={CONST.ROLE.BUTTON}
                    accessibilityLabel={translate('common.close')}
                >
                    <Icon
                        src={Close}
                        height={20}
                        width={20}
                        fill={theme.icon}
                    />
                </PressableWithoutFeedback>
            </Tooltip>
        </View>
    );
}

export default ReferralProgramCTA;

[melvin-bot]

8 days overdue is a lot. Should this be a Weekly issue? If so, feel free to change it!

[melvin-bot]

10 days overdue. I'm getting more depressed than Marvin.

[melvin-bot]

This issue has not been updated in over 14 days. eroding to Weekly issue.