Merge pull request Expensify#79826 from TaduJR/fix-Screen-Reader-Many-Pages-The-embedded-links-cannot-be-focused-and-activated

fix: Screen Reader: Many Pages: The embedded links cannot be focused and activated

Author: grgia

src/components/HTMLEngineProvider/HTMLRenderers/AccountManagerLinkRenderer.tsx

@@ -4,9 +4,11 @@ import type {CustomRendererProps, TPhrasing, TText} from 'react-native-render-ht
 import {TNodeChildrenRenderer} from 'react-native-render-html';
 import * as HTMLEngineUtils from '@components/HTMLEngineProvider/htmlEngineUtils';
 import Text from '@components/Text';
+import useEnterKeyHandler from '@hooks/useEnterKeyHandler';
 import useOnyx from '@hooks/useOnyx';
 import useThemeStyles from '@hooks/useThemeStyles';
 import Navigation from '@libs/Navigation/Navigation';
+import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
 
@@ -35,11 +37,16 @@ function AccountManagerLinkRenderer({tnode, style}: AccountManagerLinkRendererPr
         Navigation.navigate(ROUTES.REPORT_WITH_ID.getRoute(accountManagerReportID));
     }, [accountManagerReportID]);
 
+    const handleKeyDown = useEnterKeyHandler(navigateToAccountManager);
+
     return (
         <Text
             style={[style as TextStyle, linkStyle]}
             onPress={navigateToAccountManager}
+            onKeyDown={handleKeyDown}
             suppressHighlighting
+            role={CONST.ROLE.LINK}
+            tabIndex={0}
         >
             <TNodeChildrenRenderer tnode={tnode} />
         </Text>

src/components/HTMLEngineProvider/HTMLRenderers/ConciergeLinkRenderer.tsx

@@ -4,9 +4,11 @@ import type {CustomRendererProps, TPhrasing, TText} from 'react-native-render-ht
 import {TNodeChildrenRenderer} from 'react-native-render-html';
 import * as HTMLEngineUtils from '@components/HTMLEngineProvider/htmlEngineUtils';
 import Text from '@components/Text';
+import useEnterKeyHandler from '@hooks/useEnterKeyHandler';
 import useOnyx from '@hooks/useOnyx';
 import useThemeStyles from '@hooks/useThemeStyles';
 import {navigateToConciergeChat as navigateToConciergeChatAction} from '@userActions/Report';
+import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 
 type ConciergeLinkRendererProps = CustomRendererProps<TText | TPhrasing>;
@@ -35,11 +37,16 @@ function ConciergeLinkRenderer({tnode, style}: ConciergeLinkRendererProps) {
         ];
     }
 
+    const handleKeyDown = useEnterKeyHandler(navigateToConciergeChat);
+
     return (
         <Text
             style={[style as TextStyle, linkStyle]}
             onPress={navigateToConciergeChat}
+            onKeyDown={handleKeyDown}
             suppressHighlighting
+            role={CONST.ROLE.LINK}
+            tabIndex={0}
         >
             <TNodeChildrenRenderer tnode={tnode} />
         </Text>

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

@@ -149,6 +149,29 @@ function GenericPressable({
         return KeyboardShortcut.subscribe(shortcutKey, onKeyboardShortcutPressHandler, descriptionKey, modifiers, true, false, 0, false);
     }, [keyboardShortcut, onKeyboardShortcutPressHandler]);
 
+    const isRoleLink = rest.role === CONST.ROLE.LINK;
+
+    /**
+     * Handles keyboard events for the pressable element.
+     * If a custom onKeyDown handler is provided, it delegates to that handler.
+     * Otherwise, for elements with role="link", it triggers onPress when Enter is pressed
+     * to comply with W3C APG Link Pattern (https://www.w3.org/WAI/ARIA/apg/patterns/link/).
+     */
+    const handleKeyDown = useCallback(
+        (event: React.KeyboardEvent) => {
+            if (onKeyDown) {
+                onKeyDown(event as unknown as React.KeyboardEvent<Element>);
+                return;
+            }
+
+            if (isRoleLink && event.key === CONST.KEYBOARD_SHORTCUTS.ENTER.shortcutKey) {
+                event.preventDefault();
+                onPressHandler(event.nativeEvent as unknown as KeyboardEvent);
+            }
+        },
+        [onKeyDown, isRoleLink, onPressHandler],
+    );
+
     return (
         <Pressable
             hitSlop={shouldUseAutoHitSlop ? hitSlop : undefined}
@@ -157,7 +180,7 @@ function GenericPressable({
             disabled={fullDisabled}
             onPress={!isDisabled ? singleExecution(onPressHandler) : undefined}
             onLongPress={!isDisabled && onLongPress ? onLongPressHandler : undefined}
-            onKeyDown={!isDisabled ? onKeyDown : undefined}
+            onKeyDown={!isDisabled ? handleKeyDown : undefined}
             onPressIn={!isDisabled ? onPressIn : undefined}
             onPressOut={!isDisabled ? onPressOut : undefined}
             dataSet={{...(isRoleButton ? {[CONST.SELECTION_SCRAPER_HIDDEN_ELEMENT]: true} : {}), ...(dataSet ?? {})}}

src/hooks/useEnterKeyHandler.ts

@@ -0,0 +1,28 @@
+import type {KeyboardEvent} from 'react';
+import {useCallback} from 'react';
+import CONST from '@src/CONST';
+
+/**
+ * Custom hook that returns a keyboard event handler which triggers a callback
+ * when the Enter key is pressed.
+ *
+ * @param callback - The function to execute when Enter key is pressed
+ * @returns A keyboard event handler function
+ *
+ * @example
+ * const handleKeyDown = useEnterKeyHandler(() => navigation.navigate('Home'));
+ */
+function useEnterKeyHandler(callback: () => void) {
+    return useCallback(
+        (event: KeyboardEvent) => {
+            if (event.key !== CONST.KEYBOARD_SHORTCUTS.ENTER.shortcutKey) {
+                return;
+            }
+            event.preventDefault();
+            callback();
+        },
+        [callback],
+    );
+}
+
+export default useEnterKeyHandler;