fix(app): add aria-checked to Switch for E2E toBeChecked() assertions

React Native Web does not map accessibilityState.checked to aria-checked
for role="switch", so Playwright's toBeChecked() always finds the element
unchecked. Adding aria-checked={value} directly to the Pressable sets the
attribute explicitly.

Update the switch.test.tsx mock to accept and pass through the explicit
aria-checked prop, keeping the mock faithful to the fixed component.
This commit is contained in:
Mohamed Boudra
2026-05-05 09:52:35 +07:00
parent 7eec25033f
commit c6bc7f4af8
2 changed files with 4 additions and 1 deletions

View File

@@ -32,6 +32,7 @@ vi.mock("react-native-reanimated", () => ({
vi.mock("react-native", () => ({
Pressable: ({
"aria-checked": ariaChecked,
accessibilityLabel,
accessibilityRole,
accessibilityState,
@@ -40,6 +41,7 @@ vi.mock("react-native", () => ({
onPress,
testID,
}: {
"aria-checked"?: boolean;
accessibilityLabel?: string;
accessibilityRole?: string;
accessibilityState?: { checked?: boolean; disabled?: boolean };
@@ -51,7 +53,7 @@ vi.mock("react-native", () => ({
React.createElement(
"button",
{
"aria-checked": accessibilityState?.checked,
"aria-checked": ariaChecked ?? accessibilityState?.checked,
"aria-disabled": accessibilityState?.disabled,
"aria-label": accessibilityLabel,
"data-disabled": disabled,

View File

@@ -100,6 +100,7 @@ export function Switch({
accessibilityRole="switch"
accessibilityState={accessibilityState}
accessibilityLabel={accessibilityLabel}
aria-checked={value}
testID={testID}
style={pressableStyle}
>