Merge branch 'main' into fix/34751

src/App.tsx

@@ -6,6 +6,7 @@ import Onyx from 'react-native-onyx';
 import {PickerStateProvider} from 'react-native-picker-select';
 import {SafeAreaProvider} from 'react-native-safe-area-context';
 import '../wdyr';
+import ActiveElementRoleProvider from './components/ActiveElementRoleProvider';
 import ActiveWorkspaceContextProvider from './components/ActiveWorkspace/ActiveWorkspaceProvider';
 import ColorSchemeWrapper from './components/ColorSchemeWrapper';
 import ComposeProviders from './components/ComposeProviders';
@@ -78,6 +79,7 @@ function App({url}: AppProps) {
                         PickerStateProvider,
                         EnvironmentProvider,
                         CustomStatusBarAndBackgroundContextProvider,
+                        ActiveElementRoleProvider,
                         ActiveWorkspaceContextProvider,
                     ]}
                 >

src/components/ActiveElementRoleProvider/index.native.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import type {ActiveElementRoleContextValue, ActiveElementRoleProps} from './types';
+
+const ActiveElementRoleContext = React.createContext<ActiveElementRoleContextValue>({
+    role: null,
+});
+
+function ActiveElementRoleProvider({children}: ActiveElementRoleProps) {
+    const value = React.useMemo(
+        () => ({
+            role: null,
+        }),
+        [],
+    );
+
+    return <ActiveElementRoleContext.Provider value={value}>{children}</ActiveElementRoleContext.Provider>;
+}
+
+export default ActiveElementRoleProvider;
+export {ActiveElementRoleContext};

src/components/ActiveElementRoleProvider/index.tsx

@@ -0,0 +1,40 @@
+import React, {useEffect, useState} from 'react';
+import type {ActiveElementRoleContextValue, ActiveElementRoleProps} from './types';
+
+const ActiveElementRoleContext = React.createContext<ActiveElementRoleContextValue>({
+    role: null,
+});
+
+function ActiveElementRoleProvider({children}: ActiveElementRoleProps) {
+    const [activeRoleRef, setRole] = useState<string | null>(document?.activeElement?.role ?? null);
+
+    const handleFocusIn = () => {
+        setRole(document?.activeElement?.role ?? null);
+    };
+
+    const handleFocusOut = () => {
+        setRole(null);
+    };
+
+    useEffect(() => {
+        document.addEventListener('focusin', handleFocusIn);
+        document.addEventListener('focusout', handleFocusOut);
+
+        return () => {
+            document.removeEventListener('focusin', handleFocusIn);
+            document.removeEventListener('focusout', handleFocusOut);
+        };
+    }, []);
+
+    const value = React.useMemo(
+        () => ({
+            role: activeRoleRef,
+        }),
+        [activeRoleRef],
+    );
+
+    return <ActiveElementRoleContext.Provider value={value}>{children}</ActiveElementRoleContext.Provider>;
+}
+
+export default ActiveElementRoleProvider;
+export {ActiveElementRoleContext};

src/components/ActiveElementRoleProvider/types.ts

@@ -0,0 +1,9 @@
+type ActiveElementRoleContextValue = {
+    role: string | null;
+};
+
+type ActiveElementRoleProps = {
+    children: React.ReactNode;
+};
+
+export type {ActiveElementRoleContextValue, ActiveElementRoleProps};

src/components/Button/index.tsx

@@ -265,14 +265,16 @@ function Button(
 
     return (
         <>
-            <KeyboardShortcutComponent
-                isDisabled={isDisabled}
-                isLoading={isLoading}
-                allowBubble={allowBubble}
-                onPress={onPress}
-                pressOnEnter={pressOnEnter}
-                enterKeyEventListenerPriority={enterKeyEventListenerPriority}
-            />
+            {pressOnEnter && (
+                <KeyboardShortcutComponent
+                    isDisabled={isDisabled}
+                    isLoading={isLoading}
+                    allowBubble={allowBubble}
+                    onPress={onPress}
+                    pressOnEnter={pressOnEnter}
+                    enterKeyEventListenerPriority={enterKeyEventListenerPriority}
+                />
+            )}
             <PressableWithFeedback
                 ref={ref}
                 onPress={(event) => {

src/hooks/useActiveElementRole/index.ts

@@ -1,32 +1,15 @@
-import {useEffect, useRef} from 'react';
+import {useContext} from 'react';
+import {ActiveElementRoleContext} from '@components/ActiveElementRoleProvider';
 import type UseActiveElementRole from './types';
 
 /**
  * Listens for the focusin and focusout events and sets the DOM activeElement to the state.
  * On native, we just return null.
  */
 const useActiveElementRole: UseActiveElementRole = () => {
-    const activeRoleRef = useRef(document?.activeElement?.role);
+    const {role} = useContext(ActiveElementRoleContext);
 
-    const handleFocusIn = () => {
-        activeRoleRef.current = document?.activeElement?.role;
-    };
-
-    const handleFocusOut = () => {
-        activeRoleRef.current = null;
-    };
-
-    useEffect(() => {
-        document.addEventListener('focusin', handleFocusIn);
-        document.addEventListener('focusout', handleFocusOut);
-
-        return () => {
-            document.removeEventListener('focusin', handleFocusIn);
-            document.removeEventListener('focusout', handleFocusOut);
-        };
-    }, []);
-
-    return activeRoleRef.current;
+    return role;
 };
 
 export default useActiveElementRole;

src/hooks/useActiveElementRole/types.ts

@@ -1,3 +1,3 @@
-type UseActiveElementRole = () => string | null | undefined;
+type UseActiveElementRole = () => string | null;
 
 export default UseActiveElementRole;

src/languages/es.ts

@@ -1759,7 +1759,7 @@ export default {
             trackDistanceCopy: 'Configura la tarifa y unidad usadas para medir distancias.',
             trackDistanceRate: 'Tarifa',
             trackDistanceUnit: 'Unidad',
-            trackDistanceChooseUnit: 'Elija una unidad predeterminada para rastrear.',
+            trackDistanceChooseUnit: 'Elige una unidad predeterminada de medida.',
             kilometers: 'Kilómetros',
             miles: 'Millas',
             unlockNextDayReimbursements: 'Desbloquea reembolsos diarios',

src/pages/ShareCodePage.tsx

@@ -12,8 +12,7 @@ import QRShareWithDownload from '@components/QRShare/QRShareWithDownload';
 import type QRShareWithDownloadHandle from '@components/QRShare/QRShareWithDownload/types';
 import ScreenWrapper from '@components/ScreenWrapper';
 import Section from '@components/Section';
-import withCurrentUserPersonalDetails from '@components/withCurrentUserPersonalDetails';
-import type {WithCurrentUserPersonalDetailsProps} from '@components/withCurrentUserPersonalDetails';
+import useCurrentUserPersonalDetails from '@hooks/useCurrentUserPersonalDetails';
 import useEnvironment from '@hooks/useEnvironment';
 import useLocalize from '@hooks/useLocalize';
 import useThemeStyles from '@hooks/useThemeStyles';
@@ -28,22 +27,23 @@ import CONST from '@src/CONST';
 import ROUTES from '@src/ROUTES';
 import type {Report, Session} from '@src/types/onyx';
 
-type ShareCodePageOnyxProps = WithCurrentUserPersonalDetailsProps & {
+type ShareCodePageOnyxProps = {
     /** Session info for the currently logged in user. */
-    session: OnyxEntry<Session>;
+    session?: OnyxEntry<Session>;
 
     /** The report currently being looked at */
     report?: OnyxEntry<Report>;
 };
 
 type ShareCodePageProps = ShareCodePageOnyxProps;
 
-function ShareCodePage({report, session, currentUserPersonalDetails}: ShareCodePageProps) {
+function ShareCodePage({report, session}: ShareCodePageProps) {
     const themeStyles = useThemeStyles();
     const {translate} = useLocalize();
     const {environmentURL} = useEnvironment();
     const qrCodeRef = useRef<QRShareWithDownloadHandle>(null);
     const {isSmallScreenWidth} = useWindowDimensions();
+    const currentUserPersonalDetails = useCurrentUserPersonalDetails();
 
     const isReport = !!report?.reportID;
 
@@ -145,4 +145,4 @@ function ShareCodePage({report, session, currentUserPersonalDetails}: ShareCodeP
 
 ShareCodePage.displayName = 'ShareCodePage';
 
-export default withCurrentUserPersonalDetails(ShareCodePage);
+export default ShareCodePage;