Enable inline links on macOS to respond to interaction events (#3812)

* Port logic for inline link for macOS

* Change files

* Add comment

Author: rurikoaraki

change/@fluentui-react-native-link-c92fd396-c373-4b93-8ddf-17dbc81c8380.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Port logic for inline link for macOS",
+  "packageName": "@fluentui-react-native/link",
+  "email": "ruaraki@microsoft.com",
+  "dependentChangeType": "patch"
+}

packages/components/Link/src/Link.tsx

@@ -43,7 +43,12 @@ export const Link = compose<LinkType>({
       // This is a workaround for the issue. Once those issues are resolved, supportsA11yTextInText can be removed.
       const supportsA11yTextInText = Platform.OS !== 'android';
 
-      return supportsA11yTextInText && (inline || mergedProps.selectable) ? (
+      // MacOS Text component doesn't handle interaction events like hover etc.
+      // which are needed to style links correctly. Since macOS can handle
+      // Views in Text, we use that to handle interactions instead.
+      const supportsInteractionOnText = Platform.OS !== 'macos';
+
+      return supportsA11yTextInText && supportsInteractionOnText && (inline || mergedProps.selectable) ? (
         <Slots.content {...mergedProps}>{children}</Slots.content>
       ) : (
         <Slots.root {...mergedProps}>