Skip to content

fix: break VoiceOver grouping on iOS so task checkbox is independently focusable #91530

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Krishna2323 wants to merge 9 commits into
base: main
Choose a base branch
from
Open

fix: break VoiceOver grouping on iOS so task checkbox is independently focusable #91530

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
c4b9452
fix: break VoiceOver grouping on iOS so task checkbox is independentl…
Krishna2323 May 24, 2026
37a3806
fix: conditionally render inner pressable only on iOS to avoid regres…
Krishna2323 May 24, 2026
8e10ec2
fix: use local state for checkbox to announce correct checked state a…
Krishna2323 May 25, 2026
2bd995f
fix: only break accessibility grouping when screen reader is active
Krishna2323 May 25, 2026
a7cc4a0
Merge branch 'main' into fix/77574-task-checkbox-accessibility
Krishna2323 May 28, 2026
661fac7
fix: scope local checkbox state to screen reader and remove unreachab…
Krishna2323 May 28, 2026
9523a10
fix: use View with accessibilityActions instead of PressableWithoutFe…
Krishna2323 May 28, 2026
72a67fd
fix: mark task title as disabled for VoiceOver when not interactive
Krishna2323 May 28, 2026
e51b279
fix: use plain text for task accessibility label and restore removed …
Krishna2323 May 29, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
94 changes: 76 additions & 18 deletions src/components/ReportActionItem/TaskPreview.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import {delegateEmailSelector} from '@selectors/Account';
import React from 'react';
import React, {useState} from 'react';
import {View} from 'react-native';
import type {StyleProp, ViewStyle} from 'react-native';
import type {OnyxEntry} from 'react-native-onyx';
Expand All @@ -23,6 +23,7 @@ import useReportIsArchived from '@hooks/useReportIsArchived';
import useStyleUtils from '@hooks/useStyleUtils';
import useTheme from '@hooks/useTheme';
import useThemeStyles from '@hooks/useThemeStyles';
import Accessibility from '@libs/Accessibility';
import {callFunctionIfActionIsAllowed} from '@libs/actions/Session';
import {canActionTask, completeTask, getTaskAssigneeAccountID, reopenTask} from '@libs/actions/Task';
import ControlSelection from '@libs/ControlSelection';
Expand All @@ -34,6 +35,7 @@ import Navigation from '@libs/Navigation/Navigation';
import Parser from '@libs/Parser';
import {getOriginalMessage} from '@libs/ReportActionsUtils';
import {isCanceledTaskReport, isOpenTaskReport, isReportManager} from '@libs/ReportUtils';
import shouldBreakAccessibilityGrouping from '@libs/shouldBreakAccessibilityGrouping';
import CONST from '@src/CONST';
import ONYXKEYS from '@src/ONYXKEYS';
import type {Report, ReportAction} from '@src/types/onyx';
Expand Down Expand Up @@ -63,6 +65,8 @@ function TaskPreview({action, chatReportID, currentUserPersonalDetails, isHovere
const StyleUtils = useStyleUtils();
const {translate} = useLocalize();
const theme = useTheme();
const isScreenReaderActive = Accessibility.useScreenReaderStatus();
const shouldBreakGrouping = shouldBreakAccessibilityGrouping();
const {originalReportID, anchor: contextMenuAnchorRef, shouldDisplayContextMenu = true} = useShowContextMenuState();
const {checkIfContextMenuActive, onShowContextMenu} = useShowContextMenuActions();
const originalMessage = getOriginalMessage(action);
Expand All @@ -88,9 +92,22 @@ function TaskPreview({action, chatReportID, currentUserPersonalDetails, isHovere
// The reportAction might not contain details regarding the taskReport
// Only the direct parent reportAction will contain details about the taskReport
// Other linked reportActions will only contain the taskReportID and we will grab the details from there
const isTaskCompleted = !isEmptyObject(taskReport)
const isTaskCompletedFromOnyx = !isEmptyObject(taskReport)
? taskReport?.stateNum === CONST.REPORT.STATE_NUM.APPROVED && taskReport.statusNum === CONST.REPORT.STATUS_NUM.APPROVED
: action?.childStateNum === CONST.REPORT.STATE_NUM.APPROVED && action?.childStatusNum === CONST.REPORT.STATUS_NUM.APPROVED;

// Local state provides immediate feedback for VoiceOver after toggling the checkbox,
// since Onyx updates asynchronously and the screen reader would announce the stale state.
const [prevIsTaskCompletedFromOnyx, setPrevIsTaskCompletedFromOnyx] = useState(isTaskCompletedFromOnyx);
const [localIsTaskCompleted, setLocalIsTaskCompleted] = useState(isTaskCompletedFromOnyx);

if (prevIsTaskCompletedFromOnyx !== isTaskCompletedFromOnyx) {
setPrevIsTaskCompletedFromOnyx(isTaskCompletedFromOnyx);
setLocalIsTaskCompleted(isTaskCompletedFromOnyx);
}
Comment on lines +101 to +107
Copy link
Copy Markdown
Contributor

@mkhutornyi mkhutornyi May 25, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This local state update logic now runs on every platform, not just iOS.
If completeTask/reopenTask ever fails or is queued offline and the underlying Onyx state doesn't flip, the local state might read "checked" briefly until the next re-render syncs back. Please verify this case.
And consider scoping this to shouldBreakGrouping only.

Copy link
Copy Markdown
Contributor Author

@Krishna2323 Krishna2323 May 28, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Scoped. setLocalIsTaskCompleted is only called on iOS + VoiceOver. On all other platforms, isTaskCompleted resolves directly to the Onyx value.


const isTaskCompleted = shouldBreakGrouping && isScreenReaderActive ? localIsTaskCompleted : isTaskCompletedFromOnyx;

const parentReportAction = useParentReportAction(taskContextReport);
const taskAssigneeAccountID = getTaskAssigneeAccountID(taskContextReport, parentReportAction) ?? action?.childManagerAccountID ?? CONST.DEFAULT_NUMBER_ID;
const parentReport = useParentReport(taskContextReport?.reportID);
Expand All @@ -106,6 +123,8 @@ function TaskPreview({action, chatReportID, currentUserPersonalDetails, isHovere
const iconWrapperStyle = StyleUtils.getTaskPreviewIconWrapper(hasAssignee ? avatarSize : undefined);

const shouldShowGreenDotIndicator = isOpenTaskReport(taskContextReport, action) && isReportManager(taskContextReport);
const taskTitlePlainText = Parser.htmlToText(taskTitle);
const taskAccessibilityLabel = taskTitlePlainText ? `${translate('task.task')}: ${taskTitlePlainText}` : translate('task.task');
if (isDeletedParentAction) {
return <RenderHTML html={`<deleted-action>${translate('parentReportAction.deletedTask')}</deleted-action>`} />;
}
Expand All @@ -121,6 +140,7 @@ function TaskPreview({action, chatReportID, currentUserPersonalDetails, isHovere
return (
<View style={[styles.chatItemMessage, !hasAssignee && styles.mv1]}>
<PressableWithoutFeedback
accessible={shouldBreakGrouping ? false : undefined}
onPress={() => Navigation.navigate(getReportRouteForCurrentContext({reportID: taskReportID}))}
onPressIn={() => canUseTouchScreen() && ControlSelection.block()}
onPressOut={() => ControlSelection.unblock()}
Expand All @@ -135,7 +155,7 @@ function TaskPreview({action, chatReportID, currentUserPersonalDetails, isHovere
shouldUseHapticsOnLongPress
style={[styles.flexRow, styles.justifyContentBetween, style]}
role={CONST.ROLE.BUTTON}
accessibilityLabel={translate('task.task')}
accessibilityLabel={taskAccessibilityLabel}
sentryLabel={CONST.SENTRY_LABEL.TASK.PREVIEW_CARD}
>
<View style={[styles.flex1, styles.flexRow, styles.alignItemsStart, styles.mr2]}>
Expand All @@ -145,32 +165,70 @@ function TaskPreview({action, chatReportID, currentUserPersonalDetails, isHovere
isChecked={isTaskCompleted}
disabled={!isTaskActionable}
onPress={callFunctionIfActionIsAllowed(() => {
if (shouldBreakGrouping && isScreenReaderActive) {
setLocalIsTaskCompleted((prev) => !prev);
}
if (isTaskCompleted) {
reopenTask(taskContextReport, parentReport, currentUserPersonalDetails.accountID, delegateEmail, taskReportID);
} else {
completeTask(taskContextReport, parentReport?.hasOutstandingChildTask ?? false, hasOutstandingChildTask, parentReportAction, delegateEmail, taskReportID);
}
})}
accessibilityLabel={translate('task.task')}
accessibilityLabel={taskAccessibilityLabel}
sentryLabel={CONST.SENTRY_LABEL.TASK.PREVIEW_CHECKBOX}
/>
</View>
{hasAssignee && (
<UserDetailsTooltip accountID={taskAssigneeAccountID}>
<View>
<Avatar
containerStyles={[styles.mr2, isTaskCompleted ? styles.opacitySemiTransparent : undefined]}
source={avatar}
size={avatarSize}
avatarID={taskAssigneeAccountID}
type={CONST.ICON_TYPE_AVATAR}
/>
{shouldBreakGrouping ? (
<View
accessible
accessibilityRole={CONST.ROLE.BUTTON}
accessibilityLabel={taskAccessibilityLabel}
accessibilityActions={[{name: 'activate'}]}
onAccessibilityAction={(event) => {
if (event.nativeEvent.actionName !== 'activate') {
return;
}
Navigation.navigate(getReportRouteForCurrentContext({reportID: taskReportID}));
}}
style={[styles.flex1, styles.flexRow, styles.alignItemsStart]}
>
{hasAssignee && (
<UserDetailsTooltip accountID={taskAssigneeAccountID}>
<View>
<Avatar
containerStyles={[styles.mr2, isTaskCompleted ? styles.opacitySemiTransparent : undefined]}
source={avatar}
size={avatarSize}
avatarID={taskAssigneeAccountID}
type={CONST.ICON_TYPE_AVATAR}
/>
</View>
</UserDetailsTooltip>
)}
<View style={[styles.alignSelfCenter, styles.flex1]}>
<RenderHTML html={getTaskHTML()} />
</View>
</UserDetailsTooltip>
</View>
) : (
<>
{hasAssignee && (
<UserDetailsTooltip accountID={taskAssigneeAccountID}>
<View>
<Avatar
containerStyles={[styles.mr2, isTaskCompleted ? styles.opacitySemiTransparent : undefined]}
source={avatar}
size={avatarSize}
avatarID={taskAssigneeAccountID}
type={CONST.ICON_TYPE_AVATAR}
/>
</View>
</UserDetailsTooltip>
)}
<View style={[styles.alignSelfCenter, styles.flex1]}>
<RenderHTML html={getTaskHTML()} />
</View>
</>
)}
<View style={[styles.alignSelfCenter, styles.flex1]}>
<RenderHTML html={getTaskHTML()} />
</View>
</View>
{shouldShowGreenDotIndicator && (
<View style={iconWrapperStyle}>
Expand Down
Loading
Loading