[Due for payment 2026-01-30] Screen Reader: Workspaces: Checkboxes are announced without part of the displayed text

[nbhardwaj-del]

Action Performed:

Prerequisites:

• the user is signed in

1. Using Chrome + JAWS, open the URL https://new.expensify.com/
2. Navigate using the Tab key to the Workspaces section.
3. Move focus to the More options icon (three vertical dots) > Duplicate Workspace
4. Navigate using the tab key to the Next button and press Enter to activate it.
5. Navigate using the tab key to the checkboxes and observe the screen reader announcement.

Expected Result:

Screen readers should announce both the main label and the associated descriptive text, providing full context, e.g.:

• 'Reports, 3 report fields'

Actual Result:

When navigating to the Reports checkbox, the screen reader announces only the main label (“Eg: Reports”) and does not announce the additional descriptive text (“3 report fields”). As a result, users are not provided with complete context or details for what the checkbox represents.

HTML:

Reports

3 report fields

Area issue was found in:

Workspace

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:

Ensure that both texts are either included in the current aria-label or associated with the checkbox by using and <for .. ID>.
https://www.w3.org/WAI/tutorials/forms/labels/

Environment(s)

Windows Windows 11 - Chrome

Screenshots/Videos

Bug6996772_1762753469520.Screen_Reader-Workspace-Checkboxes_are_announced_without_part_of_the_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/6996772
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 Reports checkbox, the screen reader announces only the main label (“Eg: Reports”) and does not announce the additional descriptive text (“3 report fields”). As a result, users are not provided with complete context or details for what the checkbox represents.

What is the root cause of that problem?

he issue cause is from two locations where accessibility labels are constructed using only item.text, completely ignoring the item.alternateText property:

App/src/components/SelectionList/ListItem/BaseListItem.tsx

Line 106 in d34df44

accessibilityLabel={item.text ?? ''}

The outer pressable wrapper only uses item.text for its accessibility label. The alternateText (which contains the "3 report fields") is rendered visually but not included in the accessibility announcement

Next,MultiSelectListItem.tsx (Checkbox Comp):

App/src/components/SelectionList/ListItem/MultiSelectListItem.tsx

Line 34 in d34df44

accessibilityLabel={item.text ?? ''}

Observation:The checkbox component within MultiSelectListItem also only uses item.text. This is what screen readers announce when users Tab to the checkbox

Data Flow

The data originates from WorkspaceDuplicateSelectFeaturesForm.tsx:

App/src/pages/workspace/duplicate/WorkspaceDuplicateSelectFeaturesForm.tsx

Lines 186 to 194 in d34df44

	return items.map((option) => {
	const alternateText = option?.alternateText ? option.alternateText.trim().replaceAll(/,$/g, '') : undefined;
	return {
	text: option.translation,
	keyForList: option.value,
	isSelected: selectedItems.includes(option.value),
	alternateText,
	};
	});

text: Main label (for eg"Reports")

alternateText: Descriptive detail (for eg: "3 report fields")

Both values are correctly populated and passed, but only text is used for accessibility

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

First, in BaseListItem.tsx:

App/src/components/SelectionList/ListItem/BaseListItem.tsx

Line 106 in d34df44

accessibilityLabel={item.text ?? ''}

Should be updated to :

accessibilityLabel={item.alternateText ? `${item.text}, ${item.alternateText}` : (item.text ?? '')}

This will fixes the issue for all SelectionList usages across the app

[melvin-bot]

Now this issue is 8 days overdue. Are you sure this should be a Daily? 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.