diff --git a/.claude/skills/playwright-app-testing/SKILL.md b/.claude/skills/playwright-app-testing/SKILL.md index ee27ecd6a1220..a78479d1953ed 100644 --- a/.claude/skills/playwright-app-testing/SKILL.md +++ b/.claude/skills/playwright-app-testing/SKILL.md @@ -30,12 +30,10 @@ ps aux | grep "webpack" | grep -v grep ## Playwright Testing Workflow 1. **Verify server**: Check webpack process is running -2. **Navigate**: Use `mcp__playwright__browser_navigate` to `https://dev.new.expensify.com:8082/` -3. **Interact**: Use Playwright MCP tools including: - - **Inspection**: `browser_snapshot`, `browser_take_screenshot`, `browser_console_messages` - - **Interaction**: `browser_click`, `browser_type`, `browser_fill_form`, `browser_hover` - - **Navigation**: `browser_navigate_back`, `browser_tabs`, `browser_wait_for` - - All other Playwright tools as needed +2. **Navigate**: Open `https://dev.new.expensify.com:8082/` in the browser +3. **Interact**: Use Playwright MCP tools to inspect, click, type, and navigate + +Do NOT add arbitrary waits after actions. Instead, take a snapshot to check the result and only add short waits if the page hasn't updated yet. ## Dev Environment Sign-In diff --git a/src/components/FloatingActionButton.tsx b/src/components/FloatingActionButton.tsx index 9ae6947be266e..9b85fa264179f 100644 --- a/src/components/FloatingActionButton.tsx +++ b/src/components/FloatingActionButton.tsx @@ -124,6 +124,7 @@ function FloatingActionButton({onPress, onLongPress, isActive, accessibilityLabe @@ -196,6 +198,7 @@ function Icon({ accessibilityElementsHidden importantForAccessibility="no-hide-descendants" accessible={false} + pointerEvents="none" > ); diff --git a/src/components/RadioButtonWithLabel.tsx b/src/components/RadioButtonWithLabel.tsx index 1be91307b9ac5..b61cf7f5c61c4 100644 --- a/src/components/RadioButtonWithLabel.tsx +++ b/src/components/RadioButtonWithLabel.tsx @@ -25,6 +25,9 @@ type RadioButtonWithLabelProps = ForwardedFSClassProps & { /** React element to display for the label */ labelElement?: ReactNode; + /** Specifies the accessibility label for the radio button. Falls back to label if not provided. */ + accessibilityLabel?: string; + /** Should the input be styled for errors */ hasError?: boolean; @@ -47,6 +50,7 @@ function RadioButtonWithLabel({ labelElement, style, label = '', + accessibilityLabel, hasError = false, errorText = '', isChecked, @@ -67,10 +71,11 @@ function RadioButtonWithLabel({ . Other roles (e.g. searchbox) are preserved. + role={role === CONST.ROLE.PRESENTATION ? undefined : role} autoCorrect={inputProps.secureTextEntry ? false : autoCorrect} placeholder={newPlaceholder} placeholderTextColor={placeholderTextColor ?? theme.placeholderText} diff --git a/src/pages/OnboardingAccounting/BaseOnboardingAccounting.tsx b/src/pages/OnboardingAccounting/BaseOnboardingAccounting.tsx index a83bb9c737a26..6ee67f263dc01 100644 --- a/src/pages/OnboardingAccounting/BaseOnboardingAccounting.tsx +++ b/src/pages/OnboardingAccounting/BaseOnboardingAccounting.tsx @@ -196,9 +196,9 @@ function BaseOnboardingAccounting({shouldUseNativeStyles, route}: BaseOnboarding const renderOption = useCallback( (item: OnboardingListItem) => ( handleIntegrationSelect(item.keyForList)} - accessibilityLabel={item.text} accessible={false} hoverStyle={!item.isSelected ? styles.hoveredComponentBG : undefined} style={[styles.onboardingAccountingItem, isSmallScreenWidth && styles.flexBasis100, item.isSelected && styles.activeComponentBG]} @@ -206,6 +206,7 @@ function BaseOnboardingAccounting({shouldUseNativeStyles, route}: BaseOnboarding handleIntegrationSelect(item.keyForList)} + accessibilityLabel={item.text} style={[styles.flexRowReverse]} wrapperStyle={[styles.ml0]} labelElement={ diff --git a/tests/unit/libs/Avatars/__snapshots__/InitialAvatarsTest.tsx.snap b/tests/unit/libs/Avatars/__snapshots__/InitialAvatarsTest.tsx.snap index 80ea3f2598879..4ae1532b24d0e 100644 --- a/tests/unit/libs/Avatars/__snapshots__/InitialAvatarsTest.tsx.snap +++ b/tests/unit/libs/Avatars/__snapshots__/InitialAvatarsTest.tsx.snap @@ -5,6 +5,7 @@ exports[`getInitialAvatarSvg matches snapshot for a letter avatar 1`] = ` accessibilityElementsHidden={true} accessible={false} importantForAccessibility="no-hide-descendants" + pointerEvents="none" style={[]} testID="" > diff --git a/tests/unit/libs/Avatars/__snapshots__/PresetAvatarCatalogTest.tsx.snap b/tests/unit/libs/Avatars/__snapshots__/PresetAvatarCatalogTest.tsx.snap index 226c9989b0eec..955f41555beef 100644 --- a/tests/unit/libs/Avatars/__snapshots__/PresetAvatarCatalogTest.tsx.snap +++ b/tests/unit/libs/Avatars/__snapshots__/PresetAvatarCatalogTest.tsx.snap @@ -5,6 +5,7 @@ exports[`PresetAvatarCatalog matches snapshot for a default avatar 1`] = ` accessibilityElementsHidden={true} accessible={false} importantForAccessibility="no-hide-descendants" + pointerEvents="none" style={[]} testID="" >