Merge pull request #87670 from Expensify/claude-screenReaderDisabledButtonAnnouncement

fix: Re-apply screen reader disabled button announcement with crash fix

Author: roryabraham

src/components/Pressable/GenericPressable/implementation/BaseGenericPressable.tsx

@@ -177,7 +177,7 @@ function GenericPressable({
             hitSlop={shouldUseAutoHitSlop ? hitSlop : undefined}
             onLayout={shouldUseAutoHitSlop ? onLayout : undefined}
             ref={ref as ForwardedRef<View>}
-            disabled={fullDisabled}
+            disabled={fullDisabled || undefined}
             onPress={!isDisabled ? singleExecution(onPressHandler) : undefined}
             onLongPress={!isDisabled && onLongPress ? onLongPressHandler : undefined}
             onKeyDown={!isDisabled ? handleKeyDown : undefined}

src/components/Pressable/GenericPressable/implementation/index.tsx

@@ -1,16 +1,35 @@
-import React from 'react';
-import type {Role} from 'react-native';
+import React, {useLayoutEffect, useRef} from 'react';
+import type {Role, View} from 'react-native';
 import type PressableProps from '@components/Pressable/GenericPressable/types';
+import mergeRefs from '@libs/mergeRefs';
 import GenericPressable from './BaseGenericPressable';
 
 function WebGenericPressable({focusable = true, ref, sentryLabel, ...props}: PressableProps) {
     const accessible = (props.accessible ?? props.accessible === undefined) ? true : props.accessible;
 
+    // react-native-web's Pressable always sets aria-disabled from its own `disabled` prop,
+    // overriding any explicit aria-disabled we pass. We pass fullDisabled (not isDisabled) to
+    // preserve interaction/focus behavior, so we must set aria-disabled imperatively instead.
+    const internalRef = useRef<View>(null);
+    // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing -- `||` is intentional so that falsy values like empty string or 0 are treated as not-disabled
+    const isAriaDisabled = props.fullDisabled || props.disabled || props.accessibilityState?.disabled;
+    useLayoutEffect(() => {
+        const el = internalRef.current as unknown as HTMLElement | null;
+        if (!el) {
+            return;
+        }
+        if (isAriaDisabled) {
+            el.setAttribute('aria-disabled', 'true');
+        } else {
+            el.removeAttribute('aria-disabled');
+        }
+    }, [isAriaDisabled]);
+
     return (
         <GenericPressable
             // eslint-disable-next-line react/jsx-props-no-spreading
             {...props}
-            ref={ref}
+            ref={mergeRefs(internalRef, ref)}
             // change native accessibility props to web accessibility props
             focusable={focusable}
             tabIndex={(props.tabIndex ?? (!accessible || !focusable)) ? -1 : 0}

src/pages/domain/Saml/SamlLoginSectionContent.tsx

@@ -76,7 +76,7 @@ function SamlLoginSectionContent({accountID, domainName, isSamlEnabled, isSamlRe
                         <Switch
                             accessibilityLabel={translate('domain.samlLogin.enableSamlLogin')}
                             isOn={isSamlEnabled}
-                            disabled={domainSettings?.twoFactorAuthRequired}
+                            disabled={!!domainSettings?.twoFactorAuthRequired}
                             onToggle={() => setSamlEnabled({enabled: !isSamlEnabled, accountID, domainName})}
                         />
                     </View>

src/pages/settings/Profile/TimezoneInitialPage.tsx

@@ -64,7 +64,7 @@ function TimezoneInitialPage({currentUserPersonalDetails}: TimezoneInitialPagePr
                     title={timezone.selected}
                     description={translate('timezonePage.timezone')}
                     shouldShowRightIcon
-                    disabled={timezone.automatic}
+                    disabled={!!timezone.automatic}
                     onPress={() => Navigation.navigate(ROUTES.SETTINGS_TIMEZONE_SELECT)}
                 />
             </View>

src/pages/settings/Profile/TimezoneSelectPage.tsx

@@ -85,7 +85,7 @@ function TimezoneSelectPage({currentUserPersonalDetails}: TimezoneSelectPageProp
                 onSelectRow={saveSelectedTimezone}
                 textInputOptions={textInputOptions}
                 initiallyFocusedItemKey={timezoneOptions.find((tz) => tz.text === timezone.selected)?.keyForList}
-                isDisabled={timezone.automatic}
+                isDisabled={!!timezone.automatic}
                 shouldShowTooltips={false}
                 shouldSingleExecuteRowSelect
                 showScrollIndicator