You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
When trying to test my components using RNTL and getByRole "button" I get an error since Tamagui implementation it's just a View under the hood (As far as I could figure out).
Expected Behavior
It will be nice to have accesibility=true for Button and elements that provide accesibilityRole for having a good and more standarized test creation experience.
Tamagui Version
^1.89.29
Platform (Web, iOS, Android)
iOS and Android, not sure about Web
Reproduction
import { render, screen, userEvent } from "@testing-library/react-native";
import { useState } from "react";
import { Button, Checkbox, SizableText, TamaguiProvider, View } from "tamagui";
import { config } from "../tamagui.config";
const MyComponent = () => {
const [allAgreed, setAllAgreed] = useState(false);
const handleAgree = (agreed: boolean) => {
agreed && setAllAgreed(agreed);
};
return (
<View>
<Checkbox
id="checkbox-1"
testID="checkbox-1"
size="$3"
onCheckedChange={handleAgree}
>
<Checkbox.Indicator>
<SizableText>X</SizableText>
</Checkbox.Indicator>
</Checkbox>
<Button accessible disabled={!allAgreed}>
Agree
</Button>
</View>
);
};
describe("Reproducible Tamagui issue #2613", () => {
it("Enables button after checking the checkbox", () => {
render(
<TamaguiProvider config={config}>
<MyComponent />
</TamaguiProvider>,
);
const checkbox1 = screen.getByTestId("checkbox-1");
const user = userEvent.setup();
user.press(checkbox1);
// This will fail, and we shouldn't check the button's pointerEvents prop anyway
expect(screen.getByRole("button")).not.toHaveProp("pointerEvents", "none");
// This should work but IS NOT WORKING because of 2 issues:
// 1. Can't select by role see: https://github.com/tamagui/tamagui/issues/2613
// 2. User event is not triggered
expect(screen.getByRole("button")).toBeEnabled();
});
});
@mfrfinbox the repro scenario is missing <MyComponent /> code which is needed to understand the issue. It would be good to also include screen.debug() output to show what Tamagui renders in terms of host components & their props.
Issue TLDR: Tamagui in some cases sets accessibilityRole without setting accessible prop on View:
From my experiments, and hence how RNTL handles accessibility role, having accessibilityRole on a View without accessible prop, does not make Accessibility Inspector/screen reader be aware of such role.
I've update the repro scenario and added the debug output, additionally here's a picture of the issue;
As we can see in the debug output since accesible attribute is not present it will not find the button (and all other elements that have accesibility role and not accesible attribute out of the box)
I hipe that makes sence and please let me know if you need more info
Current Behavior
When trying to test my components using RNTL and getByRole "button" I get an error since Tamagui implementation it's just a View under the hood (As far as I could figure out).
Expected Behavior
It will be nice to have accesibility=true for Button and elements that provide accesibilityRole for having a good and more standarized test creation experience.
Tamagui Version
Platform (Web, iOS, Android)
Reproduction
System Info
debug output
The text was updated successfully, but these errors were encountered: