[No QA] Make it easier for AI agents to interact with the app

.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
 

src/components/FloatingActionButton.tsx

@@ -124,6 +124,7 @@ function FloatingActionButton({onPress, onLongPress, isActive, accessibilityLabe
                             <Svg
                                 width={fabSize}
                                 height={fabSize}
+                                pointerEvents="none"
                             >
                                 <AnimatedPath
                                     d={isLHBVisible ? SMALL_FAB_PATH : FAB_PATH}

src/components/Icon/index.tsx

@@ -135,6 +135,7 @@ function Icon({
             <View
                 testID={testID}
                 style={[StyleUtils.getWidthAndHeightStyle(width ?? 0, height), styles.bgTransparent, styles.overflowVisible]}
+                pointerEvents="none"
             >
                 <View style={iconStyles}>
                     <ImageSVG
@@ -145,6 +146,7 @@ function Icon({
                         hovered={hovered}
                         pressed={pressed}
                         contentFit={contentFit}
+                        pointerEvents="none"
                     />
                 </View>
             </View>
@@ -196,6 +198,7 @@ function Icon({
             accessibilityElementsHidden
             importantForAccessibility="no-hide-descendants"
             accessible={false}
+            pointerEvents="none"
         >
             <ImageSVG
                 src={src}
@@ -205,6 +208,7 @@ function Icon({
                 hovered={hovered}
                 pressed={pressed}
                 contentFit={contentFit}
+                pointerEvents="none"
             />
         </View>
     );

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({
                 <RadioButton
                     isChecked={isChecked}
                     onPress={onPress}
-                    accessibilityLabel={label}
+                    accessibilityLabel={accessibilityLabel ?? label}
                     hasError={hasError}
                 />
                 <PressableWithFeedback
+                    sentryLabel="RadioButtonWithLabel"
                     tabIndex={-1}
                     accessible={false}
                     onPress={onPress}

src/components/TextInput/BaseTextInput/implementation/index.tsx

@@ -84,6 +84,8 @@ function BaseTextInput({
     shouldUseDefaultLineHeightForPrefix = true,
     ref,
     sentryLabel,
+
+    role,
     ...inputProps
 }: BaseTextInputProps) {
     const InputComponent = InputComponentMap.get(type) ?? RNTextInput;
@@ -440,6 +442,9 @@ function BaseTextInput({
                                 }}
                                 // eslint-disable-next-line
                                 {...inputProps}
+                                // Filter out role="presentation" so it doesn't strip the native
+                                // semantics of the <input>. 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}

src/pages/OnboardingAccounting/BaseOnboardingAccounting.tsx

@@ -196,16 +196,17 @@ function BaseOnboardingAccounting({shouldUseNativeStyles, route}: BaseOnboarding
     const renderOption = useCallback(
         (item: OnboardingListItem) => (
             <PressableWithoutFeedback
+                sentryLabel="OnboardingAccounting-integrationOption"
                 key={item.keyForList ?? ''}
                 onPress={() => handleIntegrationSelect(item.keyForList)}
-                accessibilityLabel={item.text}
                 accessible={false}
                 hoverStyle={!item.isSelected ? styles.hoveredComponentBG : undefined}
                 style={[styles.onboardingAccountingItem, isSmallScreenWidth && styles.flexBasis100, item.isSelected && styles.activeComponentBG]}
             >
                 <RadioButtonWithLabel
                     isChecked={!!item.isSelected}
                     onPress={() => handleIntegrationSelect(item.keyForList)}
+                    accessibilityLabel={item.text}
                     style={[styles.flexRowReverse]}
                     wrapperStyle={[styles.ml0]}
                     labelElement={

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=""
 >

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=""
 >