[Due for payment 2026-01-30] Screen Reader: Workspace-Reports: The switch button is announced without part of displayed text

[nbhardwaj-del]

Action Performed:

Prerequisite:

• User is logged in

Steps:

1. Using Chrome, open the URL: https://new.expensify.com/
2. Tab to focus on the required workspace and press Enter to activate it
3. Once the Workspace menu is displayed, tab to focus on the "Reports" menu item and press Enter to activate it
4. Tab to focus on the "Report fields" toggle switch and press Enter to expand it
5. Observe the screen reader announcement

Other Occurrences:

1. On Workspaces - Rules
2. On Workspace - More features

Expected Result:

The switch button should be announced with the complete visible label and description.
Expected Announcement:
Report fields, Report fields apply to all spend and can be helpful when you'd like to prompt for extra information, switch off

Actual Result:

When navigating to the switch button, only the visible label "Report fields" is announced by the screen reader. The descriptive text displayed below the visible label (e.g., “Report fields apply to all spend and can be helpful when you'd like to prompt for extra information.") is not conveyed to the users. As a result, users may not fully understand the purpose or context of the switch.

HTML:

Report fields

Report fields apply to all spend and can be helpful when you'd like to prompt for extra information.

Area issue was found in:

Workspace-Reports

Failed WCAG checkpoints

WCAG 2.4.6 Headings and Labels
https://www.w3.org/WAI/WCAG22/Understanding/headings-and-labels

User impact:

Descriptive headings are necessary for users who have disabilities that make reading slow and for people with limited short-term memory. These users benefit when section titles make it possible to predict what each section contains. Form input controls with labels that clearly describe the content that is expected to be entered helps users know how to successfully complete the form.

Suggested resolution:

Use aria-labelledby attribute to programmatically associate the full visible label and relevant description with the switch control so that the entire displayed text is announced accurately when the user navigates to it.

Refer:
https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-labelledby
https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-describedby

Environment(s)

Windows 11 Home - Chrome

Screenshots/Videos

Bug6996233_1762492189486.Screen_Reader-Workspace-Reports-The_switch_button_is_announced_without_part_of_displayed_text.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/6996233
Issue reported by: NA
Slack conversation: NA

[mavrickdeveloper]

PROPOSAL

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

When navigating to the switch button, only the visible label "Report fields" is announced by the screen reader. The descriptive text displayed below the visible label (e.g., “Report fields apply to all spend and can be helpful when you'd like to prompt for extra information.") is not conveyed to the users. As a result, users may not fully understand the purpose or context of the switch

What is the root cause of that problem?

1. Switch.tsx /No hint support

App/src/components/Switch.tsx

Lines 10 to 28 in d34df44

	type SwitchProps = {
	/** Whether the switch is toggled to the on position */
	isOn: boolean;
	/** Callback to fire when the switch is toggled */
	onToggle: (isOn: boolean) => void;
	/** Accessibility label for the switch */
	accessibilityLabel: string;
	/** Whether the switch is disabled */
	disabled?: boolean;
	/** Whether to show the lock icon even if the switch is enabled */
	showLockIcon?: boolean;
	/** Callback to fire when the switch is toggled in disabled state */
	disabledAction?: () => void;
	};

App/src/components/Switch.tsx

Lines 62 to 69 in d34df44

	return (
	<PressableWithFeedback
	disabled={!disabledAction && disabled}
	onPress={handleSwitchPress}
	onLongPress={handleSwitchPress}
	role={CONST.ROLE.SWITCH}
	aria-checked={isOn}
	accessibilityLabel={accessibilityLabel}

No accessibilityHint prop to convey the description to screen readers

2. ToggleSettingOptionRow.tsx doesn't pass subtitle as hint

App/src/pages/workspace/workflows/ToggleSettingsOptionRow.tsx

Lines 202 to 212 in d34df44

	<Switch
	disabledAction={disabledAction}
	accessibilityLabel={switchAccessibilityLabel}
	onToggle={(isOn) => {
	shouldAnimateAccordionSection.set(true);
	onToggle(isOn);
	}}
	isOn={isActive}
	disabled={disabled}
	showLockIcon={showLockIcon}
	/>

Only accessibilityLabel is passed. The subtitle is not associated with the Switch

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

At Switch.tsx level:

type SwitchProps = {
    /** Whether the switch is toggled to the on position */
    isOn: boolean;

    /** Callback to fire when the switch is toggled */
    onToggle: (isOn: boolean) => void;

    /** Accessibility label for the switch */
    accessibilityLabel: string;

    /** Accessibility hint for the switch - provides additional context */
    accessibilityHint?: string;

    /** Whether the switch is disabled */
    disabled?: boolean;

    /** Whether to show the lock icon even if the switch is enabled */
    showLockIcon?: boolean;

    /** Callback to fire when the switch is toggled in disabled state */
    disabledAction?: () => void;
};

--

function Switch({isOn, onToggle, accessibilityLabel, accessibilityHint, disabled, showLockIcon, disabledAction}: SwitchProps) {

--

    return (
        <PressableWithFeedback
            disabled={!disabledAction && disabled}
            onPress={handleSwitchPress}
            onLongPress={handleSwitchPress}
            role={CONST.ROLE.SWITCH}
            aria-checked={isOn}
            accessibilityLabel={accessibilityLabel}
            accessibilityHint={accessibilityHint}

At ToggleSettingOptionRow.tsx level :

                    <Switch
                        disabledAction={disabledAction}
                        accessibilityLabel={switchAccessibilityLabel}
                        accessibilityHint={typeof subtitle === 'string' ? subtitle : undefined}
                        onToggle={(isOn) => {
                            shouldAnimateAccordionSection.set(true);
                            onToggle(isOn);
                        }}
                        isOn={isActive}
                        disabled={disabled}
                        showLockIcon={showLockIcon}
                    />

The above follows WCAG 2.4.6 by programmatically associating the descriptive text with the interactive control

[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. Is anyone even seeing these? Hello?

[melvin-bot]

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