[LinkV1] Remove text from Link a11y tree and add a11yLabel (#3856)

* Remove text from Link a11y tree and add a11yLabel * add LinkV1 to macOS test pages * Change files * undo yarn.lock changes * restore yarn.lock * update link snapshots
microsoft · Feb 11, 2025 · 2f291a4 · 2f291a4
1 parent 6a01667
commit 2f291a4
Show file tree

Hide file tree

Showing 5 changed files with 35 additions and 3 deletions.
diff --git a/apps/fluent-tester/src/testPages.ts b/apps/fluent-tester/src/testPages.ts
@@ -185,7 +185,7 @@ export const tests: TestDescription[] = [
     name: 'Link V1',
     component: LinkV1Test,
     testPageButton: Constants.HOMEPAGE_LINKV1_BUTTON,
-    platforms: ['win32', 'android', 'windows'],
+    platforms: ['macos', 'win32', 'android', 'windows'],
   },
   {
     name: 'Menu',

diff --git a/change/@fluentui-react-native-link-a9326e1b-bd1d-4dc4-b4f1-8f3ea2447708.json b/change/@fluentui-react-native-link-a9326e1b-bd1d-4dc4-b4f1-8f3ea2447708.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Remove text from Link a11y tree and add a11yLabel",
+  "packageName": "@fluentui-react-native/link",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-native-tester-384ba26f-dbdb-472c-9b9f-70a0931eb6b7.json b/change/@fluentui-react-native-tester-384ba26f-dbdb-472c-9b9f-70a0931eb6b7.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "add LinkV1 to macOS test pages",
+  "packageName": "@fluentui-react-native/tester",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/components/Link/src/Link.tsx b/packages/components/Link/src/Link.tsx
@@ -1,5 +1,6 @@
 /** @jsxRuntime classic */
 /** @jsx withSlots */
+import React from 'react';
 import { Platform, View } from 'react-native';
 
 import type { UseSlots } from '@fluentui-react-native/framework';
@@ -48,11 +49,20 @@ export const Link = compose<LinkType>({
       // Views in Text, we use that to handle interactions instead.
       const supportsInteractionOnText = Platform.OS !== 'macos';
 
+      // Find the first child that's a string and save it to set as the link's
+      // accessibilityLabel if one isn't defined.
+      let linkA11yLabel = '';
+      linkA11yLabel = React.Children.toArray(children)
+        .find((child) => typeof child === 'string')
+        .toString();
+
       return supportsA11yTextInText && supportsInteractionOnText && (inline || mergedProps.selectable) ? (
         <Slots.content {...mergedProps}>{children}</Slots.content>
       ) : (
-        <Slots.root {...mergedProps}>
-          <Slots.content focusable={false}>{children}</Slots.content>
+        <Slots.root {...mergedProps} accessibilityLabel={mergedProps.accessibilityLabel ?? linkA11yLabel}>
+          <Slots.content focusable={false} accessible={false}>
+            {children}
+          </Slots.content>
         </Slots.root>
       );
     };

diff --git a/packages/components/Link/src/__tests__/__snapshots__/Link.test.tsx.snap b/packages/components/Link/src/__tests__/__snapshots__/Link.test.tsx.snap
@@ -2,6 +2,7 @@
 
 exports[`Link component tests Default Link 1`] = `
 <View
+  accessibilityLabel="Link to Bing"
   accessibilityRole="link"
   accessibilityState={
     {
@@ -31,6 +32,7 @@ exports[`Link component tests Default Link 1`] = `
   tooltip="https://www.bing.com"
 >
   <Text
+    accessible={false}
     ellipsizeMode="tail"
     focusable={false}
     numberOfLines={0}
@@ -52,6 +54,7 @@ exports[`Link component tests Default Link 1`] = `
 
 exports[`Link component tests Default Link as a pressable 1`] = `
 <View
+  accessibilityLabel="Link to Bing"
   accessibilityRole="link"
   accessibilityState={
     {
@@ -80,6 +83,7 @@ exports[`Link component tests Default Link as a pressable 1`] = `
   }
 >
   <Text
+    accessible={false}
     ellipsizeMode="tail"
     focusable={false}
     numberOfLines={0}
@@ -101,6 +105,7 @@ exports[`Link component tests Default Link as a pressable 1`] = `
 
 exports[`Link component tests Inline Link 1`] = `
 <View
+  accessibilityLabel="Link to Bing"
   accessibilityRole="link"
   accessibilityState={
     {
@@ -130,6 +135,7 @@ exports[`Link component tests Inline Link 1`] = `
   tooltip="https://www.bing.com"
 >
   <Text
+    accessible={false}
     ellipsizeMode="tail"
     focusable={false}
     numberOfLines={0}
@@ -152,6 +158,7 @@ exports[`Link component tests Inline Link 1`] = `
 
 exports[`Link component tests Subtle Link 1`] = `
 <View
+  accessibilityLabel="Link to Bing"
   accessibilityRole="link"
   accessibilityState={
     {
@@ -182,6 +189,7 @@ exports[`Link component tests Subtle Link 1`] = `
   tooltip="https://www.bing.com"
 >
   <Text
+    accessible={false}
     ellipsizeMode="tail"
     focusable={false}
     numberOfLines={0}